https://github.com/hubcarl/service-worker-precache-webpack-plugin
create service worker javascript file by webpack manifest
https://github.com/hubcarl/service-worker-precache-webpack-plugin
progressive-web-app pwa service-worker service-worker-manifest service-worker-precache webpack
Last synced: about 2 months ago
JSON representation
create service worker javascript file by webpack manifest
- Host: GitHub
- URL: https://github.com/hubcarl/service-worker-precache-webpack-plugin
- Owner: hubcarl
- Created: 2018-02-02T11:26:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-31T02:42:49.000Z (about 8 years ago)
- Last Synced: 2025-10-23T02:52:09.276Z (9 months ago)
- Topics: progressive-web-app, pwa, service-worker, service-worker-manifest, service-worker-precache, webpack
- Language: JavaScript
- Size: 23.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# service-worker-precache-webpack-plugin
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][codecov-image]][codecov-url]
[![David deps][david-image]][david-url]
[![npm download][download-image]][download-url]
[npm-image]: https://img.shields.io/npm/v/service-worker-precache-webpack-plugin.svg?style=flat-square
[npm-url]: https://npmjs.org/package/service-worker-precache-webpack-plugin
[travis-image]: https://img.shields.io/travis/hubcarl/service-worker-precache-webpack-plugin.svg?style=flat-square
[travis-url]: https://travis-ci.org/hubcarl/service-worker-precache-webpack-plugin
[codecov-image]: https://codecov.io/gh/hubcarl/service-worker-precache-webpack-plugin/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/hubcarl/service-worker-precache-webpack-plugin
[david-image]: https://img.shields.io/david/hubcarl/service-worker-precache-webpack-plugin.svg?style=flat-square
[david-url]: https://david-dm.org/hubcarl/service-worker-precache-webpack-plugin
[snyk-image]: https://snyk.io/test/npm/service-worker-precache-webpack-plugin/badge.svg?style=flat-square
[snyk-url]: https://snyk.io/test/npm/service-worker-precache-webpack-plugin
[download-image]: https://img.shields.io/npm/dm/service-worker-precache-webpack-plugin.svg?style=flat-square
[download-url]: https://npmjs.org/package/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](https://github.com/hubcarl/service-worker-register)
- compatible [sw-precache-webpack-plugin](https://github.com/goldhand/sw-precache-webpack-plugin) plugin functionality
- support create service worker javascript file by webpack manifest [webpack-manifest-resource-plugin](https://github.com/hubcarl/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
```bash
npm i service-worker-precache-webpack-plugin --save-dev
```
## Usage
### create `sw-precache-webpack-plugin` service worker file
```js
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](https://github.com/goldhand/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
```js
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
```js
module.exports = {
plugins:[
new ServiceWorkerWebpackPlugin({
prefix: 'sw',
strategy: 'multiple'
}
]
}
```
## Configuration
- compatible [sw-precache-webpack-plugin](https://github.com/goldhand/sw-precache-webpack-plugin) configuration
## Extended Configuration
```js
new ServiceWorkerWebpackPlugin(option);
```
- `option.prefix` : {String}, optional - Service worker file prefix, default: `sw`. such as:
```js
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](https://github.com/hubcarl/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
```
```js
{
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"
}
```
- use with [service-worker-register](https://github.com/hubcarl/service-worker-register)
```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](https://github.com/goldhand/sw-precache-webpack-plugin)
## License
[MIT](LICENSE)