Simplifies creation of a service worker to serve your webpack bundles.
npm install serviceworker-webpack-plugin
When building a service worker, you probably want to cache all
your assets during the install
phase.
But in order to do so, you need their names.
That's not simple when you are using Webpack:
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
...
plugins: [
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, 'src/sw.js'),
}),
],
import runtime from 'serviceworker-webpack-plugin/lib/runtime';
if ('serviceWorker' in navigator) {
const registration = runtime.register();
}
sw.js
You can now use the global serviceWorkerOption
variable in your sw.js
.
E.g. In our example this object looks like:
{
assets: [
'./main.256334452761ef349e91.js',
],
}
You can have a look at the /docs
folder if you need a full working example.
ServiceWorkerWebpackPlugin(options)
options
entry
, required, string:
Path to the actual service worker implementation.filename
, string, default 'sw.js'
:
Relative (from the webpack's config output.path
) output path for emitted script.excludes
, array, default ['**/.*', '**/*.map']
:
Exclude matched assets from being added to the serviceWorkerOption.assets
variable. (Blacklist)includes
, array, default ['**/*']
:
Include matched assets added to the serviceWorkerOption.assets
variable. (Whitelist)publicPath
, string, default '/'
:
Specifies the public URL address of the output files when referenced in a browser.
We use this value to load the service worker over the network.template
, function, default noop:
This callback function can be used to inject statically generated service worker.
It's taking a serviceWorkerOption
argument and must return a promise.transformOptions
, function:
This callback function receives a raw serviceWorkerOption
argument.
The jsonStats
key contains all the webpack build information.minimize
:
Whether to minimize output. Defaults to process.env.NODE_ENV === 'production'
runtime(options)
options
: That's forwarded to the options
argument of the
ServiceWorkerContainer.register()
function.offline-plugin
?I wouldn't have been able to write this plugin without the offline-plugin project. Thanks @NekR for sharing it!
Still, soon after using it, I realized that it wasn't what I was looking for.
Hence, I decided to change the approach and created this thin layer on top of Webpack to solve the assets name issue. Nothing more.
If you don't care about my two issues with offline-plugin
then you don't need to use this package, offline-plugin
is great.
MIT