2

Je suis en train de créer une application Web progressive. J'ai commencé avec le passe-partout de create-react-app. Ensuite, j'ai ajouté un manifeste d'application Web.Le site d'application Web progressive ne peut pas être installé: aucune icône disponible pour afficher

app/public/manifest.json

{ 
    "short_name": "First Contributions", 
    "name": "First Contributions", 
    "icons": [ 
     { 
      "src": "/android-chrome-192x192.png", 
      "sizes": "192x192", 
      "type": "image/png" 
     }, 
     { 
      "src": "/android-chrome-256x256.png", 
      "sizes": "256x256", 
      "type": "image/png" 
     } 
    ], 
    "theme_color": "#ffffff", 
    "background_color": "#ffffff", 
    "display": "standalone", 
    "start_url": "index.html" 
} 

lié à ce index.html

app/public/index.html

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 
    <title>First Contributions</title> 
    </head> 
    <body> 
    <div id="root"></div> 
     <script> 
     if ('serviceWorker' in navigator) { 
      navigator.serviceWorker.register('service-worker.js').catch(function(ex) { 
      console.warn(ex); 
      console.warn('(This warning can be safely ignored outside of the production build.)'); 
      }); 
     } 
     </script> 
    </body> 
    </html> 

J'ai généré des icônes en utilisant realfavicongenerator.net et les ai mises dans le répertoire public.

Je déploie mon application en utilisant gh-pages. Lorsque je tente de Add to homescreen, je reçois les erreurs suivantes

Je pense que je fais quelque chose de mal dans le webmanifest pour les icônes.

Répondre

3

Vos chemins d'icônes font référence au répertoire racine.

Remplacez "src": "/android-chrome-192x192.png", par "src": "android-chrome-192x192.png", (sans / au début).