@flexis/workbox-webpack-plugin

1.2.1 • Public • Published

@flexis/workbox-webpack-plugin

NPM version Node version Peer dependencies status Dependencies status Build status Dependabot badge

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:

API

new WorkboxPlugin(test, options?)

test

RegExp to match ServiceWorker entries.

options

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

Package Sidebar

Install

npm i @flexis/workbox-webpack-plugin

Weekly Downloads

13

Version

1.2.1

License

MIT

Unpacked Size

26.8 kB

Total Files

7

Last publish

Collaborators

  • dangreen