gatsby-plugin-offline resulted in blank pages for some users

[axe312ger]

Description

A fresh deployment of "gatsby-plugin-offline": "^2.0.24", resulted in blank pages for some of our users. The website was unusable, resulting in a bounce-rate of ~50%. Upgrading to latest version of gatsby-plugin-offline did not help, still same result.

I attached a page dump (Save page as in Chrome) I received from a machine where the error occurred.

It seems that gatsby-plugin-offline wanted to load old paths which are not existing anymore, resulting in the update functionallity to break?

page-dump-blank-page-with-gatsby-plugin-offline.zip

Fixes that worked:

• User has to clear browser cache
• Installing gatsby-plugin-remove-serviceworker. The page now works as expected on all machines, but now lacking the offline functionality :(

Steps to reproduce

Was not able to reproduce it on my own machine, with a clear browser cache it did not happen.

Expected result

Website to display as expected.

Actual result

Blank page, a lot of 404s in the browser console. See zip above.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.3.22 => 2.3.22 
    gatsby-cli: ^2.5.7 => 2.5.7 
    gatsby-image: ^2.0.38 => 2.0.38 
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1 
    gatsby-plugin-manifest: ^2.0.29 => 2.0.29 
    gatsby-plugin-netlify-cache: ^1.2.0-beta.0 => 1.2.0-beta.0 
    gatsby-plugin-offline: ^2.0.25 => 2.0.25 
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0 
    gatsby-plugin-prefetch-google-fonts: ^1.4.2 => 1.4.2 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.1 
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 
    gatsby-plugin-segment-js: ^3.0.1 => 3.0.1 
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7 
    gatsby-plugin-typography: ^2.2.13 => 2.2.13 
    gatsby-plugin-webpack-size: 0.0.3 => 0.0.3 
    gatsby-source-contentful: ^2.0.48 => 2.0.48 
    gatsby-transformer-sharp: ^2.1.18 => 2.1.18 
  npmGlobalPackages:
    gatsby-cli: 2.4.11
    gatsby-dev-cli: 2.4.15
    gatsby-plugin-netlify-cache: 1.2.0-beta.0

[smakosh]

Insert this into your gatsby-browser.js file

export const onServiceWorkerUpdateReady = () => window.location.reload(true)

It will reload the window when ever a new update is available, you could use desktop push notification as well like so: https://stackoverflow.com/a/52864378/7396786

[luukdv]

Could this be the same issue as #11524 and #12399 (comment)?

[Ehesp]

@smakosh I've had that in for a good while, but unfortunately users still see a blank screen with Missing resources for X in the console log.

[smakosh]

meaning your issue is unrelated to the offline plugin, as @luukdv mentioned, it's related to that same issue

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[gfsd3v]

Anyone had any luck on this ? having a similiar issue.

[smakosh]

#13410 (comment)

[ilia-luk]

Experiencing this issue here as well, when saving to home screen both on ios safari and android chrome and trying to browse to previously unvisited pages.

using gatsby-plugin-offline 3.0.25 with gatsby version 2.17.0, tried #13410 with no success, any thoughts?

[nibtime]

I had those white page problems for a while and quite frequently received user feedback about it. So at some point, I decided to disable the plugin with gatsby-plugin-remove-serviceworker.

I just started to tackle this problem again after an upgrade to gatsby@2.25.3 and gatsby-plugin-offline@3.3.2. I did the window.location.reload(true) thing together with feedback using the Notification API (details here).

I aggressively tried to break things on several browsers on my local machine and BrowserStack, but everything worked like a charm, while it was super easy to break things before.

Of course, this is by no means comprehensive and things could still go wrong out in the field and those kinds of bugs are a nightmare since they are very hard to test and reproduce.

I am very interested in your recent experiences with this situation with newer versions of gatsby and gatsby-plugin-offline and would appreciate it very much if you would share them. Same counts for good testing strategies for this class of bugs.

[iheathers]

Any update on the issue. I am facing the same issue on gatsby site I built for the client on both UAT and production site.

[iheathers]

Insert this into your gatsby-browser.js file

export const onServiceWorkerUpdateReady = () => window.location.reload(true)

It will reload the window when ever a new update is available, you could use desktop push notification as well like so: https://stackoverflow.com/a/52864378/7396786

It's already included in the file. But I still have the issue of a blank screen which will go away with hard refresh or cleaning cache. Not a user-friendly marketing site at all which I have pushed to production.

[axe312ger]

@iheathers I had similar experience when upgrading versions in Gatsby. Everything was fine, suddenly users having older versions of the page cached run into blank screens.

In latest v2, at least for my MDX driven projects, gatsby-plugin-offline yielded a lot weird hydration errors. These became better when removing the plugin, but still happen some edge-cases. My guess is, that in my case, the error is somewhere else and gatsby-plugin-offline accelerates the bug.

In the end, I removed gatsby-plugin-offline in all projects, currently still embedding https://www.npmjs.com/package/gatsby-plugin-remove-serviceworker to ensure nobody ends up with a blank or broken page.

Fortunately, Gatsby is fast enough, even without the offline plugin. Especially when proper cache headers are set, which Netlify does for me.

In the end the New content is available. Click ok to reload popup was annoying as well. Even automatically reloading the page with restoring scroll position, is still confusing to the user and bad UX IMHO.