Retouches

De nombreuses améliorations peuvent améliorer la conversion 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écification du fichier manifeste d'application Web : elle vous permet de définir une liste de raccourcis vers différentes parties ou fonctionnalités de votre PWA. Ces raccourcis permettent 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 Android avec WebAPK. Ils apparaissent dans un menu contextuel sur l'icône de l'application sur 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.

Remarque : Les raccourcis d'application ne sont disponibles que si l'utilisateur installe votre PWA.

Avertissement : Une fois que l'utilisateur a installé votre PWA, vous ne pouvez plus ajouter ni supprimer de raccourcis tant que vous n'avez pas mis à jour votre fichier manifeste sur le serveur et que l'algorithme de mise à jour n'a pas été déclenché.

Les raccourcis sont définis dans le membre shortcuts du fichier manifeste. Elle utilise un tableau de membres ayant 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 faisant partie du champ d'application de votre PWA, ainsi que d'un lien profond vers la fonctionnalité décrite par name ou short_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 de ce raccourci

icons

(Facultatif) Tableau d'objets d'icône avec src, type, sizes et des champs purpose facultatifs décrivant les images qui doivent représenter le raccourci.

Vous devez considérer les raccourcis d'application comme une aptitude au mieux. Cela signifie que vous ne pouvez pas compter sur ces raccourcis pour qu'ils s'affichent de manière cohérente. Même s'ils apparaissent, vous ne savez pas combien de raccourcis s'afficheront ou si la plate-forme ignorera les icônes, à la seule discrétion des navigateurs. Une discussion complète par plate-forme n'entre pas dans le cadre, mais vous trouverez ci-dessous une idée de son fonctionnement sur Android et sur ordinateur. Le meilleur moyen de faire face à cette incertitude est de classer les éléments par priorité.

Attention : Chrome et Edge sur ordinateur affichent les 10 premiers éléments, tandis que Chrome sur Android n'affiche que les trois premiers raccourcis dans la liste du fichier manifeste. Il est donc préférable de les classer par priorité. Chrome sur Android permet également d'accéder aux sections "Infos sur l'appli" et "Paramètres des sites" depuis le menu, après votre liste personnalisée.

Remarque : Si vous publiez votre PWA dans des catalogues et des plates-formes de téléchargement d'applications, vous pouvez convertir les raccourcis du fichier manifeste en implémentations spécifiques à la plate-forme à l'aide d'API propres à chaque système d'exploitation, comme les actions rapides sur iOS et les raccourcis sur Android. BubbleWrap est compatible avec les raccourcis d'application pour Android et ChromeOS, ainsi que PWA Builder pour Android, ChromeOS, iOS et iPadOS.

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 avec Edge ou Chrome.

iOS et iPadOS

Lors de la publication de PWA, certaines améliorations peuvent être apportées à l'expérience des utilisateurs de Safari sur iOS/iPadOS.

Avertissement : Comme indiqué dans les chapitres précédents, les PWA sur iOS et iPadOS ne peuvent être installées qu'à partir de Safari. Les autres navigateurs ne peuvent pas installer de PWA depuis l'écran d'accueil.

Écrans de démarrage

Comme indiqué dans le chapitre "Fichier manifeste de l'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. Elles 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">

La difficulté réside dans le fait que l'image de démarrage doit avoir la même taille de fenêtre que celle de votre PWA à l'ouverture. Chaque appareil iOS ou iPadOS aura donc besoin d'images différentes. D'autres situations doivent être couvertes sur l'iPad, comme les ouvertures en mode paysage/portrait ou 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 à jour des tailles d'écran iOS et iPadOS sur le site Apple Human Interface Guidelines.

Différentes versions de l'image de lancement peuvent être définies à l'aide d'une requête mé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">

Avertissement : Si vous souhaitez fournir toutes les options possibles entre les définitions d'écran, l'orientation et le mode multitâche, vous vous retrouverez avec plus de 25 images différentes que vous devrez créer et associer dans votre code HTML. Si vous ne fournissez pas d'image de démarrage dans le contexte iOS ou iPadOS de l'utilisateur, un écran blanc s'affiche dans l'animation d'ouverture, pendant le chargement de la PWA.

Modèles de conception pour les images de démarrage iOS

