Ist Ihre App installiert? Die Installed Related Apps API gibt Ihnen Aufschluss darüber.

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Mit der Get Installed Related Apps API können Sie die Liste der installierten zugehörigen Apps sowie Details zu diesen Apps abrufen.

Damit können Sie sowohl über die PWA selbst als auch über eine zugehörige Webseite (z.B. eine Produktmarketing-Website) prüfen, ob Ihre progressive Web-App (PWA), Android-App oder Universal Windows Platform-App (UWP-App) auf dem aktuellen Gerät installiert ist.

Wenn die App bereits installiert ist, können Sie die Nutzererfahrung anpassen.

Beispiel:

  • Sie werben nicht für die Installation Ihrer PWA, wenn Ihre andere App bereits installiert ist.
  • Nutzer werden von einer Produktmarketing-Website direkt zu Ihrer App weitergeleitet.
  • Einige Funktionen wie Benachrichtigungen werden in der anderen App zentralisiert, um doppelte Benachrichtigungen zu vermeiden.

Was ist die Get Installed Related Apps API?

Beim Aufrufen der asynchronen Methode navigator.getInstalledRelatedApps() wird ein Promise zurückgegeben, das mit einem Array von Objekten aufgelöst wird, die Details zu Apps enthalten, die:

  • auf dem aktuellen Gerät installiert ist,
  • im Feld related_applications des Web-App-Manifests definiert ist,
  • Sie müssen eine bestätigte Beziehung zu einer Seite haben, auf der die Methode navigator.getInstalledRelatedApps() aufgerufen wird (weitere Informationen finden Sie in den nächsten Abschnitten).
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Der Aufruf von console.log(installedRelatedApps) gibt etwa Folgendes zurück:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

Mit der folgenden Einzeiler-Anweisung können Sie beispielsweise prüfen, ob auf dem Gerät des Nutzers zugehörige Apps installiert sind:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

Wenn Sie die Paket-ID kennen, können Sie mit der folgenden Einzeiler-Anweisung die Versionsnummer der installierten zugehörigen Android-App abrufen:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

Unterstützte App-Typen, die Sie prüfen können

App-Typ Prüfbar ab
Android-App Nur für Android:
Chrome 80 oder höher
UWP-App (Universal Windows Platform) Nur Windows:
Chrome 85 oder höher
Edge 85 oder höher
Progressive Web-App (PWA), die im selben Bereich am selben Ursprung installiert ist Android:
Chrome 84 oder höher
Desktop (Windows, macOS, Linux, ChromeOS):
Chrome 140 oder höher
Edge 140 oder höher
Progressive Web-App (PWA)
mit unterschiedlichem Bereich auf demselben oder einem anderen Ursprung installiert 		Nur Android:
Chrome 84 oder höher

Prüfen, ob Ihre Android-App installiert ist

Ihre Website kann prüfen, ob Ihre Android-App installiert ist.

Unterstützt auf:

  • Nur Android: Chrome 80 oder höher

Android-App über Ihre Website informieren

Zuerst müssen Sie Ihre Android-App aktualisieren, um die Beziehung zwischen Ihrer Website und Ihrer Android-App mithilfe des Digital Asset Links-Systems zu definieren. So wird sichergestellt, dass nur Ihre Website prüfen kann, ob Ihre Android-App installiert ist.

Fügen Sie in der AndroidManifest.xml Ihrer Android-App einen asset_statements-Eintrag hinzu:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Fügen Sie dann in strings.xml die folgende Asset-Erklärung ein und ersetzen Sie site durch Ihre Domain. Achten Sie darauf, die Escapezeichen einzufügen.

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

Installieren Sie die aktualisierte App auf dem Gerät oder veröffentlichen Sie sie im Google Play Store oder auf einer der anderen Android-App-Vertriebsplattformen.

Ihre Website über Ihre Android-App informieren

Als Nächstes müssen Sie Ihre Website über Ihre Android-App informieren, indem Sie Ihrer Seite ein Web-App-Manifest hinzufügen. Das Manifest muss das Attribut related_applications enthalten, ein Array mit den Details zu Ihrer App, einschließlich platform und id.

  • platform muss play sein.
  • id ist die Android-Paket-ID.
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

Prüfen, ob Ihre App installiert ist

Rufen Sie schließlich die asynchrone Funktion navigator.getInstalledRelatedApps() auf, um zu prüfen, ob Ihre Android-App installiert ist.

Prüfen, ob Ihre Windows-App (UWP) installiert ist

Ihre Website kann prüfen, ob Ihre Windows-App (die mit UWP erstellt wurde) installiert ist.

Unterstützt auf:

  • Nur Windows: Chrome 85 oder höher, Edge 85 oder höher

Windows-App über Ihre Website informieren

Sie müssen Ihre Windows-App aktualisieren, um die Beziehung zwischen Ihrer Website und Ihrer Windows-Anwendung mithilfe von URI-Handlern zu definieren. So wird sichergestellt, dass nur Ihre Website prüfen kann, ob Ihre Windows-App installiert ist.

Fügen Sie die Registrierung der Windows.appUriHandler-Erweiterung der Manifestdatei Package.appxmanifest Ihrer App hinzu. Wenn die Adresse Ihrer Website beispielsweise example.com lautet, fügen Sie den folgenden Eintrag in das Manifest Ihrer App ein:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

Möglicherweise müssen Sie Ihrem Attribut <Package> den Namespace uap3 hinzufügen.

