Erkennung

Sie können feststellen, ob der Nutzer Ihre PWA im Browser oder im eigenständigen Modus verwendet. In Chromium-basierten Browsern (Android und Computer) können Sie außerdem die folgenden Ereignisse erkennen:

• Status und Ergebnis des Dialogfelds für die Einladung zur Installation.
• Installation abgeschlossen.
• Die Navigation wird vom Browser zum PWA-Fenster und umgekehrt übertragen.
• PWA-Installationsstatus.
• Ähnliche App, die aus einem App-Shop installiert wurde

Sie können diese Daten für Analysen verwenden, um die Präferenzen Ihrer Nutzer zu verstehen und sie anzupassen. Zum Erfassen dieser Ereignisse können Sie Tools wie Medienabfragen, Ereignisse aus dem window oder die hier aufgeführten Capabilities APIs verwenden.

Anzeigemodus wird erkannt

Wenn Sie wissen möchten, wie Nutzer Ihre PWA starten, können Sie die Medienabfrage display-mode mit matchMedia() testen.

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);
});

Wenn du dieses Beispiel verwendest, musst du den Anzeigemodus deines Web-App-Manifests anpassen, z. B. standalone, minimal-ui oder fullscreen. Sie können auch mehrere Abfragen im Medienabfragestring mithilfe von durch Kommas getrennten Bedingungen abgleichen.

Sie können dem start_url Ihres Manifests auch einen Abfrageparameter hinzufügen, den Sie mit Analytics erfassen können, um Statistiken dazu zu erfassen, wann, auf welche Weise und wie häufig Ihre PWA verwendet wird.

App-Installation

Wenn ein Nutzer die Installationsaufforderung im Browser akzeptiert, wird das Ereignis appinstalled in Chromium-basierten Browsern ausgelöst. Dieser Event-Handler eignet sich gut, um alle von Ihnen hinzugefügten Werbeaktionen für In-App-Installationen zu entfernen.

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

Denken Sie daran: Auf Android-Geräten mit WebAPK wird das Ereignis ausgelöst, wenn der Nutzer das Dialogfeld akzeptiert und nicht, nachdem das WebAPK erstellt und installiert wurde. Es kann einige Sekunden dauern, bis die App vollständig installiert ist.

Im Kapitel zur Installationsaufforderung wird erläutert, wie Sie feststellen können, ob eine Aufforderung zur Installation verfügbar ist, und welche Auswahl der Nutzer trifft.

Sitzungsübertragung

Nutzer können Ihre PWA im Browser und im installierten eigenständigen Formular verwenden. In Desktop-Browsern können Sie die aktuelle Navigation zwischen diesen Kontexten mithilfe von Badges oder Menüelementen übertragen, wie in der folgenden Abbildung dargestellt.

Auf Android-Geräten gibt es einen Menüpunkt ähnlich dem auf dem Desktop-Browser, über den die Navigation an die App übertragen wird. In diesem Fall wird die aktuelle URL geöffnet, es handelt sich jedoch um eine neue Seitennavigation in der App.

In der folgenden Abbildung sehen Sie den Menüpunkt in Android, wenn die App bereits installiert ist.

Übertragung nach der Installation

In Desktop-Browsern wird die aktuelle Navigation bei der Installation sofort in die App übertragen. Der Browsertab wird geschlossen und die neu installierte App wird geöffnet.

In mobilen Browsern bleibt die aktuelle Navigation im Browser, während Sie die App installieren. Wenn die Nutzenden zu der App wechseln möchten, müssen sie die App manuell öffnen und es wird eine neue Navigation angezeigt.

Übertragung erkennen

Um die Übertragung zwischen Browser und Fenster zu erkennen, können Sie eine Medienabfrage verwenden:

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);
    });
});

iOS- und iPadOS-Speicherisolation

Unter iOS und iPadOS erfolgt keine Navigation oder URL-Übertragung zwischen dem Browser und dem installierten Symbol. Selbst wenn es sich um dieselbe PWA handelt, hat jedes PWA-Symbol, das der Nutzer installiert, einen eigenen Speicherplatz, der vom Safari-Tab und anderen Symbolen isoliert ist. Wenn ein Nutzer das installierte Symbol öffnet, wird kein Speicher für Safari freigegeben. Wenn für Ihre PWA eine Anmeldung erforderlich ist, müssen sich die Nutzer noch einmal anmelden. Wenn die App dem Startbildschirm mehrmals hinzugefügt wurde, hat der Nutzer für jede PWA-Instanz eine andere Sitzung.

