How to add an offline fallback

[FleetAdmiralJakob]

So, if a page is not cached and you are offline.

[DuCanhGH]

@FleetAdmiralJakob The built-in support will take a while, but here's an alternative:

import withSerwistInit from "@serwist/next";

const withSerwist = withSerwistInit({
  cacheOnFrontEndNav: true,
  swSrc: "app/sw.ts",
  swDest: "public/sw.js",
  additionalPrecacheEntries: ["/fallback-font.ttf"],
});

installSerwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
      handler: "CacheFirst",
      options: {
        cacheName: "google-fonts-webfonts",
        expiration: {
          maxEntries: 4,
          maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
        },
        plugins: [
          {
            async handlerDidError() {
              const fallbackResponse = await caches.match("/fallback-font.ttf", { ignoreSearch: true });
              if (fallbackResponse !== undefined) {
                return fallbackResponse;
              }
              return Response.error();
            },
          },
        ],
      },
    },
    ...defaultCache.filter((entry) => !(entry.options?.cacheName === "google-fonts-webfonts")),
  ],
});

[DuCanhGH]

@FleetAdmiralJakob it has finally been implemented in 8.1.0! Here is how to use it:

// Anything random.
const revision = crypto.randomUUID();

installSerwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache,
  fallbacks: {
    entries: [
      {
        url: "/~offline",
        revision,
        matcher({ request }) {
          return request.destination === "document";
        },
      },
    ],
  },
});

A bit different from the old API, I'd say.

[FleetAdmiralJakob]

Ok. Why is this implementation better than the old API?

[DuCanhGH]

@FleetAdmiralJakob well, one big reason is that you are not tied down to a fixed set of RequestDestination. In fact, you can have as many fallback entries as possible. Another reason is that it is implemented into @serwist/sw rather than @serwist/next, meaning that even if you don't use Next.js, you can still use the feature :) Hope this helps!

[ajayvignesh01]

Can you explain the revision please. Confused on it's purpose and what to set it as.

[DuCanhGH]

@0x-Legend the revision's purpose is to help @serwist/precaching.precacheAndRoute does its job of precaching the fallback URLs without fault. You can set it to anything random. In the example above, it is created using crypto.randomUUID(), which has been implemented in all major browsers as of now:

You can use anything you like though. For example, the package uuid may work as an alternative.