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
npm 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',
});