Erstellen Sie dann eine JSON-Datei (ohne die Dateiendung .json) mit dem Namen windows-app-web-link und geben Sie den Paketfamiliennamen Ihrer App an. Legen Sie die Datei entweder im Stammverzeichnis Ihres Servers oder im Verzeichnis /.well-known/ ab. Den Paketfamiliennamen finden Sie im Abschnitt „Verpackung“ im App-Manifest-Designer.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

Vollständige Informationen zum Einrichten von URI-Handlern

Ihre Website über Ihre Windows-App informieren

Als Nächstes müssen Sie Ihre Website über Ihre Windows-App informieren, indem Sie Ihrer Seite ein Web-App-Manifest hinzufügen. Das Manifest muss das Attribut related_applications enthalten, ein Array mit Details zu Ihrer App, einschließlich platform und id.

  • platform muss windows sein.
  • id ist der Paketfamilienname Ihrer App, an den der Wert <Application> Id in Ihrer Package.appxmanifest-Datei angehängt wird.
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

Prüfen, ob Ihre App installiert ist

Rufen Sie schließlich die asynchrone Funktion navigator.getInstalledRelatedApps() auf, um zu prüfen, ob Ihre Windows-App installiert ist.

Demo ansehen

Prüfen, ob Ihre Progressive Web-App bereits installiert ist (im Bereich)

Ihre PWA kann prüfen, ob sie bereits installiert ist. In diesem Fall muss sich die Seite, von der die Anfrage stammt, in derselben Domain und innerhalb des Bereichs Ihrer PWA befinden, wie im Web-App-Manifest definiert.

Unterstützt auf:

  • Android: Chrome 84 oder höher
  • Desktop (Windows, macOS, Linux, ChromeOS): Chrome 140 oder höher, Edge 140 oder höher

PWA über sich selbst informieren

Fügen Sie dem Web-App-Manifest Ihrer PWA einen related_applications-Eintrag hinzu, um Informationen zur PWA anzugeben.

  • platform muss webapp sein.
  • url ist der Pfad (kann relativ sein) zum Web-App-Manifest Ihrer PWA.
  • id ist die Web-App-ID, die im Feld id des Web-App-Manifests deklariert oder vom Browser berechnet wird (erforderlich für Desktop, nicht für Android).
{
  …
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com/?utm_source=home_screen"
  }],
  …
}

Prüfen, ob Ihre PWA installiert ist

Rufen Sie schließlich die asynchrone Funktion navigator.getInstalledRelatedApps() im Bereich Ihrer PWA auf, um zu prüfen, ob sie installiert ist. Wenn navigator.getInstalledRelatedApps() außerhalb des Bereichs Ihrer PWA aufgerufen wird, wird [] zurückgegeben. Einzelheiten finden Sie im nächsten Abschnitt.

Prüfen, ob Ihre progressive Web-App installiert ist (nicht im Leistungsumfang enthalten)

Ihre Website kann prüfen, ob Ihre PWA installiert ist, auch wenn sich die Seite außerhalb des Bereichs Ihrer PWA befindet. Eine Landingpage, die von /landing/ bereitgestellt wird, kann beispielsweise prüfen, ob die PWA, die von /pwa/ bereitgestellt wird, installiert ist. Oder Ihre Landingpage wird von www.example.com bereitgestellt und Ihre PWA von app.example.com.

Unterstützt auf:

  • Nur Android: Chrome 84 oder höher

Ihrer PWA Informationen zu Ihrer Website mitteilen

Zuerst müssen Sie dem Server, von dem Ihre PWA bereitgestellt wird, Links zu digitalen Assets hinzufügen. So wird die Beziehung zwischen Ihrer Website und Ihrer PWA definiert und überprüft, ob nur Ihre Website prüfen kann, ob Ihre PWA installiert ist.

Fügen Sie dem Verzeichnis /.well-known/ der Domain, in der sich die PWA befindet, eine assetlinks.json-Datei hinzu, z. B. app.example.com. Geben Sie in der site-Property den vollständigen Pfad zum Web-App-Manifest an, mit dem die Prüfung durchgeführt wird (nicht das Web-App-Manifest Ihrer PWA).

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

Ihre Website über Ihre PWA informieren

Als Nächstes müssen Sie Ihre Website über Ihre PWA informieren, indem Sie Ihrer Seite ein Web-App-Manifest hinzufügen. Das Manifest muss das Attribut related_applications enthalten, ein Array mit den Details zu Ihrer PWA, einschließlich platform und url.

  • platform muss webapp sein.
  • url ist der vollständige Pfad zum Web-App-Manifest Ihrer PWA.
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json"
  }]
}

Prüfen, ob Ihre PWA installiert ist

Rufen Sie schließlich die asynchrone Funktion navigator.getInstalledRelatedApps() auf, um zu prüfen, ob Ihre PWA installiert ist.

Haben Sie noch Fragen?

Haben Sie noch Fragen? Sehen Sie sich das getInstalledRelatedApps-Tag auf Stack Overflow an, um zu prüfen, ob andere Nutzer ähnliche Fragen gestellt haben. Falls nicht, stellen Sie dort Ihre Frage und versehen Sie sie mit dem Tag progressive-web-apps. Unser Team behält dieses Tag im Blick und versucht, Ihre Fragen zu beantworten.

Feedback

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab?

  • Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an, beschreiben Sie, wie der Fehler reproduziert werden kann, und geben Sie Mobile>WebAPKs in das Feld Components (Komponenten) ein.

Nützliche Links

Vielen Dank

Vielen Dank an Sunggook Chue von Microsoft für die Unterstützung bei den Details zum Testen von Windows-Apps und an Rayan Kanso für die Unterstützung bei den Chrome-Details.