Cache all pages

[carloschneider]

Hello! I'm trying to migrate a small and simple PWA offline application from Vite + VitePWA to NextJS + Serwist. I only have 6 pages and all pages should open offline.

With Vite I have added all assets and pages to the cache this way:

VitePWA({
  strategies: 'generateSW',
  manifest: false,
  registerType: 'autoUpdate',
  injectRegister: false,
  workbox: {
    globDirectory: 'dist',
    globPatterns: ['**/*'],
  },
}),

After build the application and open the first page all assets and pages are cached. So when I take my browser offline, the current page and others continue to work normally.

I'm trying to do the same thing with Serwist, but I'm struggling.

My code:

sw.ts

const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: [
    {
      matcher: /.*/i,
      handler: new NetworkFirst(),
    }
  ],
  // I don't know if `fallbacks` is really necessary in this case
  fallbacks: {
    entries: [
      {
        url: "/first/internal",
        matcher({ request }) {
          return request.destination === "document";
        },
      },
      {
        url: "/second/internal",
        matcher({ request }) {
          return request.destination === "document";
        },
      },
    ],
  },
});

next.config.mjs

import crypto from 'crypto'
import withSerwistInit from "@serwist/next";

const revision = crypto.randomUUID();

const withSerwist = withSerwistInit({
  swSrc: "src/app/sw.ts",
  swDest: "public/sw.js",
  cacheOnNavigation: true,
  additionalPrecacheEntries: [
    { url: "/first/internal", revision },
    { url: "/second/internal", revision }
  ],
});

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

export default withSerwist(nextConfig);

What am I doing wrong? Thanks!

[DuCanhGH]

@carloschneider

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

After build the application and open the first page all assets and pages are cached. So when I take my browser offline, the current page and others continue to work normally.

This is because when you use Vite, they output a HTML file that is used as an app shell. Well, the default Vite, anyway. Not so much about frameworks that use Vite though.

VitePWA could precache this HTML file and your JS assets, allowing your SPA app to work perfectly offline.

This is not the same for @serwist/next. Right now, it can't detect your pages, meaning that you have to provide it the pages that you want it to precache yourself. I hope to change this in v10 though.