razzle-plugin-master-class-workbox
v1.0.0
Published
A [Razzle](https://github.com/jaredpalmer/razzle) plugin for seting up [workbox](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) and register the service worker as [create react app](https://github.com/facebook/create-react
Downloads
1
Readme
razzle-plugin-workbox
A Razzle plugin for seting up workbox and register the service worker as create react app example does.
Usage
Install the plugin:
# using npm
npm install --dev razzle-plugin-workbox
# yarn
yarn add --dev razzle-plugin-workbox
Add configuration to razzle.config.js
:
// razzle.config.js file
module.exports = {
plugins: [
'workbox'
],
};
Register service worker:
// src/client.js
import React from 'react';
import { hydrate } from 'react-dom';
import { register } from 'razzle-plugin-workbox/service-worker';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
register();
Configuration
The plugin can be set up with any workbox parameters. It comes with create react app defaults, but feel free to change them:
// razzle.config.js file
module.exports = {
plugins: [
{
name: 'workbox',
options: {
swDest: 'my-service-worker-name.js',
runtimeCaching: [
{
urlPattern: /^https:\/\/maps\.googleapis\.com\/maps-api-v3\/api\/js/,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'google-maps-v3-js',
},
},
],
},
},
],
};
In addition, the register
function allows certain configuration:
swDest
: The asset name of the service worker file.publicUrl
: If you change where the assets are served.onSuccess
: Callback to be executed when the service worker has initialized sucessfully.onUpdate
: Callback to be executed when the service worker has been updated.
(Default values can be found here)
// src/client.js
import React from 'react';
import { hydrate } from 'react-dom';
import { register } from 'razzle-plugin-workbox/service-worker';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
register({
swDest: 'my-service-worker-name.js',
});