Next PWA with serwist : no offline pages

[brittle star]

Hi, I'm trying to make my PWA / SPA application offline friendly, but I have a problem.
I use serwist/next, configuration is from the documentation, and my base URL is simply the root https://test.com/, Next.js 14.1.4.

The sw looks like :

// Check this : https://serwist.pages.dev/docs/next/getting-started

import { defaultCache } from "@serwist/next/worker";
import { Serwist } from "serwist";

const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache
});

serwist.addEventListeners();

I can install the application on devices, it works online without problems. If I poweroff the Wifi connection, my app still working UNLESS I close the app (or make F5 in the browser) : no-network error makes the app down...
I miss something in the configuration ?
Thanks for your tips

[sacred crypt]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[feral hamlet]

You need to provide a fallback page for offline mode. I did this:

import { defaultCache } from "@serwist/next/worker";
import type { PrecacheEntry, SerwistGlobalConfig } from "serwist";
import { 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,
  fallbacks: {
    entries: [
      {
        url: "/",
        matcher({ request }) {
          return request.destination === "document";
        },
      },
    ],
  },
});

serwist.addEventListeners();

to make my / page accessible even when offline. Now as for more complicated set ups such as how to make the entire app offline friendly, I’m afraid I don’t have an answer for you because I never had to do that before.

[brittle star]

Thanks, if I close and reload the installed app, I have a network issue again. Seems the device try to reach Internet each time the app starts

[feral hamlet]

The role of the fallback is to have something to, well, fallback to when the device cannot reach the upstream app. The device will always try to get the upstream app whenever you open it.

[brittle star]

Ok, but I'm stuck on the error page.

I will try to fix a CacheOnly policy for the home page