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

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

Just in case you struggle with this, there is a bug in Lighthouse that has been fixed in Chrome version 89. https://github.com/antfu/vite-plugin-pwa/issues/20#issuecomment-773019940

Answer 2

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