Simple run-time caching service worker with sw-toolbox

• 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:

1. A collection of service worker tools: https://googlechrome.github.io/sw-toolbox/
2. Predefined request handlers: https://googlechrome.github.io/sw-toolbox/api.html#handlers
3. https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34
4. Debugging Service Workers: https://www.chromium.org/blink/serviceworker/service-worker-faq

Babel could create non-optimizable code

Babel transpiles default parameter value into code, that could not be optimized in V8:

 {  
   findAll(src, accumulatedItems = []) {  
     // code  
   }  
 }  

is transpiled to

 {  
   findAll: function(src) {  
     var t = this, accumulatedItems = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : [];  
     // code  
   }  
 }  

with warning "Not optimized: Bad value context for arguments value".