我网站上由 Firebase 托管的移动设备上的空白页面

Question

我的网站在桌面上运行良好，但在移动设备上显示空白页面 (iOS / Android)。这是一个由 Firebase 托管的 create-react-app。

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>

我认为问题与 manifest.json 有关，因为它只与移动网站有关。我试过：

在manifest.json中：

将 start_url 更改为“/”、“/index.html”和“./index.html”

在firebase.json中：

将 public 文件夹更改为“./build”和 "build"（由 npm run build 生成）

在index.html中：

删除 manifest.json 导入

为 service-worker.js (recommended by create-react-app)

设置 HTTP 缓存 headers

我也在index.js注销了service worker，但我之前注册过

我做错了什么？谢谢！

GitHub Repo

Answer 1

原来是 redux devtools 扩展 问题。

我是这样创建商店的：

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

但这行得通：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

我网站上由 Firebase 托管的移动设备上的空白页面

Blank page on mobile in my website hosted by Firebase

mobile-website

firebase

firebase-hosting

progressive-web-apps

create-react-app