Détection

Vous pouvez détecter si l'utilisateur utilise votre PWA dans le navigateur ou en mode autonome. Dans les navigateurs basés sur Chromium (Android et ordinateur), vous pouvez également détecter les événements suivants:

• État et résultat de la boîte de dialogue d'invitation à l'installation
• Installation terminée.
• Transfert de la navigation du navigateur vers la fenêtre de la PWA, et inversement.
• État d'installation de la PWA.
• Application associée installée depuis une plate-forme de téléchargement d'applications.

Vous pouvez utiliser ces données à des fins d'analyse, pour comprendre les préférences de vos utilisateurs et pour personnaliser leur expérience. Pour capturer ces événements, vous pouvez utiliser des outils tels que des requêtes média, des événements de window ou les API de fonctionnalités listées ici.

Détection du mode d'affichage...

Pour suivre la manière dont les utilisateurs lancent votre PWA, vous pouvez utiliser matchMedia() afin de tester la requête média display-mode.

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

Si vous utilisez cet exemple, n'oubliez pas de faire correspondre le mode d'affichage du fichier manifeste de votre application Web (par exemple, standalone, minimal-ui ou fullscreen). Vous pouvez également mettre en correspondance plusieurs requêtes dans la chaîne de requête média en utilisant des conditions séparées par des virgules.

Vous pouvez également ajouter un paramètre de requête au fichier start_url de votre fichier manifeste, que vous pouvez capturer avec Analytics pour suivre les statistiques sur l'utilisation de votre PWA, de la manière dont elle est utilisée et à quel moment.

Installation d'applications

Lorsqu'un utilisateur accepte l'invite d'installation dans le navigateur, l'événement appinstalled se déclenche sur les navigateurs basés sur Chromium. L'utilisation de ce gestionnaire d'événements consiste à supprimer toute promotion d'installation dans l'application que vous avez ajoutée.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

N'oubliez pas que sur les appareils Android équipés de WebAPK, l'événement est déclenché lorsque l'utilisateur accepte la boîte de dialogue, et non après la création et l'installation du WebAPK. L'installation de l'application peut prendre quelques secondes.

Le chapitre Invite d'installation explique comment détecter si l'invite d'installation est disponible et le choix effectué par l'utilisateur.

Transfert de session

Les utilisateurs peuvent utiliser votre PWA dans le navigateur et dans le formulaire autonome installé. Sur les navigateurs pour ordinateur, vous pouvez transférer la navigation actuelle entre ces contextes à l'aide de badges ou d'éléments de menu, comme illustré dans l'image suivante.

Sur Android, un élément de menu semblable à celui disponible sur ordinateur dans le navigateur permet de transférer la navigation vers l'application. Dans ce cas, l'URL actuelle est ouverte, mais il s'agira d'une nouvelle navigation sur les pages dans l'application.

Dans l'image suivante, vous pouvez voir l'élément de menu dans Android lorsque l'application est déjà installée.

Transférer après l'installation

À partir d'un navigateur pour ordinateur, la navigation actuelle est immédiatement transférée vers l'application lors de l'installation. L'onglet du navigateur est fermé et l'application nouvellement installée s'ouvre, poursuivant ce que l'utilisateur était en train de faire.

Sur les navigateurs mobiles, votre navigation actuelle reste dans le navigateur lorsque vous installez l'application. Si les utilisateurs souhaitent passer à l'application, ils doivent l'ouvrir manuellement. Il s'agira alors d'une nouvelle navigation.

Détecter le transfert

Pour détecter le transfert entre le navigateur et la fenêtre, vous pouvez utiliser une requête média:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

Isolation du stockage iOS et iPadOS

Sur iOS et iPadOS, il n'y a pas de navigation ni de transfert d'URL entre le navigateur et l'icône installée. Même s'il s'agit de la même PWA, chaque icône de PWA installée par l'utilisateur dispose de son propre espace de stockage, isolé de l'onglet de Safari et des autres icônes. Lorsqu'un utilisateur ouvre l'icône installée, aucun espace de stockage n'est partagé avec Safari. Si votre PWA nécessite une connexion, l'utilisateur devra se reconnecter. Si l'application a été ajoutée plusieurs fois à l'écran d'accueil, l'utilisateur a une session différente pour chaque instance de PWA.

