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 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 personnaliser leur expérience. Pour capturer ces événements, vous pouvez utiliser des outils tels que les requêtes multimédias, les é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.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

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 à l'start_url de votre fichier manifeste que vous pouvez capturer avec des données analytiques pour suivre les statistiques sur le moment, la manière et l'intensité d'utilisation de votre PWA.

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. Ce gestionnaire d'événements est très utile pour 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 sur l'invite d'installation explique comment détecter si l'invite d'installation est disponible et quel choix l'utilisateur fait.

Transfert de session

Les utilisateurs peuvent utiliser votre PWA dans le navigateur et sous forme d'application autonome installée. 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é dans l'image suivante.

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

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

L'image suivante montre 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 PWA.

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.

Dans les navigateurs mobiles, la navigation actuelle reste dans le navigateur lorsque vous installez l'application. Si les utilisateurs souhaitent accéder à l'application, ils doivent l'ouvrir manuellement. Il s'agit 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 multimédia :

window.addEventListener('DOMContentLoaded', () => {
  // Replace "standalone" with the display mode used in your manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', () => {
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
    });
});

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 à l'écran d'accueil plusieurs fois, l'utilisateur dispose d'une session différente pour chaque instance de PWA.

Navigateurs pris en charge

  • Chrome: non compatible.
  • Edge : non compatible.
  • Firefox : non compatible.
  • Safari : non compatible.

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

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, les flux d'installation n'installent pas la PWA. Ils déclenchent plutôt une installation depuis le url ou le 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 passez à un nouvel 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. Si vous souhaitez promouvoir une PWA ou une autre application que vous avez publiée sur l'App Store, vous pouvez inclure des métabalises dans le code HTML de votre PWA pour inviter l'utilisateur à installer l'application (voir le lien fourni précédemment) 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/de bureau 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 par l'utilisateur ou la redirection de l'utilisateur directement vers l'application installée, au lieu d'accéder à un site Web à usage 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, en fonction de sa plate-forme, inclut des métadonnées pour 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

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

Ressources