service-worker-precache-webpack-plugin

create service worker file by webpack manifest and sw precache

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
service-worker-precache-webpack-plugin
011.3.56 years ago6 years agoMinified + gzip package size for service-worker-precache-webpack-plugin in KB

Readme

service-worker-precache-webpack-plugin
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !Test coveragecodecov-imagecodecov-url !David depsdavid-imagedavid-url !npm downloaddownload-imagedownload-url
create service worker javascript file and manifest by webpack manifest and sw-precache, you can use with service-worker-register

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

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"
}


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