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/service-worker-updatefound-refresh-dialog/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):
Example
Add to your service worker(sw.js):
// sw.js;
Options
message
: Custom messageonClick
: onClick handler for dialogforceUpdate
: force show updated UI for debug
window;
Style
Dialog's style use CSS variables. You can overwrite it by CSS Variables.
););););););););););););
For example, you can overwrite it by defining --sw-updatefound-refresh-dialog--left
.
FAQ
Does not refresh when click the banner
Do you forget to inject a script to service worker like sw.js
?
// sw.js;
skipWaiting()
integration
If you already did skipWaiting()
in sw.js, you should remove the code from sw.js
For example, workbox has skipWaiting
and clientsClaim
.
These method trigger statechange
event of the service worker without asking the user to reload manually.
// workbox init settingimportScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js");+ importScripts("https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js") workbox.core.setCacheNameDetails({ prefix: "website-v1" });workbox.googleAnalytics.initialize();- workbox.skipWaiting();- workbox.clientsClaim(); workbox.precaching.suppressWarnings();workbox.precaching.precacheAndRoute([]);
If you have called skipWaiting
without asking the user to reload manually, 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