Diese Seite wurde von der Cloud Translation API übersetzt.

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

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

Pete LePage

Was ist die getInstalledRelatedApps() API?

Eine Website, die `getInstalledRelatedApps()` verwendet, um zu ermitteln, ob die Android-App bereits installiert ist.

Mithilfe von getInstalledRelatedApps() kann auf Ihrer Seite geprüft werden, ob Ihre mobile oder Desktop-App oder in einigen Fällen Ihre progressive Webanwendung (PWA) bereits auf dem Gerät eines Nutzers installiert ist. So können Sie die Nutzererfahrung anpassen, falls dies der Fall ist.

Wenn Ihre App beispielsweise bereits installiert ist:

Nutzer von einer Produktmarketingseite direkt in Ihre App weiterleiten
Einige Funktionen wie Benachrichtigungen in der anderen App zentralisieren, um doppelte Benachrichtigungen zu vermeiden.
Die Installation Ihrer PWA nicht bewerben, wenn Ihre andere App bereits installiert ist.

Wenn Sie die getInstalledRelatedApps() API verwenden möchten, müssen Sie Ihrer App Ihre Website und Ihrer Website Ihre App mitteilen. Sobald Sie die Beziehung zwischen den beiden definiert haben, können Sie prüfen, ob die App installiert ist.

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

App-Typ	Prüfbar ab
Android-App	Nur Android Chrome 80 oder höher
Windows-App (UWP)	Nur Windows Chrome 85 oder höher Edge 85 oder höher
Progressive Web-App Im gleichen Umfang oder in einem anderen Umfang installiert.	Nur Android Chrome 84 oder höher

Hinweis : Mit der getInstalledRelatedApps() API können Sie nur prüfen, ob Ihre Apps installiert sind. Sie können keine Liste aller installierten Apps aufrufen und auch nicht prüfen, ob andere Drittanbieter-Apps installiert sind.

Prüfen, ob Ihre Android-App installiert ist

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

Unterstützt auf

Android: Chrome 80 oder höher

Informationen zu Ihrer Website an Ihre Android-App senden

Aktualisieren Sie zuerst Ihre Android-App, um die Beziehung zwischen Ihrer Website und der Android-Anwendung mithilfe des Digital Asset Links-Systems zu definieren. So kann nur Ihre Website prüfen, 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 Escape-Zeichen einzufügen.

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

Veröffentlichen Sie die aktualisierte Android-App anschließend im Play Store.

Informationen zu Ihrer Android-App auf Ihrer Website veröffentlichen

Als Nächstes informieren Sie Ihre Website über Ihre Android-App, 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 play sein
id ist die Google Play-Anwendungs-ID Ihrer Android-App.

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Prüfen, ob Ihre App installiert ist

Rufe abschließend navigator.getInstalledRelatedApps() auf, um zu prüfen, ob deine Android-App installiert ist.

Demo ansehen

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

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

Unterstützt auf

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

Windows-App Informationen zu Ihrer Website mitteilen

Sie müssen Ihre Windows-App aktualisieren, um die Beziehung zwischen Ihrer Website und der Windows-Anwendung mithilfe von URI-Handlern zu definieren. So kann nur Ihre Website prüfen, 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 dem Manifest Ihrer App den folgenden Eintrag hinzu:

<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 dem <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 Namen der Paketfamilie Ihrer App an. Platzieren Sie diese Datei entweder im Stammverzeichnis Ihres Servers oder im Verzeichnis /.well-known/. Den Namen der Paketfamilie finden Sie im Bereich „Verpackung“ im App-Manifest-Designer.

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

Unter Apps für Websites mithilfe von App-URI-Handlern aktivieren finden Sie ausführliche Informationen zum Einrichten von URI-Handlern.

Informationen zu Ihrer Windows-App auf Ihrer Website veröffentlichen

Als Nächstes informieren Sie Ihre Website über Ihre Windows-App, 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 Name der Paketfamilie Ihrer App, gefolgt vom Wert <Application> Id in der Datei Package.appxmanifest.

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

Prüfen, ob Ihre App installiert ist

Rufe abschließend navigator.getInstalledRelatedApps() auf, um zu prüfen, ob deine Windows-App installiert ist.

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

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 im Umfang Ihrer PWA befinden, wie im Manifest der Webanwendung definiert.

