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 Il 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 les plus 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:

Raccourcis d'application dans Android et macOS.

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. Elle accepte 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 name ou short_name.
short_name
(Facultatif) Nom plus court utilisé lorsque l'espace est insuffisant pour afficher la valeur complète du champ name.
description
(Facultatif) Une description de ce que fera ce raccourci
icons
(Facultatif) Tableau d'objets "Icône" avec les champs src, type, sizes et les champs facultatifs purpose, décrivant les images qui doivent représenter le raccourci.

Vous devez considérer les raccourcis d'application comme une fonctionnalité optimale. Cela signifie que vous ne pouvez pas vous fier à ce que ces raccourcis s'affichent de manière cohérente, et même s'ils apparaissent, vous ne savez pas combien de raccourcis s'afficheront ou si la plate-forme ignorera les icônes, à la discrétion des navigateurs. Nous n'allons pas discuter de façon exhaustive par plate-forme, mais vous trouverez ci-dessous une idée de son fonctionnement sur Android et sur ordinateur. La meilleure façon de gérer cette incertitude est de classer les éléments par priorité.

L'exemple de code suivant définit les différents raccourcis d'application que vous pouvez essayer si vous installez l'application sur Android avec Chrome, ou sur ordinateur avec Edge ou Chrome.

iOS et iPadOS

Lors de la publication de PWA, certaines améliorations peuvent améliorer l'expérience des utilisateurs de Safari sur iOS/iPadOS.

É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">

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. Ainsi, différents appareils iOS et iPadOS auront besoin d'images différentes. 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.

Différentes versions de l'image de lancement peuvent être définies avec 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">

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

Définir des images de démarrage n'est pas une mince affaire. C'est pourquoi nous proposons 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 les é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 <link> a injecté des éléments en fonction du type et de la taille de l'écran de l'appareil actuel. Vous pouvez utiliser un canevas en mémoire, effectuer le rendu de 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 le fait en clonant l'écran de démarrage standard d'Android.

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

Même si vous devez 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 utilise une PWA sur des plates-formes mobiles Apple. Par exemple, vous pouvez fournir des instructions d'installation ou ajouter des liens vers des applications spécifiques à la plate-forme qui ne sont disponibles qu'iOS.

Pour éviter de lire la chaîne 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 dans le moteur WebKit sous iOS et iPadOS.

  • Si navigator.standalone est défini sur undefined, cela signifie que l'utilisateur n'utilise pas d'appareil iPadOS ou iOS.
  • Si navigator.standalone est défini sur false, cela signifie que l'utilisateur a ouvert la PWA dans le navigateur et l'utilise dans ce navigateur.
  • Si navigator.standalone est défini sur true, 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 compatible 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 le contenu derrière la barre d'état.

Un comportement par défaut autonome (à gauche) et un écran iOS en plein écran (à droite).

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 (la partie supérieure où sont affichées l'horloge, le niveau de batterie et les icônes de notification) reste visible, mais affichée au-dessus de votre contenu sur 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 sûre, comme indiqué dans le chapitre Conception de l'application.

Par défaut, le 0 px supérieur de votre fenêtre d&#39;affichage se trouve sous la barre d&#39;état. Si vous ajoutez une balise Meta translucide noire, le 0 px supérieur de votre fenêtre d&#39;affichage correspondra à la partie supérieure physique de l&#39;écran.

Fiabilité de l'installation

Sur iOS et iPadOS antérieurs à 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, ce qui peut entraîner des situations dans lesquelles le fichier manifeste ne peut pas être chargé ou prend trop de temps. 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 ne fournit pas d'expérience dans l'application ; ce sera simplement un raccourci vers un onglet Safari.

Ressources