Search code examples
firebasecreate-react-appprogressive-web-appsmobile-websitefirebase-hosting

Blank page on mobile in my website hosted by Firebase

My website works fine on desktop but displays a blank page on mobile devices (iOS / Android). It's a create-react-app hosted by Firebase.

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

manifest.json

{
  "short_name": "DevShare",
  "name": "DevShare",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#212C3D",
  "background_color": "#212C3D"
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="theme-color" content="#212C3D" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
    />
    <title>DevShare</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

I thought the problem had something to do with manifest.json as it's only relevant on mobile websites. I've tried:

In manifest.json:

  • Changing start_url to "/", "/index.html" and "./index.html"

In firebase.json:

  • Changing public folder to "./build" and "build" (generated by npm run build)

In index.html:

  • Removing manifest.json import

Setting HTTP caching headers for service-worker.js (recommended by create-react-app)

I also unregistered the service worker in index.js, but I had it registered before.

What am I doing wrong? Thank you!

GitHub Repo

Solution

  • Turns out it was a redux devtools extension problem.

    I was creating the store like so:

    createStore(
  rootReducer,
  compose(
    /* other stuff... */
    window.__REDUX_DEVTOOLS_EXTENSION__ &&  window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

    but this works:

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

createStore(
  rootReducer,
  composeEnhancers(
    /* other stuff... */
  )
);