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
-
Load plugin
const CombineWorkboxPrecachesPlugin = ; -
Set amount of entry points / precaches
CombineWorkboxPrecachesPluginamount = 2; -
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.swSrc: './src/service-worker/service-worker.js'swDest: 'tmp1.txt'include: /\.wasm$/ /\.html$/ /\.js$/ /\.ico$/ /\.png$/ /\.jpeg$/ /\.json$/'save' 'tmp1.txt' -
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.swSrc: './src/service-worker/service-worker.js'include: /\.wasm$/ /\.html$/ /\.js$/ /\.ico$/ /\.png$/ /\.jpeg$/ /\.json$/'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