@flexis/workbox-webpack-plugin

Webpack plugin to generate and inject precache manifest to ServiceWorker. Created specially for service-worker-loader.

Install

npm i -D @flexis/workbox-webpack-plugin
# or 
yarn add -D @flexis/workbox-webpack-plugin

Usage

Import (or require) the ServiceWorker in one of the bundle's files:

import registerServiceWorker from './serviceWorker';
 
registerServiceWorker({ scope: '/' });

Then add the service-worker-loader and @flexis/workbox-webpack-plugin to your webpack config. For example:

module.exports = {
    module:  {
        rules: [{
            test: /serviceWorker\.js$/,
            use:  'service-worker-loader'
        }]
    },
    plugins: [
        new WorkboxPlugin(
            /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.

importScripts('precache-manifest.js');
// ... other ServiceWorker code

⚠ IMPORTANT ⚠

Injecting of importScripts into ServiceWorker doesn't recalculate file hash. So, if you are using service-worker-loader with 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.

API

new WorkboxPlugin(test, options?)

test

RegExp to match ServiceWorker entries.

options

Same as workbox-webpack-plugin InjectManifest options, excluding swSrc and swDest options.