PWAとはサンプルソース7

sw.js

const cacheName = 'v3';

// インストールイベント 
self.addEventListener('install',e => {
  console.log('Service Worker: sw.js is Installed');
 });

// アクティブイベント
self.addEventListener('activate',e => {
  console.log('Service Worker: sw.js is Activater ');
  e.waitUntil(
    caches.keys().then(cacheNames => {
        return Promise.all(
            cacheNames.map(cache => {
              if(cache !== cacheName){
                  console.log('Service Worker: Clearing Old Cache');
                  return caches.delete(cache);
              }
            })
        )
      })
    );    
});

// Fetchイベント(横取り)
self.addEventListener('fetch',e => {
  console.log('Service Worker: sw.js Fetching ');
  e.respondWith(
    fetch(e.request)
      .then(res => {
        //リクエストのコピーをする
        const resClone = res.clone();
        //キャッシュを開く
        caches
          .open(cacheName)
          .then(cache => {
            cache.put(e.request, resClone);
          });
        return res;
      }).catch(err => caches.match(e.requset).then(res => res)  )
  );
});