Service Worker 配置 - 网络然后缓存

Posted 2023-03-28

【中文标题】Service Worker 配置 - 网络然后缓存

【英文标题】：Service Worker Config - Network then Cache

【发布时间】：2022-01-09 16:19:04

【问题描述】：

我正在开发一个 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 保存到主页，它始终使用缓存。

【参考方案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);
    
  ());
);

【讨论】：

谢谢杰夫，非常感谢。我是 Service Worker 的新手，所以它会被附加到 sw.js 的底部吗？

该代码将替换您现在拥有的 fetch 处理程序。

谢谢，我在网络平台的问题已经解决了。我现在发现的是，当从我的“添加到主屏幕”PWA 访问时，离线页面似乎没有被缓存。此更改的想法是，PWA 可以刷新其缓存和/或在线时提供最新版本，或者在没有可用网络时故障回复到缓存。