PWA Reload Blank

[fadi-george]

Current behavior:

Using ThemeProvider (and setting custom background) with CSSBaseline and reloading PWA leads to a blank page. CSSBaseline uses Global from @emotion/react so there might be some issue there.

To reproduce:

https://codesandbox.io/s/vite-mui-pwa-m8o3di?file=/src/App.tsx

1. Download https://codesandbox.io/s/vite-mui-pwa-m8o3di?file=/src/App.tsx
2. Run npm install && npm run build && npm run serve
3. Install the PWA on Chrome
4. Reload the PWA window, you should see a blank page

It seems that if you comment default: prefersDarkMode ? 'red' : 'blue', for background, rebuild and reload it will not show a blank page.

Expected behavior:

Force Reload (CMD + R) on the PWA should not show a blank page.

Environment information:

• react version: 17.0.0
• @emotion/react version: 11.8.1

[Andarist]

Does this also happen in FireFox? If yes - would you be able to try recording a https://www.replay.io/ recording for me?

[fadi-george]

I don't believe Firefox supports PWA natively.

[fadi-george]

Also this doesn't seem to happen on Windows.

[fadi-george]

Also doesn't happen if running the app from Chrome Apps folder (Mac).

[Andarist]

Well, this is... bizarre. After an hour of bisecting, refreshing, and hitting cache too many times I was able to reproduce this with just:

import { Global } from "@emotion/react";

const App = () => {
  return (
    <>
      <Global styles={{ body: { backgroundColor: "pink" } }} />
      <span style={{ color: "green", fontSize: "72px" }}>
        Hello just emotion
      </span>
    </>
  );
};

export default App;

I don't always get this problem but after refreshing a bunch of times I can always end up with this broken state. I've tried a bunch of workarounds and I couldn't make it work. The problem is with setting backgroundColor on the body. Perhaps it's somehow clashing with PWA's logic for handling manifest and the background color encoded in it? However, I've also tried removing the background color from the manifest and it didn't help. I've also tried styling html instead of body and it also didn't help.

I also couldn't ever reproduce this when opening the app "from the dock" - only after installing it/switching to it from a browser. So this really has to be some strange bug in Chrome. In your place, I would try to minimize this further (repro with just bare HTML) and create a ticker in their issue tracker.

So my best advice here is to switch to styling #root instead of body - as far as my experiments went, this actually worked. I know that it's not equivalent, but hopefully, you can make it work somehow for your use case.