Show refresh dialog/banner when the service worker found updated.
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
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");
message
: Custom messageonClick
: onClick handler for dialogforceUpdate
: 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");
}
});
});
});
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>
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");
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.
- pwa-update-available/index.html at master · deanhume/pwa-update-available
- Advanced Recipes | Workbox | Google Developers
See Releases page.
Install devDependencies and Run npm test
:
yarn test
Interactive mode
yarn test:dev
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
MIT © azu