Skip to content

A library show refresh dialog/banner when the service worker found updated.

License

Notifications You must be signed in to change notification settings

azu/service-worker-updatefound-refresh-dialog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

service-worker-updatefound-refresh-dialog Build Status

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

screen shot

Install

Install with npm:

npm install service-worker-updatefound-refresh-dialog

Or

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.

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.

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.

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

Author

License

MIT © azu

About

A library show refresh dialog/banner when the service worker found updated.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published