H5离线储存-使用serverWorker实现

H5 离线存储-使用 serverWorker 实现

离线存储所用技术

serverWorker

serviceWorker 生命周期

• install 事件会在 serviceWorker 注册成功时候触发，主要用于缓存资源

• activate 事件会在 serviceWorker 激活的时候触发，主要用于删除旧的资源

• fetch 事件会在发送请求的时候触发，主要用于操作缓存或者读取网络资源

  注意：

• 如果 sw.js 发生了改变，install 事件会重新触发

• activate 事件会在 install 事件后触发，但是如果现在已经存在 serviceWorker，就会处于等待状态直到 serviceWorker 终止

• 可以通过self.skipWaiting()方法跳过等待，返回一个 promise 对象

• 可以通过event.WautUntil()方法扩的参数是一个 promise 对象，会在 promise 结束后才会结束当前生命周期函数，防止浏览器在一步操作之前就停止了生命周期

• serviceWorker 激活后，会在下一次刷新页面的时候生效，可以通过self.clients.claim()立即活的控制权

//在index.html 注册serverWorker方法
// 网页加载完成时注册
  window.addEventListener("load", () => {
   
    // 能力检测
    if ("serviceWorker" in navigator) {
   
      navigator.serviceWorker.register("./sw.js").then((res) => {
   
        console.log(res);
      });
    }
  });

//serverWorker 相关事件
self.addEventListener("install", (event) => {
   
  console.log("install", event);
  //skipWaiting 会让serviceworker跳过等待，直接进入activate