GoogleChrome
PWA shows sometimes a white screen
Library Affected: "workbox-cacheable-response": "^6.4.1", "workbox-core": "^6.4.1", "workbox-expiration": "^6.4.1", "workbox-google-analytics": "^6.4.1", "workbox-precaching": "^6.4.1", "workbox-routing": "^6.4.1", "workbox-strategies": "^6.4.1", "workbox-window": "^6.4.1", "workbox-webpack-plugin": "^6.4.1",
Browser & Platform: Chrome 96.0.4664.55 on MacOS 12.0.1 Monterey
Issue or Feature Request Description: I am not exactly sure if i am right here and how to explain it best, but we are experiencing some strange PWA behaviour. If we open certain url's sometimes our PWA renders a blank screen while the dom is fully loaded like normal, no errors everything looks fine. Devtools is showing the dom like there is no problem, we can even hover over elements (that are in this state invisible to us) and click them and the pwa does it's stuff reloads but it keeps rendering a white screen.
When we used workbox version 6.3.0 it didn't stopped rendering the white screen when we accessed these certain urls even after reopening the pwa. As i today updated to workbox 6.4.1 this behaviour changed a bit so when the pwa renders a white screen and we now close it and open it again it is now working for some reason.
It's still rendering a white screen on the first load but after closing and reopening it is now working. 🤷♂️
This Bug tends to only appear on MacOS desktop using Chrome.
Maybe thats more of an issue of pwa's with chromium but because it has changed a bit after updating workbox i thought to ask here first.
This Chromium issue is looking to be related https://bugs.chromium.org/p/chromium/issues/detail?id=1239155&q=blank%20screen%20pwa&can=2
The problem is that there is no visible problem log or anything to us. It's not happening if we just use the browser.
I can sometimes see the same thing on twitter's pwa. Screencast of the bug from Twitters PWA
Maybe someone can point me to the right direction.
My vanilla javascript pwa also shows a white screen sometimes, but on Chrome for Android (fully updated on a Samsung S8).
I can't reproduce the bug consistently, but it seems to appear after the app loses focus sometimes. Like when I turn off the screen of my phone for a while. I don't think the length of time is critical, and neither is losing connection a factor, but I may be wrong here as it happens every other day at random times and I have a hard time remembering what I did prior to the white screen.
Closing the pwa and restarting it removes the problem.
Everything is fine in Chrome dev-tools when I look with chrome://inspect/#devices except for the screen being white. It registers swipes (which I logged for debugging and forgot to remove), but the buttons is inactive even though the full DOM appears to be there.
As I don't see this problem on the PC I don't think this is down to my code. Especially when no errors is thrown and Lighthouse gives a clean bill.
(The code for my pwa can be found at https://github.com/HappyDustbunny/FuzzyPlan and it is hosted at fuzzyplan.madshorn.dk )
Edit: I saw a suggestion somewhere else that the white screen could be a lingering theme_color or background_color, but after changing them both to different colors the white screen persist occasionally.
