Navigation Preload Prioritization in Chrome

Answer to the Core Question

Chrome chooses the Service Worker’s Response whenever the fetch event returns a concrete Response object. If the event handler returns undefined, null, or does not return a Response at all, Chrome falls back to the preloaded response that was fetched in parallel.

Why the Preloaded Response Is Overridden

• The navigation preload is a background fetch started by Chrome before the Service Worker is ready.
• When the Service Worker finally receives the fetch event, it can either supply its own Response or let the preload win.
• The presence of caching headers (e.g., Cache‑Control, ETag) on either response does not influence this choice; the decision is purely based on whether a Response was returned.

Effect of Conditional Requests

• If the preloaded fetch returns a 304 Not Modified and the Service Worker returns no Response, Chrome serves the 304.
• If the Service Worker returns a fresh body (any status code, typically 200), that body is used, regardless of the 304 from the preload.
• Thus a 304 from the preload is only honored when the Service Worker does not override it.

Practical Verification Steps (Chrome 63 +)

1. Register a Service Worker and enable navigation preload in its activate event:

   self.addEventListener('activate', event => {
     event.waitUntil(self.registration.navigationPreload.enable());
   });
   

2. In the fetch handler, sometimes return a custom Response and sometimes return undefined:

   self.addEventListener('fetch', event => {
     if (Math.random() < 0.5) {
       event.respondWith(new Response('SW', {status: 200}));
     } else {
       // Let the preload win
     }
   });
   

3. Navigate to the page and inspect the Network panel. When the handler returns a Response, you will see the body “SW”; otherwise you will see the body fetched by the preloaded request.
4. Add Cache‑Control or ETag headers to both the preload and Service Worker responses and observe that the same rule applies.
5. To test conditional logic, dispatch an If‑None‑Match header from the Service Worker or from the preload and confirm that the 304 is used only when no Service Worker Response is supplied.

Missing Diagnostic Detail

Do you observe the Service Worker ever returning a non‑200 status code (e.g., 404 or 500) in the fetch handler? This can affect how the final navigation is rendered, but it does not change the rule that a Response object overrides the preload.