Lighthouse PWA audit returns a "start_url does not respond with a 200 when offline" error - progressive-web-apps

Question

I'm having an issue with Lighthouse's PWA audit. I'm using a Service Worker sw.js that successfully caches both the offline.html fallback (for when the user has no network connection), and the start.html (which is defined as start_url in the manifest.json and is displayed if the user opens the website from the Homescreen icon).
The issue happens when I use Lighthouse to validate the PWA checklist, which throws this (only) error:
start_url does not respond with a 200 when offline
The start_url did respond, but not via a service worker.
I find this odd, because start.html is properly cached upon the service worker install process. My only guess is that the validator is trying to access start.html in offline mode before the service worker can actually cache it to the browser storage.
So, how can I validate that particular issue in Lighthouse's PWA checklist?
Here's my current code:
manifest.json
{
"name": "My Basic Example",
"short_name": "Example",
"icons": [
{
"src": "https://example.com/static/ico/manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
],
"start_url": "https://example.com/start.html",
"scope": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#2196f3",
"theme_color": "#2196f3"
}
core.js
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js', {
scope: '/'
}).then(function(registration) {
}).catch(function(err) {
});
navigator.serviceWorker.ready.then(function(registration) {
});
}
sw.js
//cache container
const CACHE_VERSION = 1;
const CACHE_NAME = 'cache-v' + CACHE_VERSION;
//resources
const URL_OFFLINE = 'offline.html';
const URL_START = 'start.html';
//install
self.addEventListener('install', (event) => {
event.waitUntil(
(async () => {
const cache = await caches.open(CACHE_NAME);
await Promise.all([
cache.add(new Request(URL_OFFLINE, { cache: 'reload' })),
cache.add(new Request(URL_START, { cache: 'reload' }))
]);
})()
);
//force the waiting service worker to become the active service worker
self.skipWaiting();
});
//activate
self.addEventListener('activate', (event) => {
event.waitUntil(
(async () => {
//enable navigation preload if it is supported.
//https://developers.google.com/web/updates/2017/02/navigation-preload
if('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
}
})()
);
//tell the active service worker to take control of the page immediately
self.clients.claim();
});
//fetch
self.addEventListener('fetch', (event) => {
//we only want to call event.respondWith() if this is a navigation request for an HTML page
if(event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
//first, try to use the navigation preload response if it's supported
const preload_response = await event.preload_response;
if(preload_response) {
return preload_response;
}
//always try the network first
const network_response = await fetch(event.request);
return network_response;
} catch (error) {
//catch is only triggered if an exception is thrown, which is likely due to a network error
const cache = await caches.open(CACHE_NAME);
if(event.request.url.includes(URL_START)) {
return await cache.match(URL_START);
}
return await cache.match(URL_OFFLINE);
}
})());
}
});
Any ideas? Thanks!

Answer 1

#PeteLe, I tried your sample and got following failure:
Navigated to https://basic-pwa-so-1.glitch.me/
The service worker navigation preload request failed with network error: net::ERR_INTERNET_DISCONNECTED.
Looks like something was updated in Lighthouse generating the error message