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 d'iOS lorsqu'une PWA est ajoutée est appelée icône Apple Touch. Cet atelier de programmation vous explique comment ajouter une icône Apple Touch à une PWA. Nous partons du principe que vous avez accès à un appareil iOS.

Mesurer

Ouvrez l'application exemple dans un nouvel onglet:

  1. Cliquez sur Remix to Edit (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 devrait ressembler à ceci : https://example.glitch.me.

Exécutez un audit de PWA Lighthouse sur votre exemple d'application dans les outils pour les développeurs Chrome:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  2. Cliquez sur l'onglet Lighthouse.
  3. Assurez-vous que la case Progressive web app (Appli Web progressive) est cochée dans la liste Categories (Catégories).
  4. Cliquez sur le bouton Generate report (Générer un rapport).

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

Ne fournit pas de apple-touch-icon valide
L'audit Ne fournit pas d'audit apple-touch-icon valide

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

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

  1. Ouvrez Safari pour iOS.
  2. Ouvrez l'URL de votre exemple d'application. Il s'agit d'une URL de type https://example.glitch.me que vous avez notée précédemment.
  3. Appuyez sur Partager Bouton de partage 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 Apple Touch, iOS génère simplement une icône pour le site à partir du contenu de la page.

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

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

  • Annulez la mise en commentaire de la balise <link rel="apple-touch-icon"> en bas de la <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 (de nouveau) l'application exemple à un écran d'accueil iOS

  • Réessayez d'ajouter 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 auditez à nouveau la page avec Lighthouse, vous constaterez également que l'audit Ne fournit pas de apple-touch-icon valide réussit désormais.
Icône Apple Touch.
Icône Apple Touch.