Unterstützt auf

Android: Chrome 84 oder höher

Informationen zur PWA

Geben Sie Informationen zu Ihrer PWA an, indem Sie einen related_applications-Eintrag in das Web-App-Manifest Ihrer PWA einfügen.

platform muss webapp sein
url ist der vollständige Pfad zum Web-App-Manifest Ihrer PWA.

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

Prüfen, ob Ihre PWA installiert ist

Rufen Sie abschließend navigator.getInstalledRelatedApps() innerhalb des Umfangs Ihrer PWA auf, um zu prüfen, ob sie installiert ist. Wenn getInstalledRelatedApps() außerhalb des Gültigkeitsbereichs Ihrer PWA aufgerufen wird, gibt er „false“ zurück. Einzelheiten finden Sie im nächsten Abschnitt.

Demo ansehen

Prüfen, ob Ihre progressive Webanwendung installiert ist (nicht in den Zuständigkeitsbereich fallend)

Ihre Website kann prüfen, ob Ihre PWA installiert ist, auch wenn sich die Seite außerhalb des Umfangs Ihrer PWA befindet. So kann beispielsweise auf einer Landingpage, die von /landing/ ausgeliefert wird, geprüft werden, ob die PWA, die von /pwa/ ausgeliefert wird, installiert ist, oder ob Ihre Landingpage von www.example.com und Ihre PWA von app.example.com ausgeliefert wird.

Unterstützt auf

Android: Chrome 84 oder höher

PWA Informationen zur Website mitteilen

Zuerst müssen Sie dem Server, von dem aus Ihre PWA bereitgestellt wird, Links zu digitalen Assets hinzufügen. So wird die Beziehung zwischen Ihrer Website und Ihrer PWA definiert und sichergestellt, 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, z. B. app.example.com, eine assetlinks.json-Datei hinzu. Geben Sie in der Property site den vollständigen Pfad zum Web-App-Manifest an, mit dem die Prüfung durchgeführt werden soll (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"
    }
  }
]

Hinweis : Überprüfen Sie den Dateinamen beim Erstellen der assetlinks.json-Datei. Ich habe viele Stunden mit der Fehlerbehebung verschwendet, nur um festzustellen, dass ich dem Dateinamen ein zusätzliches „s“ hinzugefügt hatte.

Website über Ihre PWA informieren

Geben Sie dann auf Ihrer Website an, dass es sich um eine PWA handelt, indem Sie Ihrer Seite ein Web-App-Manifest hinzufügen. Das Manifest muss das Attribut related_applications enthalten, ein Array mit 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 abschließend navigator.getInstalledRelatedApps() auf, um zu prüfen, ob Ihre PWA installiert ist.

Demo ansehen

getInstalledRelatedApps() aufrufen

Wenn Sie navigator.getInstalledRelatedApps() aufrufen, wird ein Versprechen zurückgegeben, das in ein Array Ihrer 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 Websites nicht zu viele eigene Apps testen können, werden nur die ersten drei im Manifest der Webanwendung angegebenen Apps berücksichtigt.

Wie die meisten anderen leistungsstarken Web-APIs ist die getInstalledRelatedApps() API nur verfügbar, wenn sie über HTTPS bereitgestellt wird.

Haben Sie noch Fragen?

Haben Sie noch Fragen? Sehen Sie sich das getInstalledRelatedApps-Tag auf StackOverflow an, um herauszufinden, ob andere Nutzer ähnliche Fragen hatten. Falls nicht, stelle dort deine Frage und vergiss nicht, sie mit dem Tag progressive-web-apps zu versehen. Unser Team prüft dieses Tag regelmäßig und versucht, Ihre Fragen zu beantworten.

Feedback

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?

Melden Sie den Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an, machen Sie eine einfache Anleitung zum Nachstellen des Fehlers und geben Sie Mobile>WebAPKs in das Feld Components ein. Glitcheignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

Unterstützung für die API anzeigen

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

Teile uns im WICG-Discourse-Thread mit, wie du die API verwenden möchtest.
Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #getInstalledRelatedApps und teilen Sie uns mit, wo und wie Sie ihn verwenden.

Nützliche Links

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

Vielen Dank

Besonderer Dank geht 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 Hilfe bei den Chrome-Details.