My Service Worker Experiment Google Kejar MWS Batam 2018

service-worker.js

// for caches version on the browser so when we change the version, old version of caches will be reaplaced
var VERSION = 'static-assets-01';

self.addEventListener('install', function(event) {
 event.waitUntil(
   caches.open(VERSION).then(function(cache) { 
     return cache.addAll([
       '/',
       '/index.html',
       '/main.js',
       '/app.css',
       '/images/googlelogo_color_272x92dp.png',
       '/images/profile.jpg',
       '/project1/add2numbers.html',
       '/project2/leafletmapbox.html',
       '/project3/index.html',
       '/project3/data/peta.json',
       '/project3/images/kopi_akau.jpg',
       '/project3/images/kopi_bakrey.jpg',
       '/project3/images/kopi_batman.jpg',
       '/project3/images/kopi_hawai.jpg',
       '/project3/images/kopi_pantai.jpg',
       '/project3/js/peta.js'

     ]);
   })
 );
});

self.addEventListener('fetch', function(event) {
  var tryInCachesFirst = caches.open(VERSION).then(cache => {
    return cache.match(event.request).then(response => {
      if (!response) {
        return handleNoCacheMatch(event);
      }
      // Update cache record in the background
      fetchFromNetworkAndCache(event);
      // Reply with stale data
      return response
    });
  });
  event.respondWith(tryInCachesFirst);
});

self.addEventListener('activate', function(event) {
  event.waitUntil(caches.keys().then(keys => {
    return Promise.all(keys.map(key => {
      if (key !== VERSION)
        return caches.delete(key);
    }));
  }));
});

function fetchFromNetworkAndCache(event) {
  // DevTools opening will trigger these o-i-c requests, which this SW can't handle.
  // There's probaly more going on here, but I'd rather just ignore this problem. :)
  // https://github.com/paulirish/caltrainschedule.io/issues/49
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;

  return fetch(event.request).then(response => {
    // foreign requests may be response.type === 'opaque' and missing a url
    if (!response.url) return response;
    // regardless, we don't want to cache other origin's assets
    if (new URL(response.url).origin !== location.origin) return response;

    return caches.open(VERSION).then(cache => {
      // TODO: figure out if the content is new and therefore the page needs a reload.
      cache.put(event.request, response.clone());
      return response;
    });
  }).catch(err => console.error(event.request.url, err));
}

function handleNoCacheMatch(e) {
  return fetchFromNetworkAndCache(e);
}