gatsby-plugin-offline Service Worker installation fails with Redundant error

[TannerJuby1]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

The gatsby-plugin-offline module does not produce a valid service worker. When the service worker created from this plugin attempts to install, I get an error saying that

The installing service worker became redundant

My gatsby-config.js is set up as such:

    {
      resolve: 'gatsby-plugin-offline',
    },

so it's not even working out of the box....

Reproduction Link

https://githubbox.com/gatsbyjs/gatsby-starter-minimal

Steps to Reproduce

1. Add gatsby-plugin-offline module
2. Set up gatsby-config to use the gatsby-plugin-offline plugin
3. Deploy to https server and visit site.4.
4. view redundant error in the inspector logs ...

Expected Result

Service worker should install correctly

Actual Result

service worker won't install

Environment

System:
    OS: macOS 12.5
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.12.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 103.0.1
    Safari: 15.6
  npmPackages:
    gatsby: ^4.13.1 => 4.20.0
    gatsby-plugin-apollo: ^4.0.2 => 4.0.2
    gatsby-plugin-env-variables: ^2.2.0 => 2.2.0
    gatsby-plugin-gatsby-cloud: ^4.1.0 => 4.20.0
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-image: ^2.2.0 => 2.20.0
    gatsby-plugin-manifest: ^4.1.0 => 4.20.0
    gatsby-plugin-offline: ^5.1.0 => 5.20.0
    gatsby-plugin-page-creator: ^4.6.0 => 4.20.0
    gatsby-plugin-prismic-previews: ^5.2.1 => 5.2.8
    gatsby-plugin-react-helmet: ^5.1.0 => 5.20.0
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0
    gatsby-plugin-root-import: ^2.0.8 => 2.0.8
    gatsby-plugin-sass: ^5.1.0 => 5.20.0
    gatsby-plugin-sharp: ^4.1.0 => 4.20.0
    gatsby-plugin-typescript: ^4.14.0 => 4.20.0
    gatsby-source-filesystem: ^4.1.0 => 4.20.0
    gatsby-source-prismic: ^5.2.2 => 5.2.9
    gatsby-transformer-sharp: ^4.1.0 => 4.20.0

Config Flags

No response

[tyhopp]

Hi @TannerJuby1, I wasn't able to reproduce the error message you see with the minimal starter + offline plugin. Can you provide your own minimal reproduction (public repo and deployed) where you can see the error message?

Repo - https://github.com/tyhopp/gatsby-offline-plugin-repro Deployed - https://gatsbyofflinepluginrepro.gatsbyjs.io/

[TannerJuby1]

I was able to get it to install after removing precache configurations and waiting a day. However, when I attempt to precache pages, I still get the redundant error. It appears that the precache is attempting to cache a template file even though it's not a registered route...

PrecacheController.mjs:194 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://<my-website>/page-data/fundraiserTemplate/page-data.json?__WB_REVISION__=011e4700166459b8965022b8d4feb97b","status":404}]

Why would it attempt to pre-cache a template file, shouldn't it only pre-cache created pages?

I'll work on getting an example up and running

[TannerJuby1]

Okay @tyhopp , while I was able to create a new instance that installs correctly, it is not pre-caching the pages I am telling it to.

Here is the Repo: https://github.com/TannerJuby1/gatsby-debug-repo Here is the live site: https://gatsbydebugrepomain.gtsb.io/

I have the plugin configured like so:

{
    resolve: 'gatsby-plugin-offline',
    precachePages: [`/*`, `/fundraisers/*`]
}

but it does not cache any of the /fundraisers/ page paths

[tyhopp]

Thanks for the reproduction @TannerJuby1, you need to make precachePages a property of options like this and it works as expected:

module.exports = {
  siteMetadata: {
    title: `minimal`,
    siteUrl: `https://www.yourdomain.tld`
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-offline',
      options: {
        precachePages: [`/*`, `/fundraisers/*`]
      }
    }
  ]
}

[TannerJuby1]

@tyhopp oops, yeah I can't recreate the issue right now. I have the precachePages as a property of options in the project I'm having the issue with and it's still throwing the redundant error.... I'll reopen this issue when I am able to get it to reproduce.

[NeerajThapliyal]

above solution not working { resolve: gatsby-plugin-offline, options: { precachePages: [/mobile/*], }, },

still not able to access mobile page in offline mode