Ähnliche Apps

Eine Website gibt über das Manifest eine Beziehung zu einer App an. Verwenden Sie dazu das related_applications-Mitglied der Spezifikation „Web-App-Manifest“. Der Schlüssel related_applications ist ein Array von Objekten, die jede verwandte Anwendung darstellen. Jeder Eintrag enthält platform, url und einen optionalen id.

Dies sind die möglichen Plattformwerte:

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

Ähnliche App bevorzugen

Wenn der Nutzer eine App installiert, kannst du ihn zu einer ähnlichen App weiterleiten, wenn du das Feld prefer_related_applications in deinem Manifest auf true setzt. Bei dieser Einrichtung wird die PWA in kompatiblen Browsern nicht über den Installationsablauf installiert. Stattdessen lösen sie eine Speicherinstallation aus dem url oder id aus, den Sie im Eintrag related_applications angegeben haben.

Die zugehörige Anwendung könnte Ihre PWA sein. Sie wird über einen App-Shop installiert. Ein Vorteil dieser Konfiguration besteht darin, dass derzeit nur Apps, die über den App Store installiert wurden, mit einer Sicherung oder beim Wechsel zu einem neuen Gerät wiederhergestellt werden können.

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

Apple Smart App-Banner

Safari unterstützt das related_applications-Mitglied nicht, bietet aber Smart App-Banner für Apps im App Store an. Wenn Sie also eine PWA oder eine andere App bewerben möchten, die Sie im App Store veröffentlicht haben, können Sie Meta-Tags in den HTML-Code Ihrer PWA einfügen, um den Nutzer dazu aufzufordern, die App zu installieren (siehe Link oben) oder die Navigation übertragen, falls sie bereits installiert ist.

Zugehörige installierte Apps werden ermittelt

Mit der getInstalledRelatedApps()-Methode kann Ihre Website prüfen, ob Ihre iOS-, Android- oder Desktop-App oder PWA auf dem Gerät des Nutzers installiert ist.

Die Überprüfung, ob eine zugehörige App installiert ist, hilft dir bereits dabei, Funktionen wie das Ausblenden benutzerdefinierter Aufforderungen oder die direkte Weiterleitung zur installierten App zu implementieren, anstatt eine allgemeine Website aufzurufen. Wenn Sie die Methode getInstalledRelatedApps() verwenden möchten, müssen sowohl die installierte App als auch die Website ihre Verbindung konfigurieren. Jede App enthält je nach Plattform Metadaten zur Erkennung der Website. Die Website enthält die erwartete installierte App im Feld related_applications des Manifests.

Tools wie BubbleWrap oder PWA Builder, mit denen Sie Ihre PWA in App-Shops veröffentlichen können, fügen bereits die erforderlichen Metadaten hinzu, damit Ihre Website getInstalledRelatedApps() sofort verwenden kann. Wenn Sie herausfinden möchten, ob eine PWA bereits mit getInstalledRelatedApps() installiert ist, definieren Sie webapp im Manifestfeld related_applications mit der URL zu Ihrem Manifest:

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

getInstalledRelatedApps() gibt ein Array von App-Objekten zurück. Wenn das Array leer ist, ist die zugehörige App nicht installiert.

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

Installation von außerhalb des Geltungsbereichs der PWA erkennen

In Chrome unter Android 89 können Sie erkennen, ob eine PWA installiert ist – auch dann, wenn sie nicht in ihrem Geltungsbereich liegt. Ihre PWA muss eine JSON-Datei im Ordner /.well-known/ festlegen, um dem anderen Bereich die Berechtigung zu erteilen, wie in diesem Artikel beschrieben.

Ressourcen

• Ist Ihre App installiert? getinstalledRelatedApps() – das verrät es dir!
• MDN: Related Applications
• MDN: Appinstalled-Ereignis
• Apple: Apps mit Smart App-Bannern bewerben