Gatsby: [gatsby-plugin-offline] ServiceWorker registration causes a quick blank page on website loading/refresh

[WhippetsAintDogs]

Description

In a project using the gatsby-offline-plugin, in production (gatsby build), when you access or refresh a page, you'll get a quick blank page instead of the styled HTML from the React's render. Disabling the ServiceWorker from Chrome's DevTools (bypass for network) fixes this.

Steps to reproduce

1. Install gatsby-offline-plugin with vanilla options in a project with a home page that has a colored background.
2. Build.
3. Serve your build and access the root url of the website.

Expected result

Not having any blank page rendering as it is when you disable the ServiceWorker.

Actual result

A blank page appears before the page starts rendering.

My thoughts on the problem

I think that the registration of the ServiceWorker is blocking the React's render and that delaying it after everything is loaded should fix this. Related: https://stackoverflow.com/questions/47637126/why-my-service-worker-block-the-render

Environment

System:
OS: Linux 4.20 Arch Linux undefined
CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
Shell: 4.4.23 - /bin/bash
Binaries:
Node: 11.6.0 - /usr/bin/node
Yarn: 1.10.1 - ~/.yarn/bin/yarn
npm: 6.5.0 - /usr/bin/npm
Languages:
Python: 3.7.2 - /usr/bin/python
Browsers:
Firefox: 64.0
npmGlobalPackages:
gatsby-cli: 2.4.8

[sidharthachatterjee]

Love the incremental editing on this one 😛

Jokes apart, hi @WhippetsAintDogs! Waiting on the rest of the details but based on the title, this looks like it could be potentially related to https://github.com/gatsbyjs/gatsby/issues/10998

Check out the README at the https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline#notes

cc @LekoArts

[WhippetsAintDogs]

Haha sorry for that, I missclicked on submit before even completing the title xD. And yes, #10998, it might be the same root cause of the problem but not the same symptom.

[ghost]

Sounds like #9346, too. I don't know if the PR of @pieh fixed the blank page issue.

@WhippetsAintDogs Are there some JS errors in console during blank page?

[WhippetsAintDogs]

@cardiv No, not at all. I think it's just the registration process of the SW that blocks the normal render. Delaying it could fix that, I suppose.

[ghost]

Thanks @WhippetsAintDogs! You may have the latest version which fixes the errors.

But the blank pages appeared very randomly on my end. I didn't check it again.
If the Service Worker is blocking rendering, blank pages should appear consistently, shouldn't they?

[WhippetsAintDogs]

All right, I'll try the latest version, stay posted. On the other hand, on my end, the blank pages are appearing consistently. Currently I have gatsby 2.0.55 and gatsby-plugin-offline 2.0.17.

[WhippetsAintDogs]

@cardiv I've tried with gatsby 2.0.91 and gatsby-plugin-offline 2.0.21 and I still get consistent blank pages appearing in production when the ServiceWorker in on.

[DSchau]

@WhippetsAintDogs first thing to rule out is to make sure you're using the latest version of gatsby-plugin-offline if you're able (2.0.21).

We've actually seen this issue on gatsbyjs.com intermittently, and we haven't noticed it for quite a while running the latest version of the offline plugin.

[WhippetsAintDogs]

Hi @DSchau, like I said in my previous post, I still have the issue with gatsby 2.0.91 and gatsby-plugin-offline 2.0.21.

Edit: Something else must be different (than gatsbyjs.com). Does gatsbyjs.com runs a vanilla ServiceWorker configuration ?

[DSchau]

Whoops - I saw the 2.0.17 and didn't catch your edit/latest, sorry about that!

Do you have somewhere where we can reproduce? Could you share which page (in particular) and browser version(s) as well? Also the console logs will probably have an error, so a screenshot/paste of those would be super helpful too!

[WhippetsAintDogs]

Yes, this is the page I was talking about: Fika Productions. I use Chromium 71.0.3578.98 (Official Build) Arch Linux (64-bit). There's no errors at all in the console.

