- Install sw-toolbox
npm i --save-dev sw-toolbox
- Make installed file node_modules\sw-toolbox\sw-toolbox.js accessible on production site
- Create Service Worker file service-worker-runtime-cache.js somewhere above the resources you want to cache (i.e. if you want to cache /app/assets/*.css, then Service Worker should be placed in /app/assets or /app or even / folder)
importScripts('path/to/node_modules/sw-toolbox/sw-toolbox.js'); toolbox.options.debug = true; toolbox.router.get(/\.(css|woff2|png)\?/, toolbox.fastest); toolbox.router.get(/(main|bundle|ckeditor).js/, toolbox.fastest);
- Add initialization code to your JavaScript application
if (navigator.serviceWorker && navigator.serviceWorker.register) { navigator.serviceWorker.register('/app/service-worker-runtime-cache.js'); }
- Frequent problem: When DevTools are open, Service Worker does not work. Reason: if "Disable cache" in Network tab is checked, requests will go directly to the network.
More info:
- A collection of service worker tools: https://googlechrome.github.io/sw-toolbox/
- Predefined request handlers: https://googlechrome.github.io/sw-toolbox/api.html#handlers
- https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34
- Debugging Service Workers: https://www.chromium.org/blink/serviceworker/service-worker-faq