PWA：Service worker生命周期事件对网络资源的处理

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事件,抓取网络请求