Ajouter une icône Apple Touch à votre progressive web app

Kayce Basques

Les utilisateurs de Safari pour iOS peuvent ajouter manuellement des progressive web apps (PWA) à leur écran d'accueil. L'icône qui s'affiche sur l'écran d'accueil iOS lorsqu'une PWA est ajoutée s'appelle l'icône Apple pour les appareils tactiles. Cet atelier de programmation vous explique comment ajouter une icône tactile Apple à une PWA. Il suppose que vous avez accès à un appareil iOS.

Mesurer

Ouvrez l'application exemple dans un nouvel onglet:

  1. Cliquez sur Remixer pour modifier pour rendre le projet modifiable.

  2. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.

  3. Notez l'URL de votre application exemple. Elle ressemblera à https://example.glitch.me.

Exécutez un audit PWA Lighthouse sur votre application exemple dans Chrome DevTools:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
  2. Cliquez sur l'onglet Lighthouse (Phare).
  3. Assurez-vous que la case Progressive Web App est cochée dans la liste Catégories.
  4. Cliquez sur le bouton Générer un rapport.

Dans la section PWA optimisée, Lighthouse indique que l'application exemple ne fournit pas d'icône tactile Apple valide.

Ne fournit pas d'apple-touch-icon valide
Audit "Ne fournit pas d'icône Apple tactile valide"

Ajouter l'application exemple à un écran d'accueil iOS

Pour montrer comment une icône Apple Touch offre une expérience utilisateur plus soignée, essayez d'abord d'ajouter l'application exemple à l'écran d'accueil de votre appareil iOS lorsqu'aucune icône Apple Touch n'a été spécifiée.

  1. Ouvrez Safari pour iOS.
  2. Ouvrez l'URL de votre application exemple. Il s'agit de l'URL comme https://example.glitch.me que vous avez notée précédemment.
  3. Appuyez sur Partager Bouton "Partager" d'Apple > Ajouter à l'écran d'accueil. Vous devrez probablement balayer l'écran vers la gauche pour voir cette option.
  4. Appuyez sur Ajouter.

Comme le site n'a pas spécifié d'icône tactile Apple, iOS génère simplement une icône pour le site à partir du contenu de la page.

Icône d'écran d'accueil générée automatiquement.
Icône de l'écran d'accueil générée automatiquement.

Ajouter une icône tactile Apple à l'application exemple

  • Annulez la mise en commentaire de la balise <link rel="apple-touch-icon"> au bas de <head> de index.html.
    …
    <link rel="stylesheet" href="/index.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
    <!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
    <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
  </head>
  …

Ajouter l'application exemple à un écran d'accueil iOS (à nouveau)

  • Essayez d'ajouter à nouveau l'application exemple à un écran d'accueil iOS. Cette fois, une icône appropriée est générée pour le site. Si vous effectuez à nouveau un audit de la page avec Lighthouse, vous constaterez également que l'audit Ne fournit pas de apple-touch-icon valide est maintenant accepté.
Icône tactile Apple
Icône Apple pour les appareils tactiles.