Définir des images de démarrage est une tâche difficile. Nous disposons donc de deux outils pour automatiser la génération et la configuration:

• 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 de PWA en est un exemple.
• Générateur côté client : outil JavaScript permettant d'intégrer une ou plusieurs versions base64 de l'image de démarrage dans les éléments injectés par <link> en fonction du type et de la taille de l'écran de l'appareil actuel. Vous pouvez utiliser un canevas en mémoire, afficher l'image et la convertir en URI data: avec un fichier PNG. La bibliothèque PWA Compat est une bibliothèque côté client facile à utiliser qui effectue cette opération en clonant l'écran de lancement standard d'Android.

Détecter une PWA sur les plates-formes mobiles Apple

Vous devez utiliser l'amélioration progressive et la détection de fonctionnalités dans votre PWA. Toutefois, dans certains cas particuliers, nous avons besoin de savoir si l'utilisateur utilise une PWA sur les plates-formes mobiles Apple, par exemple lorsque vous souhaitez fournir des instructions d'installation ou ajouter des liens vers des applications spécifiques à la plate-forme qui sont uniquement disponibles sur iOS.

Pour éviter de lire la chaîne user-agent, vérifiez la propriété standalone de l'objet navigator. Cette propriété non standard n'est disponible que dans le moteur WebKit sur iOS et iPadOS.

• Si navigator.standalone est défini sur undefined, cela signifie que l'utilisateur n'utilise pas un appareil iPadOS ou iOS.
• Si navigator.standalone est défini sur false, cela signifie que l'utilisateur a ouvert la PWA dans le navigateur pour l'utiliser.
• Si navigator.standalone est défini sur true, cela signifie que l'utilisateur a ouvert la PWA depuis l'écran d'accueil et qu'il bénéficie de l'expérience de PWA autonome.

Compatibilité plein écran

Dans Safari sur iOS et iPad, seul display: standalone est accepté comme mode d'affichage de l'icône de votre PWA. Bien que display: fullscreen ne soit pas compatible avec les appareils Android, il est possible d'utiliser une balise Meta non standard pour que votre PWA passe en mode plein écran.

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 dans votre code HTML, votre PWA sur iOS et iPadOS passe en mode plein écran, mais il est différent de celui sur 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ù se trouvent l'horloge, le niveau de batterie et les icônes de notification) reste visible, mais superposée à votre contenu sur un arrière-plan transparent.

Avertissement : Dans ce mode, la couleur du thème est ignorée, et la barre de notification s'affiche sur un arrière-plan transparent. De plus, le pixel [0, 0] de votre application est désormais le pixel [0, 0] de l'écran physique, et non après la zone de sécurité.

Lorsque vous utilisez ce mode, faites attention à votre conception, car le système d'exploitation affichera toujours les icônes en blanc. Vous devez donc toujours contraster les arrière-plans en haut de l'écran avec du 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é au chapitre consacré à la conception de l'application.

Fiabilité de l'installation

Sur iOS et iPadOS antérieures à la version 15.4, Safari ne charge le fichier manifeste à 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, Safari ne vérifie pas si votre site Web est une PWA avant ce moment-là. Il peut donc arriver que le fichier manifeste ne puisse pas être chargé ou qu'il prenne trop de temps. Par conséquent, Safari l'ignore.

Lorsque Safari ne parvient pas à charger le fichier manifeste à temps, appuyer sur "Ajouter à l'écran d'accueil" place une icône sur l'écran d'accueil, mais n'offre pas d'expérience dans l'application. Il s'agira simplement d'un raccourci vers un onglet Safari.

Avertissement : Si Safari ne parvient pas à charger le fichier manifeste, il vérifie si votre PWA contient des balises Meta obsolètes, telles que apple-mobile-web-app-capable. Vous ne devez pas utiliser ces balises Meta. Elles offrent une expérience utilisateur sur l'écran d'accueil sans attributs essentiels à votre PWA (par exemple, en respectant les attributs start_url ou scope), ce qui nuit à l'expérience dans l'application.

Ressources

• Générateur d'éléments PWA
• Accomplissez vos tâches rapidement avec les raccourcis d'applications
• Bibliothèque PWA Compat
• Définir les raccourcis d'application