start_url 离线时不响应 200：start_url 确实响应，但不是通过 service worker。灯塔审计问题

Question

我正在创建一个与 service worker 离线工作的 PWA。

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

当我运行 Lighthouse 时，在 PWA 部分我遇到了这个问题： start_url 离线时不响应 200 start_url 确实响应，但不是通过 service worker。

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

我的网站在这里：https://nariohtools.com and the service worker is here: https://nariohtools.com/sw.js

提前致谢。

Answer 1

相关代码在这里：

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;
}));

Answer 2

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

start_url 离线时不响应 200：start_url 确实响应，但不是通过 service worker。灯塔审计问题

start_url does not respond with a 200 when offline: The start_url did respond, but not via a service worker. Lighthouse Audit problem

html

javascript

lighthouse

service-worker

progressive-web-apps