离线时 start_url 没有响应 200： start_url 确实响应了，但不是通过服务工作者。灯塔审计问题答案

【问题标题】：start_url does not respond with a 200 when offline: The start_url did respond, but not via a service worker. Lighthouse Audit problem离线时 start_url 没有响应 200： start_url 确实响应了，但不是通过服务工作者。灯塔审计问题
【发布时间】：2021-03-05 09:14:12
【问题描述】：

我正在创建一个可以与服务人员离线工作的 PWA。

目前它可以正常工作，但 Lighthouse Audit 存在问题。

当我运行 Lighthouse 时，在 PWA 部分我遇到了这个问题：离线时 start_url 没有响应 200start_url 确实响应了，但不是通过服务工作者。

即使有其他审核表明我已经成功安装了 Service Worker，我如何通过该审核？

我的网站在这里：https://nariohtools.com，服务人员在这里：https://nariohtools.com/sw.js

提前致谢。

【问题讨论】：

标签： javascript html progressive-web-apps service-worker lighthouse

【解决方案1】：

以防万一您遇到此问题，Lighthouse 中的一个错误已在 Chrome 版本 89 中得到修复。 https://github.com/antfu/vite-plugin-pwa/issues/20#issuecomment-773019940

【讨论】：

感谢您的更新！我会测试它，看看它现在是否有效。

【解决方案2】：

相关代码在这里：

caches.open(CACHE_NAME).then((cache) => {
  return fetch(evt.request)

你正在打开缓存，但你没有使用缓存的响应，请求被转发到网络：

改用这样的东西：

caches.open(CACHE_NAME).then(cache => {
  return cache.match(evt.request).then(cacheResponse => cacheResponse || fetch(evt.request).then(networkResponse => {
  cache.put(evt.request, networkResponse.clone());
  return networkResponse;
}));

【讨论】：

好的，现在我已经通过了灯塔审核。谢谢。但是，当我离线时，它可以正常工作，但是如果我刷新页面，它就不起作用了。有什么解决办法吗？
审核通过，网站安装在缓存中。我离线进入网站并收费，但如果我点击刷新 Chrome 无法打开文件。
您应该保留之前代码中的 cache.put 逻辑
我正在尝试这样做，但它无法正常工作，我什至不知道我是否正确执行。我做错了什么？
另外，当你尝试一个新的服务工作者时，不要忘记取消注册以前的服务工作者