services worker 註冊

window.onload=function(){//網頁載入完執行
         if('serviceWorker'in navigator){//瀏覽器相容
             navigator.serviceWorker.register('sw.js')//註冊serviceworker並返回一個promise物件
             .then(resitration=>{console.log(resitration)})
             .catch(err=>{console.log(err)})
         }
     }

sw.js

console.log('111111111111111');

開啟VS自帶的伺服器

services worker 生命週期

Service worker生命週期事件

** instal事件會在service worker註冊成功的時候觸發，主要用於快取資源**
** activate事件會在service worker啟用的時候觸發， 主要用於刪除舊的資源**
fetch事件會在傳送請求的時候觸發，主要用於操作快取或者讀取網路資源

●如果sw.js發生 了改變，install事件 會重新觸發
●activate事件會在insall事件後觸發，但是如果現在已經存在service worker了, 那麼就處於等待狀態，直到
當前service worker終止
●可以通過self.skiWaiting()方法跳過等待， 返回一個promise物件

self.addEventListener('install',event=>{   console.log('install',event);  self.skipWaiting();  });

●可以通過event.waitUntil0方法擴的引數是一個promise物件， 會在promise結束後才會結束當前生命週期函式，防止瀏覽器在非同步操作之前就停止了生命週期

self.addEventListener('install',event=>{   console.log('install',event); event.waitUntil(self.skipWaiting());  });

●service worker啟用後， 會在下次重新整理頁面的時候生效，可以通過self.clients.claim()立即獲取控制權

self.addEventListener('activate',event=>{   console.log('activate',event); event.waitUntil(self.ClientRectList.claim() );  });

fetch事件,抓取網路請求