Мой веб-сайт отлично работает на рабочем столе, но отображает пустую страницу на мобильных устройствах (iOS / Android).Это приложение для создания и реагирования, размещенное в 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>
Я думал, что проблема связана с manifest.json , поскольку она имеет отношение только к мобильным веб-сайтам.Я пробовал:
В manifest.json:
- Изменение start_url на "/", "/index.html" и "./index.html "
В firebase.json:
- Изменение общей папки на" ./build "и" build "(сгенерировано
npm run build)
В index.html:
- Удаление manifest.json import
Установка заголовков кэширования HTTP для service-worker.js (, рекомендованный create-реагировать-app )
Я также незарегистрированный работник службы в index.js, но я зарегистрировал его раньше.
Что я делаю не так?Спасибо!
GitHub Repo