When a stopped worker handles a navigation, the network request waits for the worker to boot. Navigation preload starts the request in parallel and hands it over as event.preloadResponse, with a Service-Worker-Navigation-Preload header the server can detect. It works in Chrome 59 1 +, Firefox 99 555 + and Safari 15.4 10 +.
self.addEventListener('activate', (e) => {
e.waitUntil(self.registration.navigationPreload?.enable());
});
self.addEventListener('fetch', (e) => {
if (e.request.mode !== 'navigate') return;
e.respondWith((async () => (await e.preloadResponse) ?? fetch(e.request))());
});reg.navigationPreload.getState() then reported {"enabled":true,"headerValue":"true"}. Skip it if navigations are served from the cache.