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

最新推荐文章于 2025-05-26 09:23:20 发布

FakeOccupational

最新推荐文章于 2025-05-26 09:23:20 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏：服务化&架构

本文链接：https://blog.youkuaiyun.com/ResumeProject/article/details/112100809

服务化&架构专栏收录该内容

134 篇文章

订阅专栏

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事件,抓取网络请求
在这里插入图片描述