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:
Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
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:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Assurez-vous que la case Progressive web app (Appli Web progressive) est cochée dans la liste Categories (Catégories).
- 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.
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.
- Ouvrez Safari pour iOS.
- 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. - Appuyez sur Partager > Ajouter à l'écran d'accueil. Vous devrez probablement balayer l'écran vers la gauche pour voir cette option.
- 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.
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>
deindex.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.