Why?

If you have an app with multiple Webpack entry points for like a Web-App and a Web-Worker, then the Workbox-Plugin with InjectManifest will always override its generated Service-Worker files from other entry points which results in missing precache import statements. This plugin captures all precache import statements and inserts them into the generated Service-Worker file.

Usage

1. Load plugin

   const CombineWorkboxPrecachesPlugin = require('combine-workbox-precaches-plugin');

2. Set amount of entry points / precaches

   CombineWorkboxPrecachesPlugin.amount = 2;

3. For every Webpack entry besides the final one, load the Workbox-Plugin and afterwards use this plugin with the save option and the filename of the generated file by the Workbox-Plugin.

   Note: Use tmp1.txt or similar filenames for precaches besides the final one.

   new WorkboxPlugin.InjectManifest({
           swSrc: './src/service-worker/service-worker.js',
           swDest: 'tmp1.txt',
           include: [/\.wasm$/, /\.html$/, /\.js$/, /\.ico$/, /\.png$/, /\.jpeg$/, /\.json$/]
         }),
   new CombineWorkboxPrecachesPlugin('save', 'tmp1.txt'),

4. On the final entry use this plugin with the option combine

   Note: If you use null for the filename, service-worker.js will be used as default.

   new WorkboxPlugin.InjectManifest({
           swSrc: './src/service-worker/service-worker.js',
           include: [/\.wasm$/, /\.html$/, /\.js$/, /\.ico$/, /\.png$/, /\.jpeg$/, /\.json$/]
         }),
   new CombineWorkboxPrecachesPlugin('combine', null),

Usage with Webpack-Dev-Server and Hot Module Replacement

This section assumes that you use Chrome / Chromium for debugging.

When using the plugin with the Webpack-Dev-Server for debugging purposes it is important that you use the following options for the Service-Worker.

Disclaimer

This is an unofficial plugin for Workbox. The plugin is not affiliated with the Workbox team or Google.

License

MIT

GitHub kurbaniec  ·  Mail [email protected]