web-dev-qa-db-fra.com

le simple remplacement d'icônes pour une application Web progressive entraîne une erreur dans le manifeste

J'avais généré un fichier manifeste avec des icônes, plus tard, j'ai décidé de simplement changer le dossier des icônes avec différentes icônes (en copiant et collant et en remplaçant) quand je l'ai fait, j'obtiens l'erreur suivante dans chrome devtools lorsque je clique sur Ajouter à l'écran d'accueil dans l'onglet Application:

Erreur lors de la tentative d'utilisation de l'icône suivante du manifeste: https://x.firebaseapp.com/icons/icon-144x144.png (la taille des ressources n'est pas correcte - faute de frappe dans le manifeste?) X .firebaseapp.com /: 1 Bannière d'application non affichée: aucune icône disponible à afficher

Cependant, sur chrome mobile, l'icône est mise à jour (confirmée en utilisant l'ajout à l'écran d'accueil)

{
  "name": "Duckr",
  "short_name": "Duckr",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "orientation": "portrait",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}
google-chromeweb-applicationsmanifestprogressive-web-apps
12
jasan

icons/icon-144x144.png l'image doit avoir une largeur de 144 pixels et une hauteur de 144 pixels

Vous pouvez vérifier votre manifeste dans l'onglet de votre application dans chrome inspect

https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#add-to-homescreen

7
Razi Kallayi

L'icône est-elle en fait 144 pixels sur 144 pixels? C'est ce que l'erreur me suggère.

1
Matt Gaunt

Je ne sais pas si c'est une bonne solution ou non, mais commenter les lignes suivantes a fonctionné pour moi:

 {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },

En tant que, j'ai vérifié dans le dossier d'images que l'image de la taille mentionnée n'était pas présente, ni l'image disponible de cette taille ni le commentaire de cette taille dans le manifeste.

0
Sunil Pandey

  1. La taille de l'image doit correspondre à la taille écrite dans manifest.json

  2. Si vous savez que la taille est correcte, essayez de renommer le fichier d'icônes et le nom d'icône dans manifest.json en quelque chose d'autre. Il y a une mise en cache "magie noire" (et CTRL-F5 ne fonctionnera pas). De cette façon, vous le forcez à penser qu'il a changé.

0
Morten_564834

si vous ne voulez pas voir cette erreur, allez dans votre dossier public puis dans votre index.html et supprimez ces liens si vous avez accidentellement supprimé l'icône d'image logo192.png ou ce lien manifest.json ou essayez de changer les tailles dans votre fichier manifest.json

0
Sodium United

Je ne vois aucune réponse qui résout votre commentaire, et je jouais également avec le manifeste de mon PWA et j'ai eu ce problème dans mes en-têtes de réponse de l'inspecteur d'élément.

GET http: //localhost/Android-icon-144x144.png 404 (Not Found) (index): 1 Erreur lors de la tentative d'utilisation de l'icône suivante du manifeste: http://localhost/Android-icon-144x144.png (Erreur de téléchargement ou la ressource n'est pas une image valide)

Et c'est juste que vous devez pointer votre image où se trouve votre favicon et changer dans ** manifest.json ** la clé:

"icons": [
    {
      "src": "/favicon/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
]

Et dans votre application, placez le chemin suivant.

<link rel="icons" type="image/png" sizes="144x144"  href="/favicon/Android-icon-144x144.png">

Si vous le faites avec un générateur de favicon, vous obtiendrez les différents rel comme ceci:

<link rel="icon" type="image/png" sizes="144x144"  href="/favicon/Android-icon-144x144.png">
0
H4NS3L