node package manager


Webpack plugin for using service workers

SW Precache Webpack Plugin

NPM version NPM downloads Dependency Status CircleCI

SWPrecacheWebpackPlugin is a webpack plugin for using service workers to cache your external project dependencies. It will generate a service worker file using sw-precache and add it to your build directory.


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

Basic 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',
        filename: 'my-service-worker.js',
        maximumFileSizeToCacheInBytes: 4194304,
        runtimeCaching: [{
          handler: 'cacheFirst',
          urlPattern: /[.]mp3$/,

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) {

Another example of registering a service worker is provided by GoogleChrome/sw-precache


You can pass a hash of configuration options to SWPrecacheWebpackPlugin:

plugin options:

  • filename: [String] - Service worker filename, default is service-worker.js
  • filepath: [String] - Service worker path and name, default is to use webpack.output.path + options.filename. This will overried filename. Warning: Make the service worker available in the same directory it will be needed. This is because the scope of the service worker is defined by the directory the worker exists.
  • staticFileGlobsIgnorePatterns: [RegExp] - Define an optional array of regex patterns to filter out of staticFileGlobs (see below)
  • forceDelete: [boolean] - Pass force option to del, default is false.

sw-precache options:

  • cacheId: [String] - Not required but you should include this, it will give your service worker cache a unique name
  • directoryIndex: [String]
  • dynamicUrlToDependencies: [Object<String,Array<String>]
  • handleFetch: [boolean]
  • ignoreUrlParametersMatching: [Array<Regex>]
  • importScripts: [Array<String>] - Add [hash] if you want to import a file generated with webpack [hash] ex. ['dist/some-[hash].js']
  • logger: [function]
  • maximumFileSizeToCacheInBytes: [Number]
  • navigateFallbackWhitelist: [Array<RegExp>]
  • replacePrefix: [String]
  • runtimeCaching: [Array<Object>]
  • staticFileGlobs: [Array<String>] - Omit this to allow the plugin to cache all your bundles' emitted assets.
  • stripPrefix: [String] - Omit this to use your webpack config's output.path + '/' for stripping prefixes.
  • templateFilePath: [String]
  • verbose: [boolean]

Note that all configuration options are optional. SWPrecacheWebpackPlugin will by default use all your assets emitted by webpack's compiler for the staticFileGlobs parameter and your webpack config's output.path + '/' as the stripPrefix parameter (see #4).

Here's an example using one option from sw-precache (cacheId) with one option from SWPrecacheWebpackPlugin (filename) in a configuration hash:

plugins: [
  new SWPrecacheWebpackPlugin(
      cacheId: "my-project-name",
      filename: "my-project-service-worker.js",


See the examples documentation

Webpack Dev Server Support

Currently SWPrecacheWebpackPlugin will not work with Webpack Dev Server. If you wish to test the service worker locally, you can use simple a node server see example project or python SimpleHTTPServer from your build directory. I would suggest pointing your node server to a different port than your usual local development port and keeping the precache service worker out of your local configuration (example).


Install node dependencies:

  $ npm install

Add unit tests for your new feature in ./test/plugin.spec.js


Tests are located in ./test

Run tests:

  $ npm t