H5 离线存储-使用 serverWorker 实现

我心飞翔 分类:javascript

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
  //waitUntil 等待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);
});
 

cache storage

cacheStorage 接口表示 Cache 对象的储存,配合 service worker 来实现资源的缓存

  • cache api 类似于数据库的操作
    • caches.open(cacheName).then(res=>{}),用于打开缓存,返回 一个匹配 cacheName 的 cache 对象的 Promise,类似于连接数据库
    • caches.key() 返回一个 promise 对象,包括所有的缓存 key
    • caches.delete(key) 根据 key 删除对应的缓存
  • cache 对象常用方法:
    • cache 接口为缓存的 Request/Response 对象对提供存储机制
    • cache.put(req,res)把请求当成 key,并且把对应的响应存储起来
    • cache.add(url)根据 url 发起请求,并且吧响应结果储存起来
    • cache.addAll(urls) 抓取一个 url 数组,并且把结果都储存起来
    • cache.match(req) 获取 req 对应的 response

实现离线存储

注册 serverWorker

  // 网页加载完成时注册
    window.addEventListener("load", async () => {
      // 能力检测
      if ("serviceWorker" in navigator) {
        try {
          const registration = await navigator.serviceWorker.register(
            "./assets/sw.js"
          );
          console.log("注册成功");
        } catch (error) {
          console.log("注册失败", error);
        }
      }
    });
</script>
 

注意:

  • 需要在网页加载完成是注册,防止与其他资源竞争,影响网页的正常使用。
  • serverWorker 只能适用于 HTTPS 中或者 localhost

设置缓存内容

在 serverWorker 的 install 事件中设置缓存内容

//sw.js 内容
//设置缓存名字 用于版本比较删除之前的cache
const CACHE_NAME = "cache_name_v1";
self.addEventListener("install", async (event) => {
  // 开启一个cache 得到一个cache对象
  const cache = await caches.open(CACHE_NAME);
  // 等待cache把所有的资源存储
  await cache.addAll([
    "/",
    "/manifest.json",
    "/img/icon.png",
    "/css/index.css",
    "/js/index.js",
  ]);
  // 等待skipWaiting结束才进入到activate
  await self.skipWaiting();
});
 

清除旧的缓存

在 activate 中检测储存版本是否一致,不一致删除旧的缓存

//sw.js 内容
// 主要清除旧的缓存
self.addEventListener("activate", async (event) => {
  const keys = await caches.keys();
  // 判断key 删除旧的资源
  keys.forEach((key) => {
    if (key !== CACHE_NAME) {
      caches.delete(key);
    }
  });
  // 表示service worker激活后,立即活的控制权
  await self.clients.claim();
});
 

离线读取 cache

fetch 事件 会在请求发送的时候触发,在 fetch 事件中,判断资源是否能够请求成功,如果能请求成功,就响应成功的结果,如果断网,请求失败了,读取 cache 缓存即可

//sw.js 内容
self.addEventListener("fetch", (event) => {
  const req = event.request;
  event.respondWith(networkFirst(req));
});
// 网络优先
async function networkFirst(req) {
  try {
    // 优先网络读取最新的资源
    const fresh = await fetch(req);
    return fresh;
  } catch (e) {
    // 去缓存中读取
    const cache = await caches.open(CACHE_NAME);
    const cached = await cache.match(req);
    return cached;
  }
}
 

注意

  • 缓存内容可以在浏览器开发者工具->application->缓存 中查看当前设置缓存

回复

我来回复
  • 暂无回复内容