service-worker-updatefound-refresh-dialog

Show refresh dialog/banner when the service worker found updated.

Install

Install with npm:

npm install service-worker-updatefound-refresh-dialog

Import from unpkg.com:

Usage

You should inject refresh dialog script to two place.

Your Page: index.html
Your Service Worker: sw.js

Add to your page(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
<script src="https://unpkg.com/[email protected]/dist/service-worker-updatefound-refresh-dialog.umd.js"></script>
<script>
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js')
            .then(function(registration) {
                serviceWorkerUpdatefoundRefreshDialog.register(registration);
            });
    });
</script>
</body>
</html>

Add to your service worker(sw.js):

// sw.js
importScripts("https://unpkg.com/[email protected]/dist/service-worker-updatefound-refresh-dialog.umd.js");

Options

message: Custom message
onClick: onClick handler for dialog
forceUpdate: force show updated UI for debug

    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/mock/sw.js')
            .then(function(registration) {
                serviceWorkerUpdatefoundRefreshDialog.register(registration, {
                    message: "Custom Message",
                    onClick: (registration) => {
                        if (!registration.waiting) {
                            return;
                        }
                        registration.waiting.postMessage("skipWaiting");
                    }
                });
            });
    });

Style

Dialog's style use CSS variables. You can overwrite it by CSS Variables.

  min-width: var(--sw-updatefound-refresh-dialog--min-width, 250px);
  color: var(--sw-updatefound-refresh-dialog--color, #fff);
  background-color: var(--sw-updatefound-refresh-dialog--background-color, #333);
  text-align: var(--sw-updatefound-refresh-dialog--text-align, center);
  border-radius: var(--sw-updatefound-refresh-dialog--border-radius, 2px);
  padding: var(--sw-updatefound-refresh-dialog--padding, 16px);
  position: var(--sw-updatefound-refresh-dialog--position, fixed);
  z-index: var(--sw-updatefound-refresh-dialog--z-index, 1);
  left: var(--sw-updatefound-refresh-dialog--left, initial);
  right: var(--sw-updatefound-refresh-dialog--right, 5%);
  top: var(--sw-updatefound-refresh-dialog--top, initial);
  bottom: var(--sw-updatefound-refresh-dialog--bottom, 30px);

For example, you can overwrite it by defining --sw-updatefound-refresh-dialog--left.

<style>
    :root {
        --sw-updatefound-refresh-dialog--left: 0;
    }
</style>

FAQ

Does not refresh when click the banner

Do you forget to inject a script to service worker like sw.js?

// sw.js
importScripts("https://unpkg.com/[email protected]/dist/service-worker-updatefound-refresh-dialog.umd.js");

`workbox` integration

If you have putworkbox.skipWaiting() in to sw.js, you should remove the code from sw.js

For example, workbox has workbox.skipWaiting() and workbox.clientsClaim(). This method update and control a web page as soon as possible without asking the user to reload manually.

Skip Waiting and Clients Claim

workbox.skipWaiting()'s behavior conflict with this script. You should remove it and add importScripts to service worker script.

// workbox init setting
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js");
+ importScripts("https://unpkg.com/[email protected]/dist/service-worker-updatefound-refresh-dialog.umd.js")

workbox.core.setCacheNameDetails({ prefix: "website-v1" });
- workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute([]);

If you have called workbox.skipWaiting(), this script do refresh page instantly.

javascript - Refresh page on controllerchange in service worker - Stack Overflow

Resources

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

yarn test

Interactive mode

yarn test:dev

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

mayandev / service-worker-updatefound-refresh-dialog Goto Github PK