Détection

Vous pouvez détecter si l'utilisateur utilise votre PWA dans le navigateur ou en mode autonome. Sur 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 entre le navigateur et la fenêtre de la PWA, et inversement.
  • État de l'installation d'une PWA.
  • Une 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 les requêtes média, les événements de window ou les API de capacités que vous trouverez répertoriées ici.

Détecter le mode d'affichage

Pour suivre la façon dont les utilisateurs lancent votre PWA, vous pouvez tester la requête média display-mode à l'aide de matchMedia().

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 d'utiliser le même mode d'affichage que dans le fichier manifeste de votre application Web (standalone, minimal-ui ou fullscreen, par exemple). 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 à l'élément start_url de votre fichier manifeste. Vous pouvez le capturer avec des données analytiques pour suivre des statistiques indiquant quand, comment et dans quelle mesure votre PWA est utilisée.

Installation d'applications

Lorsqu'un utilisateur accepte l'invite d'installation dans le navigateur, l'événement appinstalled se déclenche sur les navigateurs Chromium. Ce gestionnaire d'événements peut s'avérer très utile pour supprimer toute promotion que vous avez ajoutée à l'installation via l'application.

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 dotés de WebAPK, l'événement est déclenché lorsque l'utilisateur accepte la boîte de dialogue, et non après l'enregistrement et l'installation du WebAPK. L'installation complète de l'application peut prendre quelques secondes.

Le chapitre "Invite d'installation" explique comment détecter si l'invite d'installation est disponible et la décision prise par l'utilisateur.

Transfert de session

Les utilisateurs peuvent utiliser votre PWA dans le navigateur et dans le formulaire autonome installé. Dans 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é ci-dessous.

Transfert de navigation entre un onglet de navigateur et une fenêtre de PWA.

Sur Android, il existe un élément de menu semblable à celui sur ordinateur du navigateur qui transfère la navigation vers l'application. Dans ce cas, l'URL actuelle est ouverte, mais il s'agit d'une nouvelle navigation sur les pages dans l'application.

Sur l'image ci-dessous, vous pouvez voir l'élément de menu dans Android lorsque l'application est déjà installée.

Chrome sur Android affiche un élément de menu permettant d'ouvrir une nouvelle navigation dans une fenêtre de PWA.

Transférer après l'installation

Dans les navigateurs 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 que vous venez d'installer s'ouvre, ce qui permet à l'utilisateur de continuer à l'utiliser.

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, et il s'agira 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 de l'espace de 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 possè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.

Navigateurs pris en charge

  • x
  • 79
  • x
  • x

Source

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).

Lorsque l'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, les flux d'installation n'installent pas la PWA. À la place, ils déclenchent une installation de store à partir de url ou id que vous avez spécifié dans l'entrée related_applications.

L'application associée peut être votre PWA. Elle sera installée via une plate-forme de téléchargement d'applications. L'un des avantages de cette configuration est que, pour le moment, 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
}

Bannières d'applications intelligentes Apple

Safari ne prend pas en charge le membre related_applications, mais propose des bannières d'application intelligente 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 afin d'inviter l'utilisateur à installer l'application (voir le lien qui vient d'être fourni), ou transférer la navigation si elle est déjà installée.

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 aide à implémenter des fonctionnalités telles que le masquage des invites installées personnalisées ou la redirection de l'utilisateur directement vers l'application installée, au lieu d'accéder à un site Web généraliste. Pour utiliser la méthode getInstalledRelatedApps(), l'application installée et le site Web doivent configurer leur connexion l'un avec l'autre. Chaque application, en fonction de sa plate-forme, inclut des métadonnées permettant de reconnaître le site Web, et 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 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

Dans Chrome sur Android 89, vous pouvez détecter si une PWA est installée, même hors de son champ d'application. Votre PWA doit définir un fichier JSON dans le dossier /.well-known/, accordant ainsi l'autorisation à l'autre champ d'application, comme décrit dans cet article.

Ressources