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