Installation

Une fois que l'utilisateur installe votre PWA:

  • disposer d'une icône dans le lanceur d'applications, l'écran d'accueil, le menu Démarrer ou le pavé de lancement.
  • s'affichent lorsqu'un utilisateur recherche l'application sur son appareil ;
  • disposent d'une fenêtre distincte dans le système d'exploitation ;
  • être compatibles avec des fonctionnalités spécifiques ;

Critères d'installation

Chaque navigateur comporte un critère qui détermine si un site Web ou une application Web est une progressive web app et peut être installé pour une expérience autonome. Les métadonnées de votre PWA sont définies par un fichier JSON appelé "Web App Manifest", que nous aborderons en détail dans le prochain module.

Pour que l'installation puisse être installée, la plupart des navigateurs compatibles utilisent au minimum le fichier manifeste de l'application Web et certaines propriétés, telles que le nom de l'application et la configuration de l'expérience installée. Safari pour macOS fait exception à cette règle, qui n'est pas compatible avec l'installabilité.

La configuration requise pour permettre l'installation varie selon les navigateurs. Cet article détaille les critères de Google Chrome et inclut des liens vers les conditions requises pour les autres navigateurs.

Étant donné que le test de conformité d'une PWA aux exigences d'installation peut prendre plusieurs secondes, il est possible que l'installabilité proprement dite ne soit pas disponible dès la réception d'une réponse d'URL.

Installation sur ordinateur

