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
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) {
navigator.serviceWorker.register('/my-service-worker.js');
}
})();
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 isservice-worker.js
filepath
:[String]
- Service worker path and name, default is to usewebpack.output.path
+options.filename
.staticFileGlobsIgnorePatterns
:[RegExp]
- Define an optional array of regex patterns to filter out of staticFileGlobs (see below)
cacheId
:[String]
- Not required but you should include this, it will give your service worker cache a unique namedirectoryIndex
:[String]
dynamicUrlToDependencies
:[Object<String,Array<String>]
handleFetch
:[boolean]
ignoreUrlParametersMatching
:[Array<Regex>]
importScripts
:[Array<String>]
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'soutput.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
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
Run tests
$ npm t