service-worker-updatefound-refresh-dialog
service-worker-updatefound-refresh-dialog copied to clipboard
azu
A library show refresh dialog/banner when the service worker found updated.
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
Or
Import from unpkg.com:
- UMD: https://unpkg.com/[email protected]/dist/service-worker-updatefound-refresh-dialog.umd.js
- mjs: https://unpkg.com/service-worker-updatefound-refresh-dialog?module
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
- pwa-update-available/index.html at master · deanhume/pwa-update-available
- Advanced Recipes | Workbox | Google Developers
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
Author
License
MIT © azu
azu