My serviceworker is failing when offline - how to prevent redirects?

[LarsEjaas]

I am struggling a bit with my serviceworker. It is failing if I go offline and reload my page.

If I go to the networks tab in Google Chrome I can see that the fetch of the serviceworker is failing - even when I reload the page online??

I get "(failed)net::ERR_INTERNET_DISCONNECTED"

If I dig more into the issue I can see that Request URL: https://larsejaas.com/
have Referrer Policy: unsafe-url

In the console I get this error:

Uncaught (in promise) TypeError: Failed to fetch

and this warning:
The FetchEvent for "https://larsejaas.com/" resulted in a network error response: the promise was rejected.

I am a bit unsure why I get this error? Do I need to update the Referrer-Policy on my page or could this be my gatsby-plugin-offline that needs to be configured differently?

[LarsEjaas]

I have now upgraded my page from Gatsby v2 to v3. All dependencies and plugins are on the latest version. I did a few tweaks to remove trailing slashes on all urls in gatsby and set up Netlify to work without trailing slashes also.

I still can't seem to get my serviceworker to work offline - it keeps failing. I have testet this on the latest version of Chrome, Edge and Firefox from a windows pc - all the same!

Anyone care to take a look at my settings to see if anything is obviously wrong?

these are my settings in gatsby-config:

{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Lars Ejaas`,
        short_name: `LarsEjaas.com`,
        start_url: `/`,
        background_color: `#171c1c`,
        theme_color: `#00879d`,
        display: `standalone`,
        orientation: `portrait`,
        include_favicon: false,
        icons: [
          {
            src: `icons/icon-48x48.png`,
            sizes: `48x48`,
            type: `image/png`,
            purpose: `maskable any`
          },
          {
            src: `icons/icon-72x72.png`,
            sizes: `72x72`,
            type: `image/png`,
            purpose: `maskable any`
          },
          {
            src: `icons/icon-96x96.png`,
            sizes: `96x96`,
            type: `image/png`,
            purpose: `maskable any`
          },
          {
            src: `icons/icon-144x144.png`,
            sizes: `144x144`,
            type: `image/png`,
            purpose: `maskable any`
          },
	        {
            src: `icons/icon-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
            purpose: `maskable any`
          },
          {
            src: `icons/icon-256x256.png`,
            sizes: `256x256`,
            type: `image/png`,
            purpose: `maskable any`
          },
          {
            src: `icons/icon-384x384.png`,
            sizes: `384x384`,
            type: `image/png`,
            purpose: `maskable any`
          },
          {
            src: `icons/icon-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
            purpose: `maskable any`
          },
        ],
        cache_busting_mode: 'none'
      },
    },
    {
      resolve: 'gatsby-plugin-offline',
      options: {
         precachePages: [`/*`,`*`,`/en/*`, `/artikler/*`, `/en/artikler/*` ],
         navigateFallbackWhitelist: [/^.*(?!\.\w?$)/],
         workboxConfig: {
            globPatterns: ["**/*.{html,js,json,png,jpg,webmanifest,woff,woff2,ttf,eot,css,mjs,svg,mp3}"]  
         }
      }
   }

My page at https://larsejaas.com is set to work as a fully offline app experience with all files catched. I have implemented a function in gatsby-browser.js using onServiceWorkerUpdateReady that cheks for a new update on every page navigation. If a new update is ready a banner will tell the user to refresh the page. So the serviceworker is intended to keep using the same version until page is reloaded (and not offline).

[LarsEjaas]

Allright: I have actually narrowed down the problem. This is about 302 redirects!

I have set up my page to work without trailing slashes. I do this with gatsby-plugin-remove-trailing-slashes and netlify is setup to NOT prettify URL's.

I have tried building my page with gatsby build now, as this makes it slightly easier to see the redirets (I cannot see the redirets live in the address bar on my page on netlify).

If I go to localhost:9000/grafik (this will be https://larsejaas.com/grafik on my live page) and set the browser ofline I can navigate all pages internally just fine. If I the reload the page it will fail.

IF I add a trailing slash to the URL and hit enter the page loads just fine - and the page then redirects to the same URL without a trailing slash (page still works fine).

If reload localhost:9000/grafik when online it will redirect to localhost:9000/grafik/ and then redirect again to localhost:9000/grafik.

Can Anybody help me prevent this redirect "loop"? I am pretty sure it is the "double" redirect that makes my serviceworker fail.

[LarsEjaas]

I finally got my PWA working as intended offline. This was a lot of trial and error on my side!

These are the settings that worked for me, if anyone else might be interested:

    {
      resolve: "gatsby-plugin-offline",
      options: {
        precachePages: [
          `/index.html`,
          `/en/artikler/*`,
          `/en/artikler/*/*`,
          `/en/`,
          `/artikler/*`,
          `/artikler/*/*`,
          `/webudvikling/*`,
          `/en/webudvikling/*`,
          `/grafik/*`,
          `/en/grafik/*`,
          `/kompetencer/*`,
          `/en/kompetencer/*`,
        ],
        workboxConfig: {
          globPatterns: [
            "**/*{.html,.webp,.webmanifest,.woff,.woff2,.ttf,.eot,.css,.svg,.mp3,icons/icon*,.ico, sw.js}",
          ],
        },
      },
    },

I also got a problem with my serviceworker - it precatched my Netlify form! I solved this by appending a unique random number to the POST url. See this post for code:
#30550