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