service worker
使用步骤
<script>
// 1 在网页加载完成的时候 注册 service worker
window.addEventListener('load', () => {
// 2 能力检测
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(registration => {
console.log(registration);
}).catch(err=>{
console.log(err);
})
}
})
self.addEventListener('install', event => {
console.log('install',event);
// 会让 service worker 跳过等待 直接激活进入到 activate 状态
// self.skipWaiting()
// 等待 skipWaiting 结束 才进入到 activate
event.waitUntil(self.skipWaiting())
})
self.addEventListener('activate', event => {
console.log('activate',event);
// 表示 service worker 激活后, 立即获取控制权
event.waitUntil(self.clients.claim())
})
// fetch 事件会在请求发送的时候触发
self.addEventListener('fetch', event => {
console.log('fetch',event);
})
---------------
fetch
// window 对象上有fetch属性
fetch('./data.json').then(res=>{
// res 请求得到的响应内容， 二进制的流
// 调用 res.json()方法 可以把数据变成 json 格式
// console.log(res);
return res.json()
}).then( data =>{
console.log(data);
})
--------------------
