service-worker-precache-webpack-plugin

create service worker javascript file and manifest by webpack manifest and sw-precache, you can use with service-worker-register

• compatible sw-precache-webpack-plugin plugin functionality
• support create service worker javascript file by webpack manifest webpack-manifest-resource-plugin
• inject service worker manifest file content to global var SERVICE_WORKER_MANIFEST
• create service worker manifest file sw-mapping.json

Install

npm i service-worker-precache-webpack-plugin --save-dev

Usage

create sw-precache-webpack-plugin service worker file

const ServiceWorkerWebpackPlugin = require('service-worker-precache-webpack-plugin');
module.exports = {
  plugins:[
    new ServiceWorkerWebpackPlugin({
        cacheId: 'my-project-name',
        dontCacheBustUrlsMatching: /\.\w{8}\./,
        filename: 'service-worker.js',
        minify: true,
        navigateFallback: PUBLIC_PATH + 'index.html',
        staticFileGlobsIgnorePatterns: [/\.map$/, /sw-manifest\.json$/],
    })
  ]  
}

more configuration sw-precache-webpack-plugin

create sw-precache-webpack-plugin service worker file by webpack manifest

create service worker file based on the specified webpack entry

module.exports = {
  plugins: [
    new ServiceWorkerWebpackPlugin({
      prefix: 'sw',
      strategy: [
        {
          name: 'index',
          entry: 'index/index',
        },
        {
          name: 'category',
          entry: ['category/category', 'about/about'],
          options: {
            runtimeCaching: [
              {
                urlPattern: /^https:\/\/category\.com\/api/,
                handler: 'fastest'
              }
            ]
          }
        }
      ],
      manifest: 'config/manifest.json'
    }
  ]
}

support create an independent service worker file for webpack each entry

module.exports = {
    plugins:[
        new ServiceWorkerWebpackPlugin({
            prefix: 'sw',
            strategy: 'multiple'
        }
    ] 
}

Configuration

• compatible sw-precache-webpack-plugin configuration

Extended Configuration

new ServiceWorkerWebpackPlugin(option);

• option.prefix : {String}, optional - Service worker file prefix, default: sw. such as:

new ServiceWorkerWebpackPlugin({
    prefix: 'sw',
    filename: 'home.js'
});

The final generated file is sw-home.js

• option.manifest {Object}, optional - The format is webpack-manifest-resource-plugin. when create service worker by webpack manifest, you must set this config. if config/manifest.json exists, will use this manifest config.

• option.strategy {String|Array} - How to create service worker file by what strategy. The value optional : single, multiple, and Array config. default: single

single: create a service worker file by all webpack entry
multiple: create an independent service worker file for webpack each entry
array type: if the value is array, create service worker file based on the specified webpack entry

{
  strategy: [
    {
        name: 'index',
        entry: 'index/index',
    },
    {
        name: 'category',
        entry: ['category/category', 'about/about'],
        options: {
        runtimeCaching: [
            {
             urlPattern: /^https:\/\/category\.com\/api/,
             handler: 'fastest'
            }
        ]
      }
    }
 ]
}

the option.strategy[] array item config:

• name: {String} - service worker file name.
• entry: {String|Array} - the webpack entry name.
• options: {Object}, optional - the sw-precache-webpack-plugin option.

Manifest

• The plugin will create service worker manifest file, solve the service worker cache problem by manifest.

// sw-manifest.js
{
  "config": {
    "localPublicPath": "/public/",
    "publicPath": "/public/"
  },
  "service-worker.js": "/public/service-worker.567ddfd3.js"
}

• use with service-worker-register

const serviceWorkerRegister = require('service-worker-register');
// The service-worker.js name will get really url address by sw-mapping.json file
serviceWorkerRegister.register('service-worker.js');

Relation

fork sw-precache-webpack-plugin

License

MIT