PreCache config with nextJS when go offline broken and throw err_fail

[benyaminl]

Hello, I really curious on the precaching capability and tried serwist, but after several tries, I nearly give up at this point.

The serwist seems have two different strategies to handle runtime and precache, but while connection offline, it kept asking and checking the runtime cache while it has nothing in it while I debugging.

My question is, does ootb there are option to set check to precached file first then the runtime cache?

Thank you

[DuCanhGH]

@benyaminl

I... don't even understand the question that well. Time to brush up on your English man.

but while connection offline, it kept asking and checking the runtime cache while it has nothing in it while I debugging.

I don't see how it would get to this point if PrecacheRoute matched the request. Serwist would stop matching said request against any subsequent route, you see.

My question is, does ootb there are option to set check to precached file first then the runtime cache?

When PrecacheRoute is matched against a request, it will check if there's a precached response for this request. If there is, this route is determined to have matched the request, meaning that Serwist will stop matching routes against said request. Otherwise, Serwist will check subsequent routes, which, out of the box, are your runtime caching ones. This means that the behaviour you described is... supported, indeed. Not that there's any other behaviour to see here, since PrecacheRoute is always registered before any of your routes when you use the Serwist class.

[benyaminl]

Hello, I’m really sorry that my question confused you, and I apologize for the bad grammar.

So basically, when the service worker is installed for the first time, everything will be downloaded and cached in the cache storage, right (based on my observation)? And when it’s ready, it should work to access any path when we are offline, correct? I mean, it should reply with the cache. The problem is it throws an error in the sw.js, and it’s hard to debug (probably due to my lack of understanding regarding how to debug a service worker).

Based on my understanding of your statement, that means the top route handler should be PreCacheRoute, right?

But when I observe the behavior of the default config of serwist, when installed and attached for the first time based on the documentation, it always goes to runtime routing first and never hits PreCacheRoute, even if the page is already cached using the pre-cache process. I’m sure about this because the last time I tried, I went offline directly using emulation in Chrome/Chromium DevTools, and it threw an error in the service worker.

The offline mode only works if I manually go to each page of the application one by one, and after visiting the home or “/” page, then emulate offline mode. I rechecked that the pages in “serwist-precache-v2” were never touched, or the service worker/PreCacheRoute seems to think the file isn’t there (even though it’s downloaded).

So my question is, how do I fix this? I assumed that following the documentation would directly allow the code to work offline after we register all the pages on additionalPrecacheEntries.

Thank you.

EDIT:

This is the sample of the errors


Sample of error even page already cached, throw ERR_FAILED

This is teh evidence the page already cached

next.config.mjs

import withSerwistInit from '@serwist/next'

// /** @type {import('next').NextConfig} */
// const nextConfig = {};

const withSerwist = withSerwistInit({
  // Note: This is only an example. If you use Pages Router,
  // use something else that works, such as "service-worker/index.ts".
  swSrc: 'src/app/sw.ts',
  swDest: 'public/sw.js',
  reloadOnOnline: true,
  additionalPrecacheEntries: [{ url: "/map", revision: null }, {url: "/anotherpath", revision: null}, {url: "/~offline", revision: null}]
})

export default withSerwist({})

sw.ts

import { defaultCache } from '@serwist/next/worker'
import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist'
import { CacheFirst, Serwist } from 'serwist'

// This declares the value of `injectionPoint` to TypeScript.
// `injectionPoint` is the string that will be replaced by the
// actual precache manifest. By default, this string is set to
// `"self.__SW_MANIFEST"`.
declare global {
  interface WorkerGlobalScope extends SerwistGlobalConfig {
    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined
  }
}

declare const self: ServiceWorkerGlobalScope

const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache, // using custom request handler also resulting always go to this first rather than preCache
  fallbacks: {
    entries: [
      {
        url: "/~offline",
        matcher({ request }) {
          return request.destination === "document";
        },
      },
    ],
  },
})

serwist.addEventListeners()

[DuCanhGH]

@benyaminl

Sorry for not replying. I was on a break, so I didn't feel much like replying to questions :(

This was actually a bug caused by navigation preloading being enabled. When you are offline, await event.preloadResponse rejects, causing the matched strategy to fail to return a response, despite there being a (pre)cached one.

In the next patch, we will catch such errors.

[benyaminl]

@DuCanhGH No problem no problem, I'm sorry that I bother your holiday.

I seen a workaround that I should use next <Link/> component for now. But thank you for responding for this.

Thank you