Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
sauravseth opened this issue Jul 13, 2024 · 3 comments
Open
2 tasks done
Labels
status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer type: bug An issue or pull request relating to a bug in Gatsby

Comments

@sauravseth
Copy link

Preliminary Checks

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

@sauravseth sauravseth added the type: bug An issue or pull request relating to a bug in Gatsby label Jul 13, 2024
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jul 13, 2024
@emmron
Copy link

emmron commented Jul 13, 2024

@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 added a commit to emmron/gatsby-issue-25207-fix that referenced this issue Jul 13, 2024
…first reload" --body "This PR addresses issue gatsbyjs#39041 by ensuring that gatsby-plugin-offline provides an offline experience on the first reload without requiring a second reload.

Signed-off-by: Emmett Hoolahan <[email protected]>
@emmron
Copy link

emmron commented Jul 13, 2024

#39042 @sauravseth

@sauravseth
Copy link
Author

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

emmron added a commit to emmron/gatsby-issue-25207-fix that referenced this issue Jul 22, 2024
…first reload" --body "This PR addresses issue gatsbyjs#39041 by ensuring that gatsby-plugin-offline provides an offline experience on the first reload without requiring a second reload.

Signed-off-by: Emmett Hoolahan <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Development

No branches or pull requests

2 participants