Erkennung

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

  • Status und Ergebnis des Dialogfelds für die Installationseinladung.
  • Installation abgeschlossen.
  • Navigationsübertragung vom Browser zum PWA-Fenster und umgekehrt.
  • PWA-Installationsstatus.
  • Ähnliche App, die über einen App-Shop installiert wurde.

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

Anzeigemodus wird erkannt

Wenn Sie wissen möchten, wie Nutzer Ihre PWA starten, können Sie mit matchMedia() die Medienabfrage display-mode 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 Sie dieses Beispiel verwenden, denken Sie daran, den Anzeigemodus aus dem Manifest Ihrer Web-App abzugleichen, z. B. standalone, minimal-ui oder fullscreen. Sie können auch mehrere Abfragen im Medienabfragestring mithilfe von durch Kommas getrennten Bedingungen abgleichen.

Sie haben auch die Möglichkeit, dem start_url Ihres Manifests einen Abfrageparameter hinzuzufügen, den Sie mit Analysen erfassen können, um Statistiken darüber 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 appinstalled-Ereignis in Chromium-basierten Browsern ausgelöst. Dieser Event-Handler kann sehr nützlich sein, 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 sich feststellen lässt, ob die Installationsaufforderung verfügbar ist, und welche Auswahl der Nutzer trifft.

Sitzungsübertragung

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

Navigationsübertragung zwischen einem Browsertab und einem PWA-Fenster.

Unter Android gibt es ein Menüelement ähnlich dem Menüpunkt auf dem Desktop des Browsers, mit dem die Navigation an die App übertragen wird. In diesem Fall wird die aktuelle URL geöffnet, aber es wird eine neue Seitennavigation in der App angezeigt.

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

In Chrome auf Android-Geräten wird ein Menüelement zum Öffnen einer neuen Navigation in einem PWA-Fenster angezeigt.

Nach der Installation übertragen

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, wenn Sie die App installieren. Wenn die Nutzer zur App wechseln möchten, müssen sie die App manuell öffnen. Es wird eine neue Navigation angeboten.

Ü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 gibt es 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, seinen eigenen Speicherplatz, getrennt vom Safari-Tab und anderen Symbolen. Wenn ein Nutzer das Installationssymbol öffnet, wird kein Speicherplatz für Safari freigegeben. Wenn für Ihre PWA eine Anmeldung erforderlich ist, muss sich der Nutzer noch einmal anmelden. Wenn die App dem Startbildschirm mehrmals hinzugefügt wurde, hat der Nutzer für jede PWA-Instanz eine andere Sitzung.

Unterstützte Browser

  • x
  • 79
  • x
  • x

Quelle

Eine Website gibt über das Manifest eine Beziehung zu einer App an. Verwenden Sie dazu das Mitglied related_applications der Web App Manifest-Spezifikation. Der Schlüssel related_applications ist ein Array von Objekten, die jede zugehörige Anwendung darstellen. Jeder Eintrag enthält platform, url und eine optionale 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-Droid.
  • amazon: Amazon AppStore (FireOS).

Wenn ein Nutzer eine App installiert, kannst du ihn zu einer ähnlichen App weiterleiten. Dazu legst du in deinem Manifest das Feld prefer_related_applications auf true fest. Bei dieser Einrichtung wird die PWA bei kompatiblen Browsern nicht während des Installationsvorgangs installiert. Stattdessen wird die Installation über die url oder id ausgelöst, die du im Eintrag „related_applications“ angegeben hast.

Dabei kann es sich um Ihre PWA handeln. 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.

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

Banner für Smart-Apps von Apple

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

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

Wenn Sie prüfen, ob eine zugehörige App bereits installiert ist, können Sie Funktionen implementieren, wie z. B. das Ausblenden benutzerdefinierter Aufforderungen oder die direkte Weiterleitung der Nutzer zur installierten App, anstatt eine allgemeine Website aufzurufen. Wenn Sie die Methode getInstalledRelatedApps() verwenden möchten, müssen die installierte App und die Website ihre Verbindung miteinander konfigurieren. Jede App enthält je nach Plattform Metadaten, um die Website zu erkennen. Die Website enthält die erwartete installierte App im Feld related_applications des Manifests.

Mit Tools wie BubbleWrap oder PWA Builder können Sie Ihre PWA in App-Shops veröffentlichen. Sie fügen bereits die erforderlichen Metadaten hinzu, damit getInstalledRelatedApps() sofort auf Ihrer Website verwendet werden kann. Wenn du feststellen möchtest, ob eine PWA bereits mit getInstalledRelatedApps() installiert wurde, definiere webapp im Feld related_applications des Manifests mit der URL zu deinem 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, wird die zugehörige App nicht installiert.

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

Installationen außerhalb des Geltungsbereichs der PWA erkennen

In Chrome unter Android 89 können Sie erkennen, ob eine PWA installiert ist, auch wenn sie nicht in den Bereich der PWA fällt. Von Ihrer PWA muss im Ordner „/.well-known/“ eine JSON-Datei festgelegt werden, die die Berechtigung für den anderen Bereich erteilt, wie in diesem Artikel beschrieben.

Ressourcen