Applications associées

Un site Web indique une relation avec une application via le fichier manifeste. Pour ce faire, utilisez le membre related_applications de la spécification du fichier manifeste d'application Web. La clé related_applications est un tableau d'objets représentant chaque application associée. Chaque entrée contient platform, url et un id facultatif.

Voici les valeurs de plate-forme possibles:

• chrome_web_store: Google Chrome Web Store.
• play: applications Google Play (Android et ChromeOS).
• chromeos_play: ChromeOS Play.
• webapp: applications Web.
• windows: Microsoft Store (Windows 10 et 11).
• f-droid: F-droid.
• amazon: Amazon AppStore (FireOS).

Je préfère une appli associée

Lorsqu'un utilisateur installe une application, vous pouvez le rediriger vers une application associée si vous définissez le champ prefer_related_applications sur true dans votre fichier manifeste. Avec cette configuration, sur les navigateurs compatibles, le processus d'installation n'installe pas la PWA. Au lieu de cela, ils déclenchent une installation de magasin à partir de url ou id que vous avez spécifié dans l'entrée related_applications.

Il peut s'agir de votre PWA, qui sera installée via une plate-forme de téléchargement d'applications. L'un des avantages de cette configuration est qu'à l'heure actuelle, seules les applications installées via la plate-forme de téléchargement d'applications sont récupérées avec une sauvegarde ou lorsque vous changez d'appareil.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Apple Smart App Banners

Safari ne prend pas en charge le membre related_applications, mais propose des bannières intelligentes pour les applications de l'App Store. Ainsi, si vous souhaitez promouvoir une PWA ou une autre application que vous avez publiée sur l'App Store, vous pouvez inclure des balises Meta dans le code HTML de votre PWA pour inviter l'utilisateur à installer l'application (voir le lien fourni) ou transférer la navigation si elle est déjà installée.

Détecter les applications installées associées

La méthode getInstalledRelatedApps() permet à votre site Web de vérifier si votre application iOS/Android/pour ordinateur ou votre PWA est installée sur l'appareil de l'utilisateur.

Vérifier si une application associée est déjà installée vous permet d'implémenter des fonctionnalités telles que le masquage des invites personnalisées installées ou la redirection directe de l'utilisateur vers l'application installée, au lieu d'accéder à un site Web général. Pour utiliser la méthode getInstalledRelatedApps(), l'application installée et le site Web doivent tous deux configurer leur connexion. Chaque application, selon sa plate-forme, inclut des métadonnées permettant de reconnaître le site Web. Le site Web inclut l'application installée attendue dans le champ related_applications du fichier manifeste.

Des outils tels que BubbleWrap ou PWA Builder, qui vous permettent de publier votre PWA sur des plates-formes de téléchargement d'applications, ajoutent déjà les métadonnées requises pour que votre site Web puisse utiliser getInstalledRelatedApps() immédiatement. Pour détecter si une PWA est déjà installée à l'aide de getInstalledRelatedApps(), définissez webapp dans le champ related_applications du fichier manifeste avec l'URL de votre fichier manifeste:

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps() renvoie un tableau d'objets d'application. Si le tableau est vide, l'application associée n'est pas installée.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

Détecter l'installation en dehors du champ d'application de la PWA

À partir de Chrome sur Android 89, vous pouvez détecter si une PWA est installée, même en dehors du champ d'application de la PWA. Votre PWA doit définir un fichier JSON dans le dossier /.well-known/ et accorder l'autorisation à l'autre champ d'application, comme décrit dans cet article.

Ressources

• Votre application est-elle installée ? getInstallRelatedApps() vous le fera savoir !
• MDN: Applications associées
• MDN: événement d'installation de l'application
• Apple: Promouvoir des applications avec des bannières d'applications intelligentes