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

问题描述 投票:0回答:1

我的网站在桌面上工作正常,但在移动设备(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中:

  • 将公用文件夹更改为“./build”和“build”(由npm run build生成)

在index.html中:

  • 删除manifest.json导入

为service-worker.js设置HTTP缓存头(recommended by create-react-app

我还在index.js中取消注册了服务工作者,但之前我已经注册了它。

我究竟做错了什么?谢谢!

GitHub Repo

firebase create-react-app progressive-web-apps mobile-website firebase-hosting
1个回答
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... */
  )
);
© www.soinside.com 2019 - 2024. All rights reserved.