sw-precache-webpack-dev-plugin
Webpack Plugin for using sw-precache during development with webpack-dev-server
Install
$ yarn add --dev sw-precache-webpack-dev-plugin
or
$ npm install --save sw-precache-webpack-dev-plugin
How it works
First of all, this plugin works in vary limited situation. This plugin will be applied after all of assets has been emmited by webpack compiling
that means all of files you wanted to cached by service worker should be listed in assets of webpack compiler. To achive that, you need to use webpack plugins(Copy or ...) to register it. The latest version supports glob patterns for files located in physical path not on memory-fs of webpack. However, I recommend that using webpack plugins to treats and list all of files to server worker's chached manifest. And then your sw.js, will be writed in temporory on memory-fs and webpack dev server will be served it.
DISCLAIMER: This plugin isn't able to be work perfectly when it comes to manage kind of files including ambiguous expression of path, For examples, ['.js', '.html'], in that case, we couldn't make a right judge for location between physical file path and memory-fs. Therefore, we recommand you use more specific glob patterns for that, like absolute path or relative path expressions.
Usage
See basic webpack config files at examples.
How to test
You can test this plugin by running example application with below commands. It will manage a service worker script while webpack devserver is running. Warn you, you need to make sure that the previous service worker script must be ungresitered or refleshed before you test with a newer version script of updating service worker configuration at webpack config.
$ yarn start
or
$ npm start
and open browser, visit to localhost:8080
Configuration
It will accept and pass through all of options parameter of sw-precache to sw-precache. By the way, there are more options and a few of specical way to treats passed configurations.
sw-precache Configurations
- staticFileGlobs: [Array] - Default is empty array, allow dev server to cache all of files in assets on webpack complilation
Plugin Configurations
- filename: [String] - Service worker script name for serving on dev server. It is same with sw-precache-webpack-plugin.
Test
It will be covered soon
License
MIT © Jimmy Moon