Service Worker 配置 - 网络然后缓存

Question

我正在开发一个 HTML5 PWA，并希望有一个“先网络，然后缓存”布局，这样当用户访问 PWA 时，它会拉下最新版本，但如果他们处于离线状态，它会使用缓存。

请问我需要如何修改下面的代码？

const assets = [
  "/",
  "/index.html",
  "/about.html",
  "/assets/css/main.css",
  "/images/logo.png",
  "/images/logo.svg",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticCacheName).then(cache => {
      cache.addAll(assets)
    })
  )
})

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request)
    })
  )
})

缓存已创建，但一旦 PWA 保存到主页，它始终使用缓存。

Answer 1

您正在从Offline Cookbook 寻找"network, then cache" pattern：

self.addEventListener('fetch', (event) => {
  event.respondWith(async function() {
    try {
      return await fetch(event.request);
    } catch (err) {
      return caches.match(event.request);
    }
  }());
});