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 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");
}
});
});
});
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