L'installation d'une PWA de bureau est actuellement possible avec Google Chrome et Microsoft Edge sous Linux, Windows, macOS et les Chromebooks. Ces navigateurs affichent un badge d'installation (icône) dans la barre d'adresse (voir l'image ci-dessous), indiquant que le site actuel peut être installé.

Chrome et Edge sur ordinateur avec le badge d'installation dans la barre d'adresse

Lorsqu'un utilisateur interagit avec un site, il peut voir un pop-up, comme celui présenté ci-dessous, l'invitant à l'installer en tant qu'application.

Aide intégrée à Google Chrome suggérant l'installation de la PWA

Le menu déroulant du navigateur comprend également une option "Installer ". que l'utilisateur peut utiliser:

Éléments de menu Chrome et Edge pour l'installation de PWA.

Seuls les modes d'affichage autonome et minimal d'UI sont compatibles avec les systèmes d'exploitation de bureau.

PWA installées sur des ordinateurs de bureau:

  • Une icône apparaît dans le menu Démarrer ou l'écran de démarrage sur les PC Windows, dans le Dock ou le bureau dans les interfaces graphiques Linux, dans le lanceur d'applications macOS ou dans le lanceur d'applications d'un Chromebook.
  • Une icône apparaît dans les sélecteurs d'applications et les stations d'accueil lorsque l'application est active, a été utilisée récemment ou est ouverte en arrière-plan.
  • Figurer dans les résultats de recherche d'applications (par exemple, rechercher sous Windows ou Spotlight sur macOS)
  • Peuvent définir un numéro de badge sur leurs icônes pour indiquer les nouvelles notifications. Pour ce faire, utilisez l'API Badging.
  • Vous pouvez définir un menu contextuel pour l'icône à l'aide des raccourcis d'application.
  • Il ne peut pas être installé deux fois dans le même navigateur.

Après avoir installé une application sur le bureau, les utilisateurs peuvent accéder à about:apps, effectuer un clic droit sur une PWA, puis sélectionner "Démarrer l'application lors de la connexion" s'ils veulent que votre application s'ouvre automatiquement au démarrage.

Installation sur iOS et iPadOS

Le navigateur ne vous invite pas à installer votre PWA sur iOS ni iPadOS. Sur ces plates-formes, les PWA sont également appelées applications Web sur l'écran d'accueil. Ces applications doivent être ajoutées manuellement à l'écran d'accueil via un menu qui n'est disponible que dans Safari. Nous vous recommandons d'ajouter la balise apple-touch-icon à votre code HTML. Pour définir l'icône, incluez son chemin dans votre section HTML <head>, comme suit:

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari utilisera ces informations pour créer le raccourci. Si vous ne fournissez pas d'icône spécifique pour les appareils Apple, l'icône de l'écran d'accueil sera une capture d'écran de votre PWA lorsque l'utilisateur l'aura installée.

Il est important de comprendre que l'installation d'une PWA n'est possible que si l'utilisateur accède à votre site Web depuis Safari. Les autres navigateurs disponibles sur l'App Store, tels que Google Chrome, Firefox, Opera ou Microsoft Edge, ne peuvent pas installer de PWA sur l'écran d'accueil.

Pour ajouter des applications à l'écran d'accueil, procédez comme suit:

  1. Ouvrez le menu Partager, disponible en bas ou en haut du navigateur.
  2. Cliquez sur Ajouter à l'écran d'accueil.
  3. Confirmez le nom de l'application. le nom peut être modifié par l'utilisateur.
  4. Cliquez sur Ajouter. Sur iOS et iPadOS, les favoris vers des sites Web et des PWA ont le même aspect sur l'écran d'accueil.

Sur iOS et iPadOS, seul le mode d'affichage autonome est pris en charge. Par conséquent, si vous utilisez le mode d'interface utilisateur minimal, un raccourci est utilisé dans le navigateur : si vous utilisez le plein écran, il s'affichera en mode autonome.

PWA installées sur iOS et iPadOS:

  • Ces options s'affichent sur l'écran d'accueil, dans les résultats de recherche de Spotlight, les suggestions Siri et la bibliothèque d'applications.
  • n'apparaissent pas dans les dossiers de catégories de la galerie d'apps ;
  • Les fonctionnalités telles que les badges et les raccourcis d'application ne sont pas prises en charge.

À titre d'information, Safari utilise une technologie native appelée Web Clips (Extraits du Web) pour créer les icônes de PWA dans le système d'exploitation. Il s'agit simplement de fichiers XML au format de la liste des propriétés d'Apple stockés dans le système de fichiers.

Installation d'Android

Sur Android, les invites d'installation d'une PWA diffèrent selon l'appareil et le navigateur. Les utilisateurs peuvent voir:

  • Variantes dans la formulation de l'élément de menu d'installation, par exemple Installer ou Ajouter à l'écran d'accueil.
  • Boîtes de dialogue d'installation détaillées.

L'image suivante illustre deux versions différentes d'une boîte de dialogue d'installation : une mini-barre d'informations (à gauche) et une boîte de dialogue d'installation détaillée (à droite).

Mini-barre d&#39;informations et boîtes de dialogue d&#39;installation sur Android.

Selon l'appareil et le navigateur, votre PWA sera installée en tant que WebAPK, en tant que raccourci ou en tant que QuickApp.

WebAPKs

Un WebAPK est un package Android (APK) créé par un fournisseur de confiance de l'appareil de l'utilisateur, généralement dans le cloud, sur un serveur de minting WebAPK. Cette méthode est utilisée par Google Chrome sur les appareils sur lesquels les services Google Mobile sont installés et par le navigateur Internet Samsung, mais uniquement sur les appareils fabriqués par Samsung, comme les téléphones ou les tablettes Galaxy. Dans l'ensemble, cela représente la majorité des utilisateurs Android.

Lorsqu'un utilisateur installe une PWA à partir de Google Chrome et qu'un WebAPK est utilisé, le serveur de frappe "monte" (packages) et signe un APK pour la PWA. Ce processus prend du temps, mais lorsque l'APK est prêt, le navigateur installe l'application en mode silencieux sur l'appareil de l'utilisateur. Étant donné que des fournisseurs de confiance (Services Play ou Samsung) ont signé l'APK, le téléphone l'installe sans désactiver la sécurité, comme pour toute application provenant du Play Store. Il n'est pas nécessaire de télécharger l'application indépendamment.

PWA installées via WebAPK:

Raccourcis

Bien que les WebAPK offrent la meilleure expérience aux utilisateurs Android, ils ne peuvent pas toujours être créés. Dans le cas contraire, les navigateurs créent un raccourci vers le site Web. Comme Firefox, Microsoft Edge, Opera, Brave et Samsung Internet (sur des appareils autres que Samsung) ne disposent pas de serveurs de frappe de confiance, ils créent des raccourcis. Il en va de même pour Google Chrome si le service de frappe n'est pas disponible ou si votre PWA ne répond pas aux exigences d'installation.

PWA installées avec des raccourcis:

  • Afficher une icône portant le badge du navigateur sur l'écran d'accueil (voir les exemples suivants)
  • n'avez pas d'icône dans le Lanceur d'applications ni dans Paramètres > Applications ;
  • Impossible d'utiliser les fonctionnalités nécessitant une installation.
  • Impossible de modifier ses icônes et les métadonnées de l'application.
  • Peut être installé plusieurs fois, même avec le même navigateur. lorsque cela se produit, ils pointent tous vers la même instance et utilisent le même espace de stockage.

Une PWA installée avec différents navigateurs sur le même appareil.

QuickApps

Certains fabricants, dont Huawei et ZTE, proposent une plate-forme appelée QuickApps pour créer des applications Web légères semblables aux PWA, mais en utilisant une pile technologique différente. Certains navigateurs sur ces appareils, comme le navigateur Huawei, peuvent installer des PWA qui sont empaquetées sous la forme de QuickApp, même si vous n'utilisez pas la pile QuickApp.

Lorsque votre PWA est installée en tant que QuickApp, les utilisateurs bénéficient d'une expérience semblable à celle qu'ils pourraient avoir avec les raccourcis, mais avec une icône comportant l'icône QuickApps (un éclair). Vous pourrez également lancer l'application depuis le QuickApp Center.

QuickApps sur un écran d&#39;accueil Huawei ou ZTE.

Demande d'installation

Dans les navigateurs basés sur Chromium sur les ordinateurs et les appareils Android, il est possible d'ouvrir la boîte de dialogue d'installation du navigateur depuis votre PWA. Le chapitre Invite d'installation décrit les modèles permettant de le faire et leur implémentation.

Catalogues et plates-formes de téléchargement d'applications

Votre PWA peut également figurer dans les catalogues et sur les plates-formes de téléchargement d'applications afin d'élargir son audience et de permettre aux utilisateurs de la trouver au même endroit que les autres applications. La plupart des catalogues et des plates-formes de téléchargement d'applications sont compatibles avec des technologies qui vous permettent de publier un package qui n'inclut pas l'intégralité de l'application Web (votre code HTML et vos éléments, par exemple). Ces technologies vous permettent de créer simplement un lanceur d'applications pour un moteur de rendu Web autonome qui chargera l'application et laissera le service worker mettre en cache les éléments nécessaires.

Les catalogues et plates-formes de téléchargement d'applications compatibles avec la publication d'une PWA sont les suivants:

Si vous souhaitez en savoir plus sur la publication d'une PWA dans les catalogues et les plates-formes de téléchargement d'applications, consultez la CLI BubbleWrap et l'outil de création de PWA.

Ressources