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

Question

I am creating a PWA that works offline with a service worker.

Right now it works correctly, but there is a problem in Lighthouse Audit.

When I run Lighthouse, in the PWA section I get this problem: start_url does not respond with a 200 when offline The start_url did respond, but not via a service worker.

How do I pass that audit, even if there are other audits that say that I have successfully installed a service worker?

My website is here: https://nariohtools.com and the service worker is here: https://nariohtools.com/sw.js

Thanks in advance.

Answer 1

The related code is here:

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

You are opening the cache but you're not using the cached response and the request is forwarded to the network:

Use something like this instead:

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