Gatsby-plugin-offline 3.10.0 needs 3 page reloads to make site available offline

[quansenB]

Description

I'm trying to make my site avaibale offline via service worker through gatsby-plugin-offline 3.10.0 (latest as of today).
It appears however that the site needs 3 refreshes before it can be loaded offline by the service worker.

I've tested the behavior on chrome, firefox, safari, opera and brave and all behave pretty much the same except for chrome desktop, where it appears to work on the first load sometimes.

Steps to reproduce

You can see the bahaviour when visiting inaki-breinbauer.de

1. Open site.
2. Reload in flight mode -> Error: FetchEvent.respondWith recieved an error: TypeError: No internet connection (WebkitServiceWorker:0) [This is the Safari version of the message]
3. Refresh with connection
4. Refresh in flight mode -> blank page (except in Firefox another error is shown)
5. Refresh with connection
6. Refresh in flight mode -> Loads site as expected

I'm using the default configuration of gatsby-plugin-offline and netlify for hosting.

Here's my gastby-config:

const siteMetadata = {
  title: "Salespage Ladezeitoptimierung",
  description: ´Nerven dich langsame Websites? Deine Zielgruppe auch. Ganz
    direkt: Wenn du dich nicht um die Ladezeit deiner Sales Page
    kümmerst, verlierst du Kunden. Ich helfe dir, deine Seite
    blitzschnell zu machen, damit du deinen Traffic optimal
    ausnutzt.`,
  author: "Iñaki Breinbauer",
  siteUrl: "https://inaki-breinbauer.de",
}

const {
  NODE_ENV,
  URL: NETLIFY_SITE_URL = "https://www.example.com",
  DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL,
  CONTEXT: NETLIFY_ENV = NODE_ENV,
} = process.env

module.exports = {
  siteMetadata: { ...siteMetadata },
  plugins: [
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-preload-fonts",
    "gatsby-plugin-preact",
    "gatsby-plugin-svgr",
    {
      resolve: "gatsby-plugin-preconnect",
      options: {
        domains: [
          "https://assets.calendly.com",
          "https://calendly.com",
          "https://www.googletagmanager.com",
        ],
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images`,
      },
    },
    "gatsby-plugin-image",
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "inaki breinbauer pagespeed optimierung",
        short_name: "inaki b",
        start_url: "/",
        background_color: "#663399",
        theme_color: "#663399",
        display: "minimal-ui",
        icon: "src/images/stopwatch.svg", // This path is relative to the root of the site.
      },
    },
    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        // Exclude specific pages or groups of pages using glob parameters
        // See: https://github.com/isaacs/minimatch
        exclude: [],
      },
    },
    {
      resolve: "gatsby-plugin-robots-txt",
      options: {
        resolveEnv: () => NETLIFY_ENV,
        env: {
          production: {
            policy: [{ userAgent: "*" }],
          },
          "branch-deploy": {
            policy: [{ userAgent: "*", disallow: ["/"] }],
            sitemap: null,
            host: null,
          },
          "deploy-preview": {
            policy: [{ userAgent: "*", disallow: ["/"] }],
            sitemap: null,
            host: null,
          },
        },
      },
    },
    
    {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        id: "GTM-MTXJVHG",
        includeInDevelopment: true,
        // Defaults to gatsby-route-change
        routeChangeEventName: "page_change",
      },
    },
    "gatsby-plugin-postcss",
    {
      resolve: "gatsby-plugin-netlify",
      options: {
        headers: {
          "/termin/": [
            "Link: <https://assets.calendly.com/assets/external/widget.css>; rel=preload; as=stylesheet",
            "Link: <https://calendly.com/inaki-breinbauer/potentialgesprach-mit-inaki-buchen>; rel=preload; as=document",
          ],
        }, // option to add more headers. "Link" headers are transformed by the below criteria
        allPageHeaders: [], // option to add headers for all pages. "Link" headers are transformed by the below criteria
        mergeSecurityHeaders: true, // boolean to turn off the default security headers
        mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers
        mergeCachingHeaders: true, // boolean to turn off the default caching headers
        transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
        generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
      },
    }, //keep second last in array
    "gatsby-plugin-offline", //keep last in array
  ],
}

Expected result

Site should be available for offline loading after 1. load.

Actual result

First offline load throws error. Second shows blank page. Only works after site has been loaded with connection 3 times.

Environment

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-2640M CPU @ 2.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    npm: 6.14.10 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.146
    Firefox: 84.0.2
    Safari: 14.0.2
  npmPackages:
    gatsby: ^2.31.1 => 2.31.1
    gatsby-image: ^2.10.0 => 2.10.0
    gatsby-plugin-google-tagmanager: ^2.10.0 => 2.10.0
    gatsby-plugin-image: ^0.6.2 => 0.6.2
    gatsby-plugin-manifest: ^2.11.0 => 2.11.0
    gatsby-plugin-netlify: ^2.10.0 => 2.10.0
    gatsby-plugin-offline: ^3.10.0 => 3.10.0
    gatsby-plugin-postcss: ^3.6.0 => 3.6.0
    gatsby-plugin-preact: ^4.6.0 => 4.6.0
    gatsby-plugin-preconnect: ^1.1.54 => 1.1.54
    gatsby-plugin-preload-fonts: ^1.8.0 => 1.8.0
    gatsby-plugin-react-helmet: ^3.9.0 => 3.9.0
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
    gatsby-plugin-sharp: ^2.13.2 => 2.13.2
    gatsby-plugin-sitemap: ^2.11.0 => 2.11.0
    gatsby-plugin-svgr: ^2.1.0 => 2.1.0
    gatsby-source-filesystem: ^2.10.0 => 2.10.0
    gatsby-transformer-sharp: ^2.11.0 => 2.11.0
  npmGlobalPackages:
    gatsby: 2.29.1

[LekoArts]

Hi, thanks for the issue!

I can't reproduce with your description:

2021_02_08_5c114d27.mp4

The errors it prints are somewhat expected, the main site works though. It can't load the images yet as avif isn't added here for saving:

gatsby/packages/gatsby-plugin-offline/src/gatsby-node.js

Line 149 in aeea499

urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,

But this is something you can add manually. The other sites are only preloaded once you visit them / they come into the view / you hover over them (not sure atm).

Have you removed the old service workers in between tries? Maybe you're on an old version.

[quansenB]

Not Sure why but this rarely is a problem in chrome.

Here's what it looks like in mobile edge.
I even reinstalled it for testing purposes to get rid of any caching stuff.

IMG_3287.MP4

I guess there's some conflict with another plugin(?).

I also added avif like you suggested, thanks for the hint, still no luck.

{ resolve: gatsby-plugin-offline`,

  options: {

    workboxConfig: {

      runtimeCaching: [

        {
          // Use cacheFirst since these don't need to be revalidated (same RegExp
          // and same reason as above)
          urlPattern: /(\.js$|\.css$|static\/)/,
          handler: `CacheFirst`,
        },

        {
          // page-data.json files, static query results and app-data.json
          // are not content hashed
          urlPattern: /^https?:.*\/page-data\/.*\.json/,
          handler: `StaleWhileRevalidate`,
        },

        {
          // Add runtime caching of various other page resources
          urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|avif|svg|gif|tiff|js|woff|woff2|json|css)$/,
          handler: `StaleWhileRevalidate`,
        },

        {
          // Google Fonts CSS (doesn't end in .css so we need to specify it)
          urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
          handler: `StaleWhileRevalidate`,
        },

      ],

    },

  },

}, //keep last in array`

[LekoArts]

Hi!

I guess at this point we'll need a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

[LekoArts]

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!