Webpack Plugin for using sw-precache during development with webpack-dev-server
$ yarn add --dev sw-precache-webpack-dev-plugin
$ 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.
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
$ npm start
and open browser, visit to
- staticFileGlobs: [Array] - Default is empty array, allow dev server to cache all of files in assets on webpack complilation
- filename: [String] - Service worker script name for serving on dev server. It is same with sw-precache-webpack-plugin.
It will be covered soon
MIT © Jimmy Moon