Installation

Une fois que l'utilisateur aura installé votre PWA:

  • avoir une icône dans le lanceur d'applications, l'écran d'accueil, le menu Démarrer ou le lanceur.
  • Ces liens s'affichent dans les résultats lorsqu'un utilisateur recherche l'application sur son appareil.
  • avoir une fenêtre distincte dans le système d'exploitation ;
  • bénéficier d'une assistance pour des fonctionnalités spécifiques ;

Critères d'installation

Chaque navigateur est associé à 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é "fichier manifeste d'application Web". Nous le verrons en détail dans le module suivant.

Pour qu'elle soit facile à installer, la plupart des navigateurs compatibles utilisent 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, qui ne permet pas l'installation, fait exception à cette règle.

La configuration requise pour permettre l'installation varie selon les navigateurs. Consultez cet article pour connaître les critères à respecter pour Google Chrome et inclure des liens vers les exigences des autres navigateurs.

Étant donné que le test permettant de vérifier qu'une PWA répond aux exigences d'installation peut prendre plusieurs secondes, l'installation proprement dite peut ne pas être disponible dès que la réponse de l'URL est reçue.

Installation sur ordinateur

L'installation de PWA de bureau est actuellement possible avec Google Chrome et Microsoft Edge sous Linux, Windows, macOS et les Chromebooks. Ces navigateurs afficheront un badge d'installation (icône) dans la barre d'adresse (voir l'image ci-dessous), indiquant que le site actuellement disponible 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, un pop-up tel que celui présenté ci-dessous peut s'afficher, l'invitant à l'installer en tant qu'application.

Aide intégrée au produit Google Chrome pour suggérer l'installation d'une PWA.

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

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

Seuls les modes d'affichage autonomes et d'interface utilisateur minimale sont compatibles avec les systèmes d'exploitation d'ordinateur de bureau.

PWA installées sur les ordinateurs:

  • afficher une icône dans le menu Démarrer ou sur l'écran de démarrage sur les PC Windows, sur le dock ou le bureau dans les IUG Linux, dans le lanceur d'applications de macOS ou dans le lanceur d'applications d'un Chromebook.
  • afficher une icône dans les sélecteurs et les stations d'accueil lorsque l'application est active, récemment utilisée ou ouverte en arrière-plan ;
  • apparaître dans les résultats de recherche d'applications (par exemple, en effectuant une recherche sur Windows ou Spotlight sous macOS).
  • Possibilité de 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 grâce à des raccourcis d'application.
  • Ils ne peuvent pas être installés deux fois avec le même navigateur.

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

Installation d'iOS et d'iPadOS

L'invite d'installation de votre PWA n'est pas proposée dans le navigateur sur iOS et iPadOS. Sur ces plates-formes, les PWA sont également appelées applications Web d'écran d'accueil. Ces applications doivent être ajoutées manuellement à l'écran d'accueil via un menu disponible uniquement dans Safari. Nous vous recommandons d'ajouter la balise apple-touch-icon à votre code HTML. Pour définir l'icône, incluez le chemin d'accès à votre icône dans votre section <head> HTML, comme ceci:

<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 une fois installée par l'utilisateur.

Il est important de comprendre que l'installation de PWA n'est disponible 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. Il est modifiable par l'utilisateur.
  4. Cliquez sur Ajouter. Sur iOS et iPadOS, les favoris vers des sites Web et les PWA s'affichent de la même manière sur l'écran d'accueil.

Sur iOS et iPadOS, seul le mode d'affichage autonome est compatible. Par conséquent, si vous utilisez le mode d'interface utilisateur minimal, un raccourci du navigateur sera utilisé. Si vous utilisez le plein écran, le mode autonome sera rétabli.

PWA installées sur iOS et iPadOS:

  • Apparaître sur l'écran d'accueil, dans les résultats de recherche de Spotlight, dans les suggestions Siri et dans la bibliothèque d'applications.
  • n'apparaissent pas dans les dossiers de catégories de la galerie d'applications ;
  • La prise en charge de fonctionnalités telles que les badges et les raccourcis d'application n'est pas assurée.

À titre d'information, Safari utilise une technologie native appelée 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 Property List 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 de formulation de l'élément de menu pour l'installation, comme Installer ou Ajouter à l'écran d'accueil
  • Boîtes de dialogue d'installation détaillées

L'image ci-dessous présente deux versions différentes d'une boîte de dialogue d'installation : une mini-barre d'informations simple (à 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, raccourci ou 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 gestion de WebAPK. Cette méthode est utilisée par Google Chrome sur les appareils sur lesquels les services Google Mobile (GMS) sont installés et par le navigateur Internet Samsung, mais uniquement sur les appareils Samsung, tels qu'un téléphone ou une tablette Galaxy. C'est la majorité d'entre eux qui utilisent Android.

Lorsqu'un utilisateur installe une PWA à partir de Google Chrome et qu'un WebAPK est utilisé, le serveur de génération note (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 l'APK Web:

Raccourcis

Bien que les WebAPK offrent une expérience optimale aux utilisateurs d'Android, il n'est pas toujours possible de les créer. Dans le cas contraire, les navigateurs se rabattent sur la création d'un raccourci vers le site Web. Comme Firefox, Microsoft Edge, Opera, Brave et Samsung Internet (sur les appareils autres que Samsung) ne possèdent pas de serveurs de confiance, ils créeront des raccourcis. Google Chrome peut aussi l'utiliser si le service de frappe est indisponible ou si votre PWA ne répond pas aux exigences d'installation.

PWA installées avec des raccourcis:

  • afficher une icône portant un badge de navigateur sur l'écran d'accueil (voir les exemples suivants).
  • Aucune icône n'apparaît dans le Lanceur d'applications ni sous Paramètres > Applications.
  • Impossible d'utiliser les fonctionnalités qui nécessitent une installation.
  • Impossible de modifier les icônes et les métadonnées de l'application.
  • Elles peuvent être installées plusieurs fois, même à l'aide du même navigateur. Dans ce cas, elles pointeront toutes vers la même instance et utiliseront 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, qui permet de créer des applications Web légères semblables aux PWA, mais utilisant une pile technologique différente. Certains navigateurs sur ces appareils, comme le navigateur Huawei, peuvent installer des PWA empaquetées en tant que 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 dont ils bénéficieraient avec les raccourcis, mais avec une icône accompagnée de l'icône QuickApps (une image en forme d'éclair). L'application pourra également être lancée depuis QuickApp Center.

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

Demander l'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 à partir de votre PWA. Le chapitre Invite d'installation présente les modèles permettant de procéder à cette opération et la façon de les mettre en œuvre.

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

Votre PWA peut également être listée dans les catalogues et les plates-formes de téléchargement d'applications pour élargir sa couverture et permettre aux utilisateurs de la trouver là où ils trouvent d'autres applications. La plupart des catalogues et plates-formes de téléchargement d'applications sont compatibles avec des technologies qui vous permettent de publier un package n'incluant pas l'intégralité de l'application Web (comme votre code HTML et vos éléments). Ces technologies vous permettent de créer uniquement un lanceur pour un moteur de rendu Web autonome qui charge l'application et permet au service worker de mettre en cache les éléments nécessaires.

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

Pour savoir comment publier une PWA dans des catalogues d'applications et des plates-formes de téléchargement d'applications, consultez la CLI BubbleWrap et PWA Builder.

Ressources