Mon site web fonctionne bien sur un ordinateur de bureau mais affiche une page blanche sur les appareils mobiles (iOS / Android). Il s'agit d'une application de type create-react hébergée par Firebase.
firebase.json
{
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
manifeste.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>
Je pensais que le problème avait quelque chose à voir avec manifeste.json car elle n'est pertinente que pour les sites Web mobiles. J'ai essayé :
Dans manifest.json :
- Modification de start_url en "/", "/index.html" et "./index.html".
Dans firebase.json :
- Changement du dossier public en "./build" et "build" (généré par
npm run build
)
Dans index.html :
- Suppression de manifeste.json import
Définition des en-têtes de mise en cache HTTP pour service-worker.js ( recommandé par create-react-app )
J'ai également désenregistré le travailleur de service dans index.js mais je l'avais déjà enregistré auparavant.
Qu'est-ce que je fais mal ? Merci.