gatsby-plugin-offline requires two reloads to provide an offline experience

[sauravseth]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• 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

I have used gatsby-plugin-offline along with gatsby-plugin-manifest as described in the documentation. After doing a clean build on a new browser tab (without any previous caching) the first load works successfully and caches the main files such as framework, app, etc. However, it fails to cache the actual index page file which starts with component-src-.
Now if I kill my server or shut my network or I just do a clean build again, the component-src- file would have changed and since the service worker exists because of the first load, it tries to respond to this request. However it can't because it was never cached and hence a blank page is shown.

This issue is critical because there might be cases where a clean build is required if we ever get into some weird caching bug and that has the potential to hamper the experience of all those users that just came once

Please refer the video that showcases the above

Screen.Recording.2024-07-13.153833.mp4

Reproduction Link

https://github.com/sauravseth/minimal-repro-for-offline-plugin-issue

Steps to Reproduce

1. Clone minimal repo - git clone https://github.com/sauravseth/minimal-repro-for-offline-plugin-issue.git
2. gatsby clean
3. gatsby build
4. gatsby serve
5. Clear browser cache for localhost:9000
6. Load website the first time
7. Kill the gatsby serve command

Expected Result

The 2nd reload after installation of the service worker should've worked because the same page without any changes was loaded once and it worked without any errors

Actual Result

The 2nd reload results in a blank page which can be a common scenario if a clean build is done and users have only visited the site once

Environment

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
  npmPackages:
    gatsby: ^5.13.5 => 5.13.5 
    gatsby-plugin-manifest: ^5.13.1 => 5.13.1 
    gatsby-plugin-offline: ^6.13.2 => 6.13.2 
  npmGlobalPackages:
    gatsby-cli: 5.13.3

Config Flags

No response

[emmron]

@sauraeveth Thanks for reporting. The issue seems to be that the service worker isn’t caching the initial page load properly, causing a blank page on subsequent loads after a clean build. I’ll investigate and work on a solution to ensure the index page is correctly cached on first load. I’ll update with progress.

[emmron]

#39042 @sauravseth

[sauravseth]

Hi @emmron,

Thanks for the quick response. Hopefully someone from the gatsby team can take a look and let us know about the correctness of the solution