De nombreuses améliorations peuvent améliorer les conversions et l'utilisation de votre PWA.
Raccourcis d'application
Les raccourcis d'application sont une liste statique de liens profonds vers votre PWA. Ils sont écrits dans votre fichier manifeste. Spécifications du fichier manifeste d'application Web : vous permet de définir une liste de raccourcis vers différentes parties ou fonctionnalités de votre PWA et d'accélérer la navigation vers les sections fréquemment consultées.
Les raccourcis d'application sont disponibles sur la plupart des systèmes d'exploitation de bureau et sur Android avec WebAPK. Ils apparaissent dans un menu contextuel sur l'icône de l'application dans l'écran d'accueil, le Dock ou la barre des tâches, comme illustré ci-dessous:
Pour accéder à ce menu, les utilisateurs doivent effectuer un clic droit ou appuyer de manière prolongée sur l'icône de la PWA.
Les raccourcis sont définis dans le membre shortcuts du fichier manifeste. Il prend un tableau de membres avec les propriétés suivantes :
name- Texte qui sera présenté à l'utilisateur, généralement dans un menu contextuel.
url- URL que la PWA doit charger lorsque l'utilisateur la lance à partir de ce raccourci. Il doit s'agir d'une URL comprise dans le champ d'application de votre PWA et d'un lien profond vers la fonctionnalité décrite par
nameoushort_name. short_name- (Facultatif) Nom plus court utilisé lorsqu'il n'y a pas assez d'espace pour afficher la valeur complète du champ
name. description- (Facultatif) Description de l'action effectuée par ce raccourci
icons- (Facultatif) Tableau d'objets d'icônes avec les champs
src,type,sizesetpurposefacultatifs, décrivant les images à utiliser pour représenter le raccourci
Vous devez considérer les raccourcis d'application comme une fonctionnalité de dernier recours. Cela signifie que vous ne pouvez pas vous attendre à ce que ces raccourcis s'affichent de manière cohérente. Même s'ils s'affichent, vous ne savez pas combien de raccourcis s'afficheront ni si la plate-forme ignorera les icônes, car cela dépend des navigateurs. Une discussion complète par plate-forme dépasse le cadre de cet article, mais vous trouverez ci-dessous une idée de son fonctionnement sur Android et sur ordinateur. Le meilleur moyen de gérer cette incertitude est de classer les éléments par priorité.
L'exemple de code suivant définit différents raccourcis d'application que vous pouvez essayer si vous installez l'application sur Android avec Chrome ou sur un ordinateur de bureau avec Edge ou Chrome.
iOS et iPadOS
Lorsque vous publiez des PWA, vous pouvez améliorer l'expérience des utilisateurs sur Safari sur iOS/iPadOS grâce à certaines améliorations.
Écrans de démarrage
Comme indiqué dans le chapitre sur le fichier manifeste d'application Web, Android crée automatiquement des écrans de démarrage en fonction des valeurs du fichier manifeste. Ce n'est pas le cas pour iOS et iPadOS. Sur ces appareils, vous devez définir les écrans de démarrage dans le code HTML en tant qu'images statiques à l'aide d'éléments <link>.
Ces images sont appelées "images de démarrage" sur les appareils Apple et utilisent la propriété rel avec la valeur apple-touch-startup-image, comme dans l'exemple suivant:
<link rel="apple-touch-startup-image" href="ios-startup.png">
Le problème est que l'image de démarrage doit avoir la taille de fenêtre exacte que votre PWA aura à l'ouverture. Par conséquent, vous devez utiliser des images différentes pour chaque appareil iOS et iPadOS. D'autres situations doivent être abordées sur l'iPad, comme les ouvertures en mode paysage/portrait et l'affichage de la PWA en mode multitâche (par exemple,1/3, 1/2 ou 2/3 de l'écran).
Vous pouvez consulter la liste mise à jour des tailles d'écran iOS et iPadOS sur le site Apple Human Interface Guidelines.
Vous pouvez définir différentes versions de l'image de lancement à l'aide d'une requête multimédia dans l'attribut media :
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
Modèles de conception pour les images de démarrage iOS
La définition d'images de démarrage est une tâche ardue. C'est pourquoi nous proposons plusieurs outils de génération et de configuration automatiques :
- La génération statique s'intègre à votre système de compilation, crée toutes les images statiques PNG et vous fournit le code HTML avec des éléments
<link>à injecter dans votre document. Le générateur d'éléments PWA est un exemple de ce type d'outil. - Générateur côté client, un outil JavaScript qui peut intégrer une ou plusieurs versions base64 de l'image de démarrage dans des éléments injectés
<link>en fonction du type et de la taille d'écran de l'appareil actuel. Vous pouvez utiliser un canevas en mémoire, afficher l'image et la convertir en URIdata:avec un fichier PNG. La bibliothèque de compatibilité PWA est une bibliothèque côté client facile à utiliser qui clone l'écran de démarrage typique d'Android.
Détecter une PWA sur les plates-formes mobiles Apple
Bien que vous deviez utiliser l'amélioration progressive et la détection de fonctionnalités dans votre PWA, il peut arriver que nous ayons besoin de savoir si l'utilisateur se trouve dans une PWA sur les plates-formes mobiles Apple, par exemple lorsque vous souhaitez proposer des instructions d'installation ou ajouter des liens vers des applications spécifiques à la plate-forme qui ne sont disponibles que sur iOS.
Pour éviter de lire la chaîne de l'user-agent, vérifiez la propriété standalone de l'objet navigator. Il s'agit d'une propriété non standard, qui n'est disponible que sur le moteur WebKit sur iOS et iPadOS.
- Si
navigator.standaloneest défini surundefined, cela signifie que l'utilisateur n'utilise pas d'appareil iPadOS ou iOS. - Si
navigator.standaloneest défini surfalse, cela signifie que l'utilisateur a ouvert la PWA dans le navigateur et l'utilise dans ce navigateur. - Si
navigator.standaloneest défini surtrue, cela signifie que l'utilisateur a ouvert la PWA à partir de l'écran d'accueil et qu'il bénéficie de l'expérience PWA autonome.
Compatibilité plein écran
Dans Safari sur iOS et iPad, seul display: standalone est accepté comme mode d'affichage pour votre PWA.
Dans l'image suivante, vous pouvez voir à gauche une conception autonome par défaut avec une couleur de thème, et à droite une PWA avec un mode iOS plein écran qui vous permet d'afficher du contenu derrière la barre d'état.
Si vous ajoutez la balise suivante à votre code HTML, votre PWA sur iOS et iPadOS passera en mode plein écran, mais ce n'est pas le cas pour Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Dans ce mode, la barre d'état de l'appareil (en haut, où vous pouvez voir l'horloge, le niveau de la batterie et les icônes de notification) est toujours visible, mais elle est affichée au-dessus de votre contenu avec un arrière-plan transparent.
Lorsque vous utilisez ce mode, faites attention à votre conception, car le système d'exploitation affiche toujours les icônes en blanc. Vous devez donc toujours contraster vos arrière-plans pour le haut de l'écran avec le contenu clair. Il est également important d'utiliser des variables d'environnement CSS pour afficher le contenu dans la zone de sécurité, comme indiqué dans le chapitre "Conception d'applications".
Fiabilité de l'installation
Sur les appareils iOS et iPadOS antérieurs à la version 15.4, le fichier manifeste n'est chargé à partir du réseau que lorsque l'utilisateur ouvre la feuille de partage (à l'aide de l'icône de partage dans le navigateur) et non lors du chargement de la page. Par conséquent, le navigateur ne vérifie pas si votre site Web est une PWA avant ce moment. Il peut donc arriver que le fichier manifeste ne puisse pas être chargé ou qu'il prenne trop de temps, et que le navigateur l'ignore.
Lorsque le navigateur ne parvient pas à charger le fichier manifeste à temps, l'icône "Ajouter à l'écran d'accueil" est placée sur l'écran d'accueil, mais ne fournit pas d'expérience d'application. Il s'agit simplement d'un raccourci vers un onglet du navigateur.