Nearsighted Paramecium Multiverse

    @loopmode/cra-workbox-refresh

    0.0.5 • Public • Published

    @loopmode/cra-workbox-refresh

    Helper for create-react-app v2 apps that use the workbox service worker.
    Displays a UI that informs the user about updates and recommends a page refresh.

    Based on https://developers.google.com/web/tools/workbox/guides/advanced-recipes.

    Note: Requires Node >8

    Installation

    Install this package as a dev dependency in your project:

    yarn add --dev @loopmode/cra-workbox-refresh
    

    Usage

    Two things need to be done in your project:

    1. Inject code into generated service-worker.js after build
    2. Provide a callback when initializing workbox in your app

    1. Inject code after build

    In your package.json, change your build script to execute inject-workbox-refresh right after the build is created.

    "scripts": {
        "build": "react-scripts build && inject-workbox-refresh"
    }
    

    It will inject a simple piece of code for handling a skipWaiting message in the generated service worker file:

    // this is appended to build/service-worker.js after each build
    self.addEventListener('message', function handleSkipWaiting(event) {
      if (event.data === 'skipWaiting') { self.skipWaiting(); }
    });
    

    2. Provide workbox callback

    In your index.js file, where you initialize workbox, initialize the refresh mechanism as well.
    Use the onUpdate callback of the register function and pass along the received registration object.

    import * as serviceWorker from './serviceWorker';
    import initWorkboxRefresh from '@loopmode/cra-workbox-refresh';
    
    // ...
    
    serviceWorker.register({
        onUpdate: registration => initWorkboxRefresh(registration)
    });
    

    Options

    textContent

    Provide a custom text for the button:

    serviceWorker.register({
        onUpdate: registration => initWorkboxRefresh(registration, {
            textContent: 'Updates loaded. Click here to refresh'
        })
    });
    

    className

    Provide a custom CSS class for the button:

    serviceWorker.register({
        onUpdate: registration => initWorkboxRefresh(registration, {
            className: 'workbox-refresh'
        })
    });
    

    render

    Provide a custom render function that controls the rendered UI entirely. It will be invoked when a new service worker becomes available and it will receive the registration object.
    You can provide whatever UI you need, and handle whatever events you like, you just need to call registration.waiting.postMessage("skipWaiting") to force the refresh. A function that does exactly that is provided to you as 'refresh' in the options object.

    Pass your custom render function:

    serviceWorker.register({
        onUpdate: registration => initWorkboxRefresh(registration, { render: renderRefreshUI })
    });
    

    If you don't need any special handling, just use the received refresh function:

    function renderRefreshUI(registration, { refresh }) {
        const el = document.createElement('div');
        document.body.appendChild(el);
    
        ReactDOM.render(<MyRefreshNotification onClick={refresh} />, document.getElementById(el));
    }
    

    If you want to handle the event manually, e.g. disable the clicked button or show a loading animation:

    function renderRefreshUI(registration) {
        const el = document.createElement('div');
        document.body.appendChild(el);
    
        const handleClick = (event) => {
            // ensure registration.waiting is available
            if (registration.waiting) {
                // post the "skipWaiting" message
                registration.waiting.postMessage("skipWaiting");
                // do whatever you need to do
                event.target.disabled = true;
            }
        }
        ReactDOM.render(<MyRefreshNotification onClick={handleClick} />, el));
    }
    
    

    Install

    npm i @loopmode/cra-workbox-refresh

    DownloadsWeekly Downloads

    88

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    7

    Last publish

    Collaborators

    • loopmode