sauravseth commented 4 months ago

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

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

https://github.com/user-attachments/assets/bfcfe1d5-575e-4981-b35e-a314c3825c3e

Reproduction Link

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

Steps to Reproduce

Clone minimal repo - git clone https://github.com/sauravseth/minimal-repro-for-offline-plugin-issue.git
gatsby clean
gatsby build
gatsby serve
Clear browser cache for localhost:9000
Load website the first time
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 commented 4 months ago

@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 commented 4 months ago

39042 @sauravseth