Webpack plugin to generate and inject precache manifest to ServiceWorker. Created specially for
npm i -D @flexis/workbox-webpack-plugin# oryarn add -D @flexis/workbox-webpack-plugin
Import (or require) the ServiceWorker in one of the bundle's files:
Then add the
@flexis/workbox-webpack-plugin to your webpack config. For example:
moduleexports =module:rules:test: /serviceWorker\.js$/use: 'service-worker-loader'plugins:/serviceWorker\.js$/workboxOptions
How it works?
This plugin generates
precache-manifest.js file with
workbox-webpack-plugin and injects importing of manifest into matched ServiceWorker entry files.
;// ... other ServiceWorker code
⚠ IMPORTANT ⚠
importScripts into ServiceWorker doesn't recalculate file hash. So, if you are using
filename option, which contains
[hash], hash of ServiceWorker file, with
importScripts and without it, will be the same. But in real life it doesn't matter:
- You shouldn't apply HTTP cache to ServiceWorker files;
- Modern browsers by default doesn't use HTTP cache to download ServiceWorkers.
new WorkboxPlugin(test, options?)
RegExp to match ServiceWorker entries.
InjectManifest options, excluding