A library show refresh dialog/banner when the service worker found updated.
MIT License
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:
You should inject refresh dialog script to two place.
index.html
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");
workbox
integrationIf 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.
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.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
MIT azu