Next.js Discord

Discord Forum

Next PWA with serwist : no offline pages

Unanswered
Bouvier des Ardennes posted this in #help-forum
Open in Discord
Avatar
Bouvier des ArdennesOP
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

6 Replies

Avatar
joulev
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.
Avatar
Bouvier des ArdennesOP
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
Avatar
joulev
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.
Avatar
Bouvier des ArdennesOP
Ok, but I'm stuck on the error page.
I will try to fix a CacheOnly policy for the home page
Or switch to pure React to copy all the folder app in the device during installation 😅