custom-pwa-webpack-plugin
webpack plugin for development and customization service worker
A plugin to help you create your Progressive Web Apps.
It will suit you if you know what you are doing, and you just need a tool for this.
Usage:
Add this code to the script of your service worker. It will be replaced by the same variables. Only with actual values.
my-service-worker.js
// <version_templateconst VERSION = '0.1';const files = [];// end_version_template> // ...
You can use the files to create a query cache. They will be collected relative to the pattern specified in the options.
Next, connect the plugin and specify the desired options.
webpack.config.js
var path = require('path');var CustomPwaWebpackPlugin = require('custom-pwa-webpack-plugin'); module.exports = { // You config entry: path.join(__dirname, './src/index.js'), output: { filename: 'bundle.js' }, // ... plugins: [ new CustomPwaWebpackPlugin({ entry: path.join(__dirname, 'my-service-worker.js'), dist: path.join(__dirname, 'dist'), version: require('./package').version, name: 'service-worker.js', file_pattern: /\.(js|css|html)$/ }) ]}
Parameters | Default | Required | Description |
---|---|---|---|
entry | true | The file from which to start the build script (absolute path) | |
run | true | false | If you don't need create service worker |
dist | false | The folder to save the script (absolute path) | |
version | false | Version to create the cache | |
name | 'service-worker.js' | false | File name |
file_pattern | /\.(js|css|html)$/i | false | Regular expression for file caching |
file_prefix | '/' | false | Prefix path for files |
add | [] | false | The list of paths added manually |
replace_names | {} | false | Replace full path name for files, |
mode | 'production' | false | Service Worker build file mode |
num_runned | 1 | false | HACK for webpack <4 and Nuxt |
dev | false | false | true - if watch mode |
num_runned
- Need if you start multiple processes, and only one need to run. Then specify the number. For Nuxt is1
.
Options
replace_names
webpack.config.js
var path = require('path');var CustomPwaWebpackPlugin = require('custom-pwa-webpack-plugin'); module.exports = { // You config entry: path.join(__dirname, './src/index.js'), output: { filename: 'bundle.js' }, // ... plugins: [ new CustomPwaWebpackPlugin({ entry: path.join(__dirname, 'my-service-worker.js'), replace_names: { // key is will be replaced with value '/_nuxt/index.spa.html': '/' } }) ]}
Tips for NuxtJs
// nuxt.config.js module.exports = { build: { plugins: [ new CustomPwaWebpackPlugin({ entry: path.join(__dirname, 'sw/src/index.js'), dist: path.join(__dirname, 'static'), version: require('./package').version, file_pattern: /\.(html|js|css|woff|woff2|ttf|eot|svg)$/i, file_prefix: '/_nuxt/', num_runned: 1 // for "npm run generate" }) ] }}
In layout/default.vue
add