serviceWorker cache(个人)

流程

1：在service worker 的‘install’生命周期函数中开启一片内存，并缓存
2：在service worker 的‘activate’生命周期函数中删除无用的缓存
3：在service worker 的‘fetch’生命周期函数中优先请求网络数据，网络断开则请求缓存数据

常用api

caches.open（） 开辟一片内存 并命名 返回内存的“控制器”

const CACHE_NAME = "cache2";
// 开辟一片内存 并命名 返回内存的“控制器”
const cache = await caches.open(CACHE_NAME);

cache.add(url)
方法接受一个URL作为参数，请求参数指定的URL，并将返回的 response对象添加到给定的cache 中

await cache.add("/index.js")

cache.addAll()
方法接受一个URL数组,并将生成的response对象添加到给定的缓存中,request对象成为存储的response操作的key

await cache.addAll([
    "/", // 缓存index.html文件要用 “/” 代替， 因为index.html的url为“/”，而不是“index.html”
    "/work.js",
    "/image/2.png",
    "/image/1.png"
  ])

await caches.keys()(caches全局对象的方法)
返回当前所有的已开辟的内存名称数组 如 “[cache1,cache2]”

const keys = await caches.keys();

await cache.match(req)
根据req获取内存中的response

const response = await cache.match(req);

综合示例

const CACHE_NAME = "cache2";
// 代码加载完执行
self.addEventListener("install", async event => {
  // 打开一个Cache 对象
  const cache = await caches.open(CACHE_NAME);
  await cache.addAll([
    "/",
    "/work.js",
    "/image/2.png",
    "/image/1.png"
  ])
  // skipWaiting 停止当前的service work 运行最新的serviceworker
  // waitUntil skipWaiting返回的是promise 等primise执行完后 在进行下一个生命周期函数
  await self.skipWaiting();
})
// 代码执行前触发
self.addEventListener("activate", async event => {
  //删除无用缓存
  const keys = await caches.keys();
  keys.forEach(item => {
    if (item !== CACHE_NAME) {
      caches.delete(item);
    }
  })

  // 获取控制权
  await self.clients.claim();
})
// 有网络请求时触发
self.addEventListener("fetch", event => {
  let request = event.request;
  event.respondWith(netFirst(request));
})

// 网络数据优先  断网就从缓存中获取
async function netFirst(req) {
  try {
    const response = await fetch(req);
    return response
  } catch {
    const cache = await caches.open(CACHE_NAME);
    const response = await cache.match(req);
    return response;
  }
}