sw-precache-webpack-plugin

Webpack plugin for using service workers. Will generate a service worker file using sw-precache and add it to your build directory.

Install

npm install --save-dev sw-precache-webpack-plugin

Usage

var path = require('path');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')


module.exports = {
  context: __dirname,

  entry: {
    main: path.resolve(__dirname, 'src/index'),
  },

  output: {
    path: path.resolve(__dirname, 'src/bundles/'),
    filename: '[name]-[hash].js',
  },

  plugins: [
    new SWPrecacheWebpackPlugin(
      {
        cacheId: "my-project-name",
        maximumFileSizeToCacheInBytes: 4194304,
        runtimeCaching: [{
          handler: "cacheFirst",
          urlPattern: /[.]mp3$/,
        }],
        verbose: true,
      }
    ),
  ]
}

This will generate a new service worker at src/bundles/my-service-worker.js. Then you would just register it in your application:

(function() {
  if('serviceWorker' in navigator) {
    navigator.serviceWorker  
             .register('/service-worker.js')
             .then(function() {
               console.log('Service worker registered');
             })
             .catch(function(error) {
               console.error('Error registering service worker: ', error);
             });
  }
})();

Options

All options as specified by sw-precache are able to be passed in to the plugin.

I recommend omitting the staticFileGlobs argument and letting the plugin automatically determine the files to cache based on your bundles being built. If you omit the staticFileGlobs argument will add [name] and [hash] of each bundle to staticFileGlobs.

• // sw-precache options:
• @param {options: cacheId [String]},
• @param {options: directoryIndex [String]},
• @param {options: dynamicUrlToDependencies [Object<String,Array]},
• @param {options: handleFetch [boolean]},
• @param {options: ignoreUrlParametersMatching [Array]},
• @param {options: importScripts [Array]},
• @param {options: logger [function]},
• @param {options: maximumFileSizeToCacheInBytes [Number]},
• @param {options: navigateFallbackWhitelist [Array]},
• @param {options: replacePrefix [String]},
• @param {options: runtimeCaching [Array