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
sw-precache-webpack-plugin
service worker file
create const ServiceWorkerWebpackPlugin = ;moduleexports = plugins: 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
sw-precache-webpack-plugin
service worker file by webpack manifest
create create service worker file based on the specified webpack entry
moduleexports = plugins: 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
moduleexports = plugins: prefix: 'sw' strategy: 'multiple' }
Configuration
- compatible sw-precache-webpack-plugin configuration
Extended Configuration
option;
option.prefix
: {String}, optional - Service worker file prefix, default:sw
. such as:
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. ifconfig/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 - thesw-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 = ;// The service-worker.js name will get really url address by sw-mapping.json fileserviceWorkerRegister;
Relation
fork sw-precache-webpack-plugin