web-dev-qa-db-fra.com

Les icônes PWA ne sont pas utilisées dans iOS 11.3

Maintenant, je teste PWA sur iOS 11.3 et j'utilise le fichier manifest.json ci-dessous:

{
  "name": "Maplat PWA Sample",
  "short_name": "Maplat PWA",
  "background_color": "#fc980c",
  "icons": [{
    "src": "/Maplat/pwa/icon-96.png",
    "sizes": "96x96",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-144.png",
    "sizes": "144x144",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-256.png",
    "sizes": "256x256",
    "type": "image/png"
  }],
  "start_url": "/Maplat/debug.html?overlay=true",
  "display": "standalone"
}

Cela fonctionne bien sauf le réglage de l'icône. Dans mon iOS 11.3 sur iPhoneX, les fichiers d'icônes ne sont pas affichés sur l'écran d'accueil, mais la capture d'écran est utilisée comme bouton de lancement.

J'ai comparé mon manifeste avec d'autres sites, tels que https://www.ft.com/ ou https://r.nikkei.com/ , mais je ne pouvais pas trouver des différences dans les paramètres d'icône. Les icônes de ces sites fonctionnent bien avec PWA sur iOS 11.3.

Quel est le problème dans mon manifeste.json?

P.S. Mon manifest.json fonctionne bien avec Android Chrome.

mobile-safariprogressive-web-apps
21
kochizufan

Bien qu'iOS 11.3 prenne en charge les manifestes d'applications Web, il ne prend pas encore en charge la spécification d'icônes de cette manière. Vous voudrez l'inclure dans votre manifeste pour les autres appareils, mais au moins pour l'instant, vous devrez utiliser les éléments suivants pour iOS:

<link rel="Apple-touch-icon" sizes="180x180" href="icon.png">

Spécifiez la taille de l'icône et incluez une URL.

En savoir plus sur documentation Apple ici

Il existe également un site Web pour automatiser le processus lien ici

43
Terren

La réponse de TerPro est correcte, mais en guise de solution de rechange, vous pouvez placer un fichier nommé "/Apple-touch-icon.png" dans le répertoire racine.

6
DrinkOps