gatsby-plugin-offline Service Worker installation Errors

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

gatsby-plugin-offline does not work out of the box. Here are the two errors:

Uncaught (in promise) bad-precaching-response: bad-precaching-response
The installing service worker became redundant.

Tried modifying base on suggestion in this ticket https://github.com/gatsbyjs/gatsby/issues/36346 but it caused our build to fail.

Reproduction Link

NOTE: Errors will only be displayed in production.

https://github.com/clopez11/gatsby-starter-minimal

Steps to Reproduce

After installing the two packages, the Console has two errors.

Uncaught (in promise) bad-precaching-response: bad-precaching-response
The installing service worker became redundant.

Testing Steps:

Developer Tools > Console -> Application -> Storage -> Clear site data
Go to chrome://inspect/#service-workers and terminate all service workers, if any
Hard Refresh Page
Verify the current page is available offline or switch to low throttle on mobile to test
Check if service errors exists in Console
Run Lighthouse > Progressive Web App to ensure it is passing
Check manifest exists in Console -> Application -> Manifest
Check /manifest.webmanifest has correct properties
Check list exists in Console -> Application -> Cache > Cache Storage

Expected Result

Pass PWA Lighthouse and no service errors

Actual Result

Service Error is not installed and an additional pre-cache error.

Environment

System:
    OS: macOS 12.6
    CPU: (8) x64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 105.0.1
    Safari: 16.0
  npmPackages:
    gatsby: ^4.19.2 => 4.24.4
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1
    gatsby-plugin-image: ^2.9.1 => 2.24.0
    gatsby-plugin-instagram-embed: ^4.0.0 => 4.0.0
    gatsby-plugin-manifest: ^4.24.0 => 4.24.0
    gatsby-plugin-no-sourcemaps: 4.24.0 => 4.24.0
    gatsby-plugin-offline: ^5.24.0 => 5.24.0
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0
    gatsby-plugin-react-helmet: ^5.9.0 => 5.24.0
    gatsby-plugin-robots-txt: ^1.6.0 => 1.7.1
    gatsby-plugin-sharp: ^4.9.1 => 4.24.0
    gatsby-plugin-sitemap: ^5.15.1 => 5.24.0
    gatsby-plugin-styled-components: ^5.9.0 => 5.24.0
    gatsby-source-filesystem: ^4.9.1 => 4.24.0
    gatsby-source-graphql: ^4.6.0 => 4.24.0
    gatsby-transformer-sharp: ^4.9.0 => 4.24.0

Config Flags

No response

gatsbyjs / gatsby

gatsby-plugin-offline Service Worker installation Errors #36851