[ghost]

After a few tests, i can confirm that this still happens on gatsbyjs.org. Blank page and after a second, the page renders. But, I haven't noticed blank pages that require a reload to get rid of.

The site you linked behaves the same (blank page for a sec). But that doesn't occur every time on my end.

[hackhat]

I'm also getting this. I try to refresh, no matter how many times I see a blank screen. Many users reported they can't access the website because they get a white page. It's so annoying as it seems to affect many people. :(

All reports were on mobile. iOS and Android. Chrome and opera I think. Maybe more, but these for sure were affected at least once.

Sometimes deploying it again fixes the issue.

[lightstrike]

I've been hitting this issue too (or same symptom with a different cause) on a new Gatsby site deployment. I just removed the worker but would like to debug this and get offline support back. Here's an example console with errors and warnings:

[zidoshare]

I'm also getting this like this website.When loading for the first time, the content area will flash。
。

This problem no longer occurs when I remove the gatsby-plugin-offline plugin。like this
。

I guess the gatsby-plugin-offline plugin will re-render my page.

any help?thanks.

[zidoshare]

Oh,sorry,I forgot to show my codes.Although I think there shouldn't be too many problems in my code, I still show you the code that has problems online.

this my respository,only master.thanks.

[gatsbot[bot]]

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!

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

[Pong420]

@gatsbybot not stale

[gatsbot[bot]]

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!

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

[gatsbot[bot]]

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!

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

[dja]

This isn’t stale.

[ambethia]

I've removed the offline plugin, added the "remove-serviceworker" plugin, but it still happens occasionally on pages I haven't visited in a while.

/sigh

[gfsd3v]

Anyone have some news on this ? Having exatcly the same problem.

[fredmontet]

Same problem...

[kimbaudi]

I'm also facing a similar problem when testing my website on a mobile browser (Chrome 76.0.3809.89). After refreshing the web page, the screen would sometimes become blank for 2~3 seconds before the page reloads. Other times, the screen would remain blank and I would have to close and reopen the browser. Also, my page sometimes freezes after the screen is blank for 2-3 seconds and the page loads.

Here is a link to my site: https://clever-kepler-aac0d1.netlify.com
(currently using gatsby 2.13.41 and gatsy-plugin-offline 2.2.4)

Update

I've managed to reproduce the issue and provide some screenshots and video. BTW, this issue happens intermittently/randomly and is difficult to reproduce.

Here is a screenshot of the network activity when I manually refresh the webpage. Notice that the request for page-data.json is pending.

Here is another screenshot of the network activity once the page finally loads. Notice how it took approximately 50 seconds for the white screen to go away and the page to refresh.

Here is a link to the video reproducing the blank white screen while waiting approximately 22 seconds for page-data.json to load. Please pay attention start at 00:19 seconds of the video. The video is about 49 seconds long.

https://imgur.com/a/d7OPKCx

[LeonardoCesca]

This issue is alive? I'm with this problem

[fandy]

Same issue here. Except the blank page only happens on mobile (dev tools + actual iOS device)

[romainbessugesmeusy]

Same here

[darokrk]

Same here, still saw blank site when reload :(

did anyone solve this problem?

[hammund0]

This bug only came after I had done another release to production, after the update, white screen. Before, it was working.

No option but to remove the service worker plugin.

[hayatae]

Seeing this problem still exists with the latest version of Gatsby and plugin-offline, even using all official code with no tweaks.

Steps to reproduce:

1. Create a gatsby site with plugin-offline
   npm init gatsby
   Output:

Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder gatsby-site
    🔌 Install gatsby-plugin-offline

1. Build and serve
   npm run build && npm run serve

2. Open the page in Chrome. Initial load is perfectly normal. Reload the page several times. You'll see a blank screen flash briefly before the page content is actually filled in. This only happens when the serviceWorker/gatsby-plugin-offline is installed/used.