[Docs][Bug]: using offline pages

[amrdraz]

Provide environment information

"@serwist/next": "^8.4.4",
"@serwist/precaching": "^8.4.4",
"@serwist/sw": "^8.4.4",

this is my sw.js

installSerwist({
  cleanupOutdatedCaches: true, 
  precacheEntries: [{url: '/offline', revision: "1"}, ...self?.__SW_MANIFEST??[]],
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  disableDevLogs: true,
  runtimeCaching: defaultCache,
  navigateFallback: "/offline",
});

Describe the problem

I wanted to add an offline page in all cases the navigation fallback requires things be preloaded

debuging I noticed that __SW_MANIFEST is undefined during development
so I manually added an entry for the offline page

this worked
except that both in development and during build
if I navigate to the a page using the browser url
I always get the offline page rendered

If I navigate using the navbar available to another page they work

I don't know how to setup offline

Expected behavior

I'm expecting that if I add a navigation fallback that it gets pre-cached in general on it's own
and I'm expecting it to show only when I'm offline

Screenshots (if relevant)

this is working correct I am indeed offline

If I'm online and navigate internally I can see the pages

But if I refresh the request to page is intercepted and offline is rendered, you can see that only that one request fails

Additional information (if relevant)

No response

[DuCanhGH]

Sorry for the late reply. I'm currently focused on Serwist 9.0.0, so things can escape my attention at times.

Before I go into the details, I just want to say that you've got to brush up on that English 💀

Quoting jeffposnick here:

First, to clarify, navigateFallback isn't an option that's intended for "users if they happen to lose their network connection." The route that it sets up will use a cached response whenever there's any navigation request for any URL that isn't explicitly precached. It's meant for SPA-style routing, like you say, but I just to make sure you were aware that it's not really an offline-specific thing.

navigateFallback is for requests whose mode is set to navigate. That's why next/link links didn't trigger it :) It is also not meant for when users lose their network connection as you intended, as mentioned in the quote.

To implement a fallback page with Serwist, do this instead:

// 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 }) {
          // Or whatever else you want to check for in a request.
          return request.destination === "document";
        },
      },
    ],
  },
});

debuging I noticed that __SW_MANIFEST is undefined during development
so I manually added an entry for the offline page
this worked
except that both in development and during build
if I navigate to the a page using the browser url
I always get the offline page rendered
If I navigate using the navbar available to another page they work
I don't know how to setup offline

Now this brought to my attention something else related. Turns out our handlePrecaching function was implemented incorrectly, in that even when precacheEntries was undefined or an empty array, the navigateFallback code was still erroneously executed. Thanks for pointing that out!

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[mdevils]

@DuCanhGH thank you for your explanation. I probably don't understand something

Here is my config:

import {defaultCache} from '@serwist/next/browser';
import {installSerwist} from '@serwist/sw';
import type {PrecacheEntry} from '@serwist/precaching';

declare const self: ServiceWorkerGlobalScope & {
    // Change this attribute's name to your `injectionPoint`.
    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
};

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

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

I open my website, it loads stuff and generates a lot of messages in the console with cache hits/misses etc. Then I go to Web Developer tools, put Network to Offline and type some random path, i.e. http://localhost:3000/non-existing-path. What happens is that it loads the main page (instead of /offline.html). When I type again, it just shows the browser network error page. What am I doing wrong?

[DuCanhGH]

@mdevils can you verify if "/offline.html" was properly cached? Thanks!

Also, you may want to check if matcher did match the request that was made to the non-existent resource. I included request.destination === "document" as an example, but I'm not sure if a browser would know that said request, the URL of which most likely didn't end with ".html", was for a document.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.