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

WhippetsAintDogs · 2019-01-11T15:59:09Z

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

Install gatsby-offline-plugin with vanilla options in a project with a home page that has a colored background.
Build.
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 · 2019-01-11T16:05:03Z

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 #10998

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

cc @LekoArts

WhippetsAintDogs · 2019-01-11T16:08:07Z

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 · 2019-01-11T16:12:29Z

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 · 2019-01-11T16:15:21Z

@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 · 2019-01-11T16:22:44Z

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 · 2019-01-11T16:24:59Z

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 · 2019-01-11T16:46:01Z

@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 · 2019-01-11T16:47:06Z

@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 · 2019-01-11T16:48:36Z

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 · 2019-01-11T16:51:05Z

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 · 2019-01-11T16:53:34Z

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 · 2019-01-11T16:54:59Z

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 · 2019-01-13T16:17:46Z

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 · 2019-01-18T04:27:42Z

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 · 2019-01-19T13:26:17Z

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 · 2019-01-20T05:20:18Z

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 · 2019-02-16T17:27:34Z

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 · 2019-02-17T02:18:10Z

@gatsbybot not stale

gatsbot · 2019-04-04T17:27:41Z

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 · 2019-04-05T15:26:26Z

This isn’t stale.

ambethia · 2019-04-10T14:50:29Z

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 · 2019-06-06T22:46:49Z

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

fredmontet · 2019-07-10T11:48:04Z

Same problem...

kimbaudi · 2019-08-03T04:36:12Z

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 · 2020-02-07T13:57:20Z

This issue is alive? I'm with this problem

xndyz · 2020-03-07T06:18:28Z

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

romainbessugesmeusy · 2020-05-01T13:33:39Z

Same here

darokrk · 2020-05-17T18:19:11Z

