The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.

[martynassimkevicius]

Background
I am trying to use a navigationPreload and a cache data by StaleWhileRevalidate strategy for a navigation request.

Problem
I am getting an error message:

The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.

and cache is not updated

Finding
I think for this case this.waitUntil is missing to wait for a response

const response = await this.waitUntil(this.fetch(input));

workbox/packages/workbox-strategies/src/StrategyHandler.ts

Line 240 in 0b5d9d8

const response = await this.fetch(input);

Question
I am doing something wrong in my code or this finding is a needed fix?

navigationPreload.enable();
self.addEventListener('install', () => {
    self.skipWaiting();
});
clientsClaim();

const routes = [
    new RegExp(`/route1`),
    new RegExp(`/route2`)
];

registerRoute(new NavigationRoute(new NetworkOnly(), {
    denylist: routes,
}));

registerRoute(new NavigationRoute(new StaleWhileRevalidate({
    cacheName: NAVIGATION_CACHE_NAME,
}), {
    allowlist: routes,
}));

Thank you so much for creating this great library.

[jeffposnick]

Hello!

From reading your code, my guess is that you're seeing this with the second navigation route, the one using the StaleWhileRevalidate handler. Is that correct?

I believe that the you're seeing is logged by Chrome whenever event.respondWith() is called before the navigation preload promise settles, as this typically represents an error in your service worker's logic. In the case of using a StaleWhileRevalidate handler, it's not actually a logic error, though—the stale response is passed to event.respondWith() right away, and the preload response does end up being used afterwards to refresh the cache.

Adding a waitUntil() around that fetch() call in the StrategyHandler shouldn't be necessary, as the StrategyHandler has its own mechanism of coordinating all the promises that need to complete, and it orchestrates that via

workbox/packages/workbox-strategies/src/StrategyHandler.ts

Line 134 in 1ec2689

this.event.waitUntil(this._handlerDeferred.promise);

So basically, unless you're actually seeing unexpected behavior, I think the explanation for the logged message is that it's effectively a false positive, motivated by Chrome attempting to log something helpful. We can revisit this if that assessment seems incorrect.

[martynassimkevicius]

I am getting canceled request for new cache and not updated cache on second navigation (best visible on refresh)

[jeffposnick]

CC: @Snugug who might be running into something similar.

[jeffposnick]

Okay, sorry for initially assuming that this was just logging noise. I was able to reproduce failures to update the cache during the revalidate step of StaleWhileRevalidate, when that strategy is being used for navigation requests, and navigation preload is enabled.

The fix is adding in a waitUntil() around the entire promise that performs the revalidation. It should make it into the next release of Workbox.

[martynassimkevicius]

@jeffposnick Thanks a lot 🙂

[jeffposnick]

This fix is now in the https://github.com/GoogleChrome/workbox/releases/tag/v6.5.0 release.