Handling navigationPreload

[HugeLetters]

I get an error in the browser saying my preload was cancelled because I didn't wait for it to settle.

Do I understand correctly that I'm supposed to provide a matcher for those myself if I wanna avoid that error?
Looking at source code it seems like it gets preloadResponse gets discarded if there' no matched handler found.

[HugeLetters]

As far as I understand it would be sufficient for me to just provide a default handler like that, right?

serwist.setDefaultHandler(({ event, request }) => {
  if (event instanceof FetchEvent) {
    return event.preloadResponse.then((preload) => {
      if (preload instanceof Response) {
        return preload;
      }

      return fetch(request);
    });
  }

  return fetch(request);
}, "GET");

but perhaps a specific handler would be better to avoid that overhead for all non-navigation requests

[DuCanhGH]

@HugeLetters yes, you may want to register a NavigationRoute rather than use setDefaultHandler in this case.

Looking at source code it seems like it gets preloadResponse gets discarded if there' no matched handler found.

You're right. If Serwist can't find a handler, the request would be treated as if there weren't a service worker intercepting it.

Edit: The Serwist class also provides the precacheOptions.navigateFallback option, so you don't have to use the lower level NavigationRoute class. Unless you don't use an app shell, or that shell is not precached, that is.

[HugeLetters]

@DuCanhGH oh, I'm actually doing a Nextjs Pages dir app - want it to semi-work offline, trying to get initial navigation to work atm.
Would navigateFallback be a good approach here?

I've seen you mention in other issue that precaching every HTML page would be a pain in Next - so what I was planning on doing is to precache just one HTML page and redirect to it when trying to open the app while offline. And afterwards client-side navigation would take over which should work since all js assets are cached.

[DuCanhGH]

@HugeLetters in your case, navigateFallback doesn't work that well, for they are meant for single-page apps. You may want to use fallbacks instead:

const serwist = new Serwist({
  fallbacks: {
    entries: [
      {
        url: "/~offline",
        matcher({ request }) {
          return request.mode === "navigate";
        },
      },
    ],
  },
});

And afterwards client-side navigation would take over which should work since all js assets are cached.

Can't be so sure about this, but you may want to give it a try!

[HugeLetters]

For posterity here's what I did essentially

import type { RuntimeCaching } from "serwist";
import { CacheFirst, ExpirationPlugin, Strategy } from "serwist";

declare const self: ServiceWorkerGlobalScope;
const OFFLINE_PATHNAME = "/~offline";

export class NavigationCache implements RuntimeCaching {
  matcher: RuntimeCaching["matcher"] = ({ request }) => request.mode === "navigate";
  handler = new NavigationStrategy({
    cacheName: "navigation",
    matchOptions: { ignoreSearch: true },
  });
}

class NavigationStrategy extends Strategy {
  protected _handle: Strategy["_handle"] = (request, handler) => {
    const { url } = handler;
    const resource = handler.fetch(request);
    if (!url) return resource;

    if (url.pathname === OFFLINE_PATHNAME) {
      return resource
        .then((res) => {
          handler.waitUntil(handler.cachePut(OFFLINE_PATHNAME, res.clone())).catch(console.error);
          return res;
        })
        .catch(() => handler.cacheMatch(OFFLINE_PATHNAME));
    }

    return resource.catch(() => {
      const redirectUrl = new URL(OFFLINE_PATHNAME, url);
      redirectUrl.searchParams.set("redirect", url.toString());
      return Response.redirect(redirectUrl);
    });
  };
}

const precacheStrategy = new CacheFirst({
  cacheName: "navigation",
  matchOptions: { ignoreSearch: true },
  plugins: [
    new ExpirationPlugin({
      maxAgeSeconds: 60 * 60 * 24 * 14, // 14 days
    }),
  ],
});
self.addEventListener("activate", (event) => {
  const url = new URL(OFFLINE_PATHNAME, location.origin);
  const request = new Request(url);
  event.waitUntil(Promise.all(precacheStrategy.handleAll({ event, request, url })));
});

Your /~offline?redirect=REDIRECT_URL page is supposed to just redirect to the url from search param.