2 votes

Page blanche sur mobile dans mon site web hébergé par Firebase

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.

Repo GitHub

1voto

fromanazzi Points 31

Il s'avère que c'était un extension redux devtools problème.

Je créais le magasin comme ça :

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

mais cela fonctionne :

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X