Same here, still saw blank site when reload :(

did anyone solve this problem?

hammund0 · 2020-05-21T23:30:16Z

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 · 2020-12-08T23:07:52Z

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:

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

Build and serve
npm run build && npm run serve
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.

jdesherlia · 2021-02-05T19:33:06Z

I am also seeing this in our project now (https://www.8x8.com). Using the latest. Here are the relevant details:

package.json:

{
  "name": "8x8-site-redesign-gatsby",
  /* ... */
  "dependencies": {
    "@artsy/fresnel": "^1.3.1",
    "@sendgrid/mail": "^7.4.0",
    "algoliasearch": "^4.8.3",
    "axios": "^0.19.2",
    "axios-jsonp": "^1.0.4",
    "axios-rate-limit": "^1.2.1",
    "axios-retry": "^3.1.8",
    "browser-monads": "^1.0.0",
    "calendar-link": "^2.0.10",
    "csv-parser": "^3.0.0",
    "dayjs": "^1.10.4",
    "deepmerge": "^4.2.2",
    "formik": "^2.2.3",
    "gatsby": "^2.25.2",
    "gatsby-cli": "^2.8.30",
    "gatsby-plugin-google-tagmanager": "^2.1.15",
    "gatsby-plugin-manifest": "^2.12.0",
    "gatsby-plugin-netlify": "^2.2.1",
    "gatsby-plugin-offline": "^3.10.0",
    "gatsby-plugin-react-helmet": "^3.1.22",
    "gatsby-plugin-remove-serviceworker": "^1.0.0",
    "gatsby-plugin-resolve-src": "^2.0.0",
    "gatsby-plugin-sitemap": "^2.2.0",
    "gatsby-plugin-webfonts": "^1.1.2",
    "gatsby-source-filesystem": "^2.3.24",
    "html-react-parser": "^0.14.3",
    "is_js": "^0.9.0",
    "performant-array-to-tree": "^1.7.1",
    "prop-types": "^15.7.2",
    "query-string": "^6.9.0",
    "rbx": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-dotdotdot": "^1.3.1",
    "react-helmet": "^5.2.1",
    "react-intersection-observer": "^8.26.1",
    "react-responsive-picture": "^3.2.2",
    "react-scrollspy": "^3.4.0",
    "react-slick": "^0.24.0",
    "react-spring": "^8.0.27",
    "react-stickynode": "^3.0.0",
    "recoil": "^0.1.2",
    "redraft": "^0.10.2",
    "rss": "^1.2.2",
    "slick-carousel": "^1.8.1",
    "swiper": "^6.4.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.12.11",
    "@babel/register": "^7.12.10",
    "@types/cucumber": "^6.0.0",
    "@types/node": "^12.12.7",
    "@wdio/allure-reporter": "^5.16.0",
    "@wdio/cli": "^5.16.6",
    "@wdio/cucumber-framework": "^5.16.6",
    "@wdio/local-runner": "^5.16.6",
    "@wdio/reporter": "^5.15.2",
    "@wdio/selenium-standalone-service": "^5.16.5",
    "@wdio/sync": "^5.16.5",
    "allure-commandline": "^2.13.0",
    "chai": "^4.2.0",
    "cucumber": "^6.0.4",
    "del": "^6.0.0",
    "dotenv": "^8.1.0",
    "envkey": "^1.2.7",
    "gatsby-plugin-algolia-search": "^0.5.6",
    "gatsby-plugin-bundle-stats": "^2.5.0",
    "gatsby-plugin-preconnect": "^1.1.54",
    "gatsby-plugin-remove-trailing-slashes": "^2.3.3",
    "gatsby-plugin-sass": "^2.1.0",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.18",
    "gatsby-source-contentstack": "^2.2.9",
    "gulp": "^4.0.2",
    "gulp-replace": "^1.0.0",
    "node-sass": "^4.14.1",
    "node-sass-glob-importer": "^5.3.2",
    "prettier": "^2.2.1",
    "probe-image-size": "^6.0.0",
    "spark-md5": "^3.0.1",
    "wdio-timeline-reporter": "^5.1.1",
    "webdriverio": "^6.10.5",
    "webpack-cli": "^4.2.0"
  },
  /* ... */
  "scripts": {
    "build": "yarn run build:lambdas && yarn run build:gatsby",
    "build:gatsby": "gatsby build",
    "build:lambdas": "gulp build",
    "develop": "gatsby develop",
    "start": "yarn run build:lambdas && netlify dev",
    "serve": "gatsby serve",
    "watch:lambdas": "gulp watch"
  },
  /* ... */
}

gatsby-config.js:

const globImporter = require('node-sass-glob-importer')

require("dotenv").config({
    path: `.env`,
})

require('envkey')

/* Irrelevant Code Removed */

let config = {
    /* Irrelevant Code Removed */
    plugins: [
        `gatsby-plugin-resolve-src`,
        /* Irrelevant Code Removed */
        {
            resolve: `gatsby-plugin-webfonts`,
            options: {
                fonts: {
                    google: [{
                        family: `Roboto`,
                        variants: [ `300`, `400`, `500`, `700` ]
                    },{
                        family: `Roboto Slab`,
                        variants: [ `100`, `200`, `300`, `400`, `500`, `600`, `700` ]
                    }]
                }
            }
        },
        /** Google Tag Manager */
        {
            resolve: "gatsby-plugin-google-tagmanager",
            options: {
                id: process.env.GATSBY_GTM_ID,
                includeInDevelopment: true,
                defaultDataLayer: { platform: "gatsby" }
            }
        },
        /* Irrelevant Code Removed */
        {
            resolve: `gatsby-source-contentstack`,
            options: {
                api_key: process.env.CONTENTSTACK_API_KEY,
                delivery_token: process.env.CONTENTSTACK_API_TOKEN,
                environment: process.env.CONTENTSTACK_ENV,
            }
        },
        {
            resolve: `gatsby-plugin-sass`, // Sass plugin to utilize .scss files
            options: {
                importer: globImporter(), // Allow glob imports like .../**/*.scss
            },
        },
        {
            resolve: `gatsby-plugin-netlify`,
            options: {
                // The following header rules need to be removed once we are no longer doing legacy site proxy rewrites
                // The following will generate standard security headers for all unkonwn routes
                headers: {
                    '/*': [
                        // Commenting this our so that we can embed pages on partner pages
                        // In the future, I would like to maintian a list of registered partner
                        // domains in CS and dynamically populate the CSP header for those domains
                        // and scope the header to specific page path patterns:
                        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
                        // `X-Frame-Options: DENY`,
                        `X-XSS-Protection: 1; mode=block`,
                        `Referrer-Policy: same-origin`,
                        `Access-Control-Allow-Origin: *`,
                        `Strict-Transport-Security: max-age=31536000; includeSubDomains`
                    ]
                },
                // The following will generate standard security headers for all published routes
                allPageHeaders: [
                    // Commenting this our so that we can embed pages on partner pages
                    // In the future, I would like to maintian a list of registered partner
                    // domains in CS and dynamically populate the CSP header for those domains
                    // and scope the header to specific page path patterns:
                    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
                    // `X-Frame-Options: DENY`,
                    `X-XSS-Protection: 1; mode=block`,
                    `X-Content-Type-Options: nosniff`,
                    `Referrer-Policy: no-referrer-when-downgrade`,
                    `Strict-Transport-Security: max-age=31536000; includeSubDomains`
                ],
                // The following needs to be removed once we are no longer doing legacy site proxy rewrites
                mergeSecurityHeaders: false,
                // generateMatchPathRewrites: false
            }
        },
        /* Irrelevant Code Removed */
        {
            resolve: `gatsby-plugin-preconnect`,
            options: {
                domains: [
                    `https://apikeys.civiccomputing.com`,
                    `https://app.hushly.com`,
                    `https://cdnjs.cloudflare.com`,
                    `https://fonts.googleapis.com`,
                    `https://ik.imagekit.io`,
                    `https://www.google-analytics.com`,
                    `https://in.ml314.com`,
                    `https://ml314.com`,
                    `https://reveal.clearbit.com`,
                    `https://cdn.treasuredata.com`,
                    `https://1038997-47.chat.api.drift.com`,
                    `https://customer.api.drift.com`,
                    `https://embeds.driftcdn.com`,
                    `https://enrichment.api.drift.com`,
                    `https://event.api.drift.com`,
                    `https://js.driftt.com`,
                    `https://metrics.api.drift.com`,
                    `https://presence.api.drift.com`,
                    `https://targeting.api.drift.com`,
                    `https://576-gyc-500.mktoresp.com`,
                    `https://munchkin.marketo.net`,
                    `https://analytics.newscred.com`,
                    `https://a10198241005.cdn.optimizely.com`,
                    `https://logx.optimizely.com`,
                    `https://a.quora.com`,
                    `https://analytics.twitter.com`,
                    `https://connect.facebook.net`,
                    `https://px.ads.linkedin.com`,
                    `https://q.quora.com`,
                    `https://snap.licdn.com`,
                    `https://static.ads-twitter.com`,
                    `https://t.co`,
                    `https://www.facebook.com`,
                    `https://9525482.fls.doubleclick.net`,
                    `https://adservice.google.com`,
                    `https://googleads.g.doubleclick.net`,
                    `https://p.adsymptotic.com`,
                    `https://stats.g.doubleclick.net`,
                    `https://www.google.com`,
                    `https://www.googleadservices.com`,
                ]
            }
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                short_name: `8x8`,
                name: `8x8 - Voice, Video, Chat, Contact Center`,
                description: `8x8's business phone systems deliver affordable, cloud-based voice, video, messaging, and contact center solutions, helping you serve customers anytime.`,
                categories: [
                    `communications`,
                    `technology`,
                    `medical`
                ],
                start_url: `/`,
                scope: `/`,
                background_color: `#FFFFFF`,
                theme_color: `#CB2233`,
                display: `minimal-ui`,
                icon: `src/images/8x8-favicon.svg`,
                shortcuts: [
                    {
                        name: `View 8x8 Products`,
                        short_name: `Products`,
                        description: `8x8's cloud communications products boost efficiency by consolidating your phone, meetings, team messaging, and cloud contact center into one single platform.`,
                        url: `/products`
                    }, {
                        name: `View 8x8 Solutions`,
                        short_name: `Solutions`,
                        description: `8x8, Inc. offers business communications phone solutions to small, medium and large sized businesses. Find your solution today.`,
                        url: `/solutions`
                    }, {
                        name: `View 8x8 Integrations`,
                        short_name: `Integrations`,
                        description: `Use 8x8 integration to connect your apps and software automatically. Connect to mail, messaging, CRMs, spreadsheets and more. Do it yourself, today.`,
                        url: `/products/integrations`
                    }, {
                        name: `View 8x8 Resources`,
                        short_name: `Resources`,
                        description: `View and access our library of white papers, webinars, case studies and more to learn about 8x8 and the services we offer.`,
                        url: `/resources`
                    }, {
                        name: `View Careers at 8x8`,
                        short_name: `Careers`,
                        description: `8x8 is a leader in cloud communication software, who's always looking for the best and brightest talent. Check out our current job openings.`,
                        url: `/resources`
                    }
                ],
                related_applications: [
                    {
                        platform: `play`,
                        url: `https://play.google.com/store/apps/details?id=com.eght.meetings&hl=en_US`,
                        id: `com.eght.meetings`
                    }, {
                        platform: `itunes`,
                        url: `https://apps.apple.com/us/app/8x8-video-meetings/id1473422060`,
                        id: `1473422060`
                    }
                ]
            },
        },
        `gatsby-plugin-offline`,
        `gatsby-plugin-remove-trailing-slashes`,
        {
            resolve: `gatsby-plugin-sitemap`,
            options: {
                sitemapSize: 1500
            }
        }
        /* Irrelevant Code Removed */
    ],
}

/* Irrelevant Code Removed */

// Export our config object
module.exports = config

As you can see, we have a pretty vanilla config re: gatsby-plugin-offline, so its interesting that there are these issues. Now, I know we have a lot that needs to be improved upon in terms of bundle size, and excess json being loaded, but from what I can tell that is not what is contributing to the white screen, as that only happens with a service worker enabled and only on the subsequent page loads, not the first.

Any insights would be appreciated.

UPDATE: I have found that this seems to be directly related to a script we are loading from vidyard. It is causing over 200MB of data to be cached by the service worker, but I have no idea why or where it is coming from. This is also what is causing the blank screen to flash before the page loads it seems. If I block this script and then clear data, the behavior goes away and the site's cache is around 3MB.

UPDATE 2: vidyard was a bit of a red herring. I actually have a handful of scripts that get added to either the headComponents, or the bodyComponents ( if set with defer=true ). These follow the pattern /_scripts/[name].[hashString].js. If i block ANY 1 of these scripts in the browser console, the cache never gets larger than 3.5MB. As soon as all are allowed to be served, the cache explodes to almost 200MB. It also seems that blocking any of them causes none of them to be cached by the sw. For context, these scripts do not total anywhere near 200MB themselves, and when switching into offline mode, the total served size of resources from teh service worker is ~17MB:

315B Feb  5 14:23 hushlyPreLoad.fd86f5a4bc2479a6a9f213e0a0cf4068.js
65K Feb  5 14:23 vidyard.e2e8eb2b2c8bd6e0e54aaa07d89a39a1.js
2.5K Feb  5 14:23 hushly.6e78c8c5674405421ba73a4ce9190a34.js
281K Feb  5 14:23 cookieControl.e54c9dda6b56442dfc104602920c26d0.js
572K Feb  5 14:23 optimizely.463a6ca2f838c69a7878928422dfe4c2.js

eth0izzle · 2021-02-28T23:10:24Z

Same problem here. Nothing to add from what others have already captured. Disabling the plugin works for now.

wolfet · 2021-10-10T05:54:01Z

I experienced this same issue in Firefox and Safari, but not in Chrome. This forked version of gatsby-plugin-offline with a newer version of workbox seemed to resolve the blank page on refresh for my project: https://github.com/kije/gatsby-plugin-offline-next

There are other issues I've run into where certain routes, including the site root, are not available offline with this plugin. I'm temporarily not using it with Gatsby.

DPro23 · 2022-03-01T13:32:52Z

Hi everyone,

I have the same issue since months and we can't figure out how to solve it.

The blank screen/white page occurs after a deployment of a new version of a Gatsby website. After the deployment, if an user visit the website he will see the white page and only after an hot reload, cache cleaning or incognito mode, the user can navigate into the website normally.

I have installed a service worker with gatsby-plugin-offline but then I removed it cause was causing more issues with the cache then anything else. So I added the plugin to remove the serviceworker from the users.

The problem is still there. It is random and it is causing lot of problems with the customer.

I can't belive that Gatsby has still so many issues and complexities in the main aspects of web development. We build websites with gatsby for its performances, but sometimes is becoming not worthy cause of the amount of problems and issues caused by the gatsby plugins and/or not supported versions.

We urgently need a fix for this otherwise any performance test on a gatsby website with this issue will fail brutally.

iThijssen · 2022-03-15T09:05:59Z

I did not install gatsby-plugin-offline but still get the same issues reported from my customers since a few months.
I cannot figure out any reason for this problem. At a random frequency, my users report an empty white screen when they load the page, sometimes after a few seconds. It occurs from time to time after a new build of the site served by NGINX but it does not have to mean that the problem is related to update-deployments.

bartlomiejzuber · 2022-04-26T13:59:40Z

I did not install gatsby-plugin-offline but still get the same issues reported from my customers since a few months.
I cannot figure out any reason for this problem. At a random frequency, my users report an empty white screen when they load the page, sometimes after a few seconds. It occurs from time to time after a new build of the site served by NGINX but it does not have to mean that the problem is related to update-deployments.

That's interesting, we have exactly the same problem. Can't say whether that problem is because of that gatsby-plugin-offline plugin or something else. Once I was getting also blank page (it happens very randomly) on browser, I went to check it on cURL and finds out that server correctly responded with HTML. Imo that might be something to do with NGINX itself.

LekoArts · 2022-07-15T04:52:03Z

Hi!

I'm closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support. If this is a feature request, please create a discussion as we moved feature requests from issues to GitHub Discussions.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!

WhippetsAintDogs changed the title ~~[gatsby]~~ [gatsby-offline-plugin] ServiceWorker registration cause a quick blank page on website loading/refresh Jan 11, 2019

WhippetsAintDogs changed the title ~~[gatsby-offline-plugin] ServiceWorker registration cause a quick blank page on website loading/refresh~~ [gatsby-offline-plugin] ServiceWorker registration causes a quick blank page on website loading/refresh Jan 11, 2019

sidharthachatterjee added the type: question or discussion Issue discussing or asking a question about Gatsby label Jan 11, 2019

ghost changed the title ~~[gatsby-offline-plugin] ServiceWorker registration causes a quick blank page on website loading/refresh~~ [gatsby-plugin-offline] ServiceWorker registration causes a quick blank page on website loading/refresh Jan 12, 2019

Pong420 mentioned this issue Feb 14, 2019

fix #11006 ServiceWorker registration causes a quick blank page on website loading/refresh #11758

Closed

gatsbot bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Feb 16, 2019

pieh removed the stale? Issue that may be closed soon due to the original author not responding any more. label Feb 18, 2019

vtenfys mentioned this issue Mar 9, 2019

fix(gatsby-plugin-offline): Redesign plugin architecture [draft] #11965

Closed

lannonbr added not stale and removed stale? Issue that may be closed soon due to the original author not responding any more. labels Apr 5, 2019

kimbaudi mentioned this issue Aug 4, 2019

Why are page-data.json files not content hashed? #15080

Closed

LekoArts removed the status: inkteam to review label Feb 14, 2020

GretaCB mentioned this issue Feb 20, 2020

Troubleshoot blank page on first load GretaCB/mimi#23

Closed

wardpeet self-assigned this May 13, 2020

danabrit added the topic: plugins-PWA Issues related to PWA: the gatsby-plugin-offline and gatsby-plugin-manifest plugins label May 21, 2020

LekoArts removed not stale status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. labels May 26, 2020

LekoArts unassigned wardpeet Jul 15, 2022

LekoArts closed this as completed Jul 15, 2022

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

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

Comments

WhippetsAintDogs commented Jan 11, 2019 • edited Loading

Description

Steps to reproduce

Expected result

Actual result

My thoughts on the problem

Environment

sidharthachatterjee commented Jan 11, 2019

WhippetsAintDogs commented Jan 11, 2019 • edited Loading

ghost commented Jan 11, 2019 • edited by ghost Loading

WhippetsAintDogs commented Jan 11, 2019

ghost commented Jan 11, 2019

WhippetsAintDogs commented Jan 11, 2019 • edited Loading

WhippetsAintDogs commented Jan 11, 2019

DSchau commented Jan 11, 2019 • edited Loading

WhippetsAintDogs commented Jan 11, 2019 • edited Loading

DSchau commented Jan 11, 2019 • edited Loading

WhippetsAintDogs commented Jan 11, 2019 • edited Loading

ghost commented Jan 11, 2019 • edited by ghost Loading

hackhat commented Jan 13, 2019 • edited Loading

lightstrike commented Jan 18, 2019

zidoshare commented Jan 19, 2019 • edited Loading

zidoshare commented Jan 20, 2019

gatsbot bot commented Feb 16, 2019

Pong420 commented Feb 17, 2019

gatsbot bot commented Apr 4, 2019

dja commented Apr 5, 2019

ambethia commented Apr 10, 2019

gfsd3v commented Jun 6, 2019

fredmontet commented Jul 10, 2019

kimbaudi commented Aug 3, 2019 • edited Loading

LeonardoCesca commented Feb 7, 2020

xndyz commented Mar 7, 2020

romainbessugesmeusy commented May 1, 2020

darokrk commented May 17, 2020

hammund0 commented May 21, 2020

hayatae commented Dec 8, 2020

jdesherlia commented Feb 5, 2021 • edited Loading

eth0izzle commented Feb 28, 2021

wolfet commented Oct 10, 2021

DPro23 commented Mar 1, 2022

iThijssen commented Mar 15, 2022

bartlomiejzuber commented Apr 26, 2022

LekoArts commented Jul 15, 2022

WhippetsAintDogs commented Jan 11, 2019 •

edited

Loading

WhippetsAintDogs commented Jan 11, 2019 •

edited

Loading

ghost commented Jan 11, 2019 •

edited by ghost

Loading

WhippetsAintDogs commented Jan 11, 2019 •

edited

Loading

DSchau commented Jan 11, 2019 •

edited

Loading

WhippetsAintDogs commented Jan 11, 2019 •

edited

Loading

DSchau commented Jan 11, 2019 •

edited

Loading

WhippetsAintDogs commented Jan 11, 2019 •

edited

Loading

ghost commented Jan 11, 2019 •

edited by ghost

Loading

hackhat commented Jan 13, 2019 •

edited

Loading

zidoshare commented Jan 19, 2019 •

edited

Loading

kimbaudi commented Aug 3, 2019 •

edited

Loading

jdesherlia commented Feb 5, 2021 •

edited

Loading