Ist deine App installiert? Mit getinstalledRelatedApps() erhältst du eine Antwort.

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

Pete LePage

Alexey Rodionov

Was ist die getInstalledRelatedApps() API?

Die Methode getInstalledRelatedApps() gibt die Liste der installierten verknüpften Apps zurück.

Der Aufruf von navigator.getInstalledRelatedApps() gibt ein Promise zurück, das mit einem Array von zugehörigen Apps aufgelöst wird, die auf dem Gerät des Nutzers installiert sind.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Damit kann Ihre Seite prüfen, ob Ihre Android-App, UWP-App (Universal Windows Platform) oder PWA (Progressive Web App) bereits auf dem Gerät eines Nutzers installiert ist. Außerdem können Sie die Nutzerfreundlichkeit anpassen, wenn dies der Fall ist.

Wenn Ihre App beispielsweise bereits installiert ist:

• Nutzer werden von einer Produktmarketingseite direkt in Ihre App weitergeleitet.
• Einige Funktionen wie Benachrichtigungen werden in der anderen App zentralisiert, um doppelte Benachrichtigungen zu vermeiden.
• Die Installation Ihrer PWA wird nicht beworben, wenn Ihre andere App bereits installiert ist.

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

Prüfen, ob Ihre Android-App installiert ist

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

Android-App über Ihre Website informieren

Zuerst müssen Sie Ihre Android-App aktualisieren, um die Beziehung zwischen Ihrer Website und Ihrer Android-App über das Digital Asset Links-System 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 hinzu 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 nach Abschluss 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. Dazu fügen Sie Ihrer Seite ein Web-App-Manifest hinzu. 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.

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 Erweiterung Windows.appUriHandler 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 <Package>-Attribut den uap3-Namespace 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": [ "*" ]
}]

Demo ansehen

Hier finden Sie weitere 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 den 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.

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 durch den Bereich im Web-App-Manifest definiert.

PWA über sich selbst informieren

Fügen Sie in das Web-App-Manifest Ihrer PWA einen related_applications-Eintrag ein, um die PWA zu beschreiben.

• platform muss webapp sein.
• url ist der Pfad (kann relativ sein) zum Web-App-Manifest Ihrer PWA.
• id ist der vollständige Pfad zur Web-App (erforderlich für Computer, nicht für Android).

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

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

Ihrer PWA Informationen zu Ihrer Website mitteilen

Zuerst müssen Sie Digital Asset Links auf dem Server hinzufügen, von dem Ihre PWA bereitgestellt wird. So wird die Beziehung zwischen Ihrer Website und Ihrer PWA definiert und überprüft, dass 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 fügen Sie das Tag progressive-web-apps hinzu. 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, stellen Sie eine Anleitung zum Reproduzieren des Fehlers bereit und geben Sie Mobile>WebAPKs in das Feld Components (Komponenten) ein.

API-Support zeigen

Möchten Sie die getInstalledRelatedApps() API verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

• Teilen Sie uns im WICG Discourse-Thread mit, wie Sie die API verwenden möchten.
• Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #getInstalledRelatedApps und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

• Öffentliche Erläuterung der getInstalledRelatedApps() API
• Spezifikationsentwurf
• Tracking-Fehler
• ChromeStatus.com-Eintrag
• Blink-Komponente: Mobile>WebAPKs

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.