common piece of js code for Web Service Worker

SeanNguyen

5/15/2017 - 2:47 PM

common piece of js code for Web Service Worker

ServiceWorker.md

Rendered
Source

Common NPM Modules:

SW Toolbox: A collection of tools for service workers

https://github.com/GoogleChrome/sw-toolbox

SW Precache: A npm module generates service worker code

https://github.com/googlechrome/sw-precache

Register Service Worker

if (navigator && 'serviceWorker' in navigator) {
  navigator.serviceWorker
   .register('/service-worker.js')
   .then(function() { 
    console.log('Service Worker Registered'); 
  });
}

Caching Resources

var cacheName = 'v1';
var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js',
  ...
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

Clean old caches

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
});

Serve cached resources

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

PushNotification.md