Skip to content

kurbaniec/combine-workbox-precaches-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

combine-workbox-precaches-plugin

Combines precaches of multiple entry points of Workbox into one service worker.

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 at.kacper.urbaniec@gmail.com

About

Combines precaches of multiple entry points of Workbox into one service worker.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published