我的网站在桌面上工作正常,但在移动设备(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中:
在firebase.json中:
npm run build
生成)在index.html中:
为service-worker.js设置HTTP缓存头(recommended by create-react-app)
我还在index.js中取消注册了服务工作者,但之前我已经注册了它。
我究竟做错了什么?谢谢!
事实证明这是一个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... */
)
);