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

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

Pete LePage

Was ist die getinstalledRelatedApps() API?

Eine Website, mit der getInstalledRelatedApps() ermittelt wird, ob die zugehörige Android-App bereits installiert ist.

Mit getInstalledRelatedApps() kann deine Seite prüfen, ob deine mobile oder Desktop-App oder in einigen Fällen deine progressive Web-App (PWA) bereits auf dem Gerät eines Nutzers installiert ist. Gegebenenfalls hast du auch die Möglichkeit, die Nutzererfahrung anzupassen.

Beispiel: Ihre App ist bereits installiert:

  • Nutzer werden direkt von einer Produktmarketingseite zu Ihrer App weitergeleitet.
  • Zentralisieren Sie einige Funktionen wie Benachrichtigungen in der anderen App, um doppelte Benachrichtigungen zu vermeiden.
  • Werbung für die Installation Ihrer PWA, wenn Ihre andere App bereits installiert ist

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

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

Anwendungstyp Verfügbar ab
Android-App Nur Android
Chrome 80 oder höher
Windows (UWP) App Nur Windows
Chrome 85 oder höher
Edge 85 oder höher
Progressive Web-App
im selben Bereich oder in einem anderen Bereich installiert sein. 		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

Android: Chrome 80 oder höher

Android-App über Ihre Website informieren

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

Fügen Sie im 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-Anweisung hinzu und aktualisieren Sie site durch Ihre Domain. Vergessen Sie nicht, 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 anschließend Ihre aktualisierte Android-App im Play Store.

Ihre Website über Ihre Android-App informieren

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. Dabei handelt es sich um ein Array, das die Details zu Ihrer App enthält, einschließlich platform und id.

  • platform muss play sein
  • id ist die Google Play-App-ID für deine Android-App.
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Prüfen, ob Ihre App installiert ist

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

Demo ansehen

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

Ihre Website kann prüfen, ob Ihre mit UWP erstellte Windows-Anwendung installiert ist.

Unterstützt auf

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 der Windows-Anwendung mithilfe von URI-Handlern zu definieren. Dadurch wird sichergestellt, dass nur Ihre Website prüfen kann, ob die Windows-App installiert ist.

Fügen Sie der Manifestdatei Package.appxmanifest Ihrer App die Registrierung der Erweiterung Windows.appUriHandler hinzu. Lautet die Adresse Ihrer Website beispielsweise example.com, 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>

Hinweis: 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 Paketnamen der App an. Legen Sie diese Datei entweder im Stammverzeichnis Ihres Servers oder im Verzeichnis /.well-known/ ab. Den Namen der Paketfamilie findest du im Abschnitt zur Verpackung im App-Manifest-Designer.

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

Ausführliche Informationen zum Einrichten von URI-Handlern finden Sie unter Apps für Websites mit App-URI-Handlern aktivieren.

Ihre Website über die Windows-App informieren

Als Nächstes informieren Sie Ihre Website über die Windows-Anwendung, indem Sie Ihrer Seite ein Web-App-Manifest hinzufügen. Das Manifest muss das Attribut related_applications enthalten. Dabei handelt es sich um ein Array, das die Details zu Ihrer App enthält, einschließlich platform und id.

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

Prüfen, ob Ihre App installiert ist

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

Prüfen, ob Ihre progressive Web-App bereits installiert ist (zuständig)

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

Unterstützt auf

Android: Chrome 84 oder höher

Erzähle deiner PWA etwas über sich selbst.

Informieren Sie Ihre PWA über sich. Fügen Sie dazu im Manifest für die Web-App der PWA einen related_applications-Eintrag hinzu.

  • 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 schließlich navigator.getInstalledRelatedApps() im Bereich der PWA auf, um zu prüfen, ob sie installiert ist. Wenn getInstalledRelatedApps() außerhalb des Bereichs Ihrer PWA aufgerufen wird, wird „false“ zurückgegeben. Einzelheiten finden Sie im nächsten Abschnitt.

Demo ansehen

Prüfen, ob deine progressive Web-App installiert ist (nicht zuständig)

Ihre Website kann prüfen, ob Ihre PWA installiert ist, auch wenn die Seite nicht in den Bereich Ihrer PWA fällt. Beispielsweise kann auf einer Landingpage, die über /landing/ bereitgestellt wird, geprüft werden, ob die von /pwa/ bereitgestellte PWA installiert ist oder ob Ihre Landingpage über www.example.com und die PWA über app.example.com bereitgestellt wird.

Unterstützt auf

Android: Chrome 84 oder höher

Der PWA Informationen zu Ihrer Website geben

Zuerst müssen Sie dem Server, über den Ihre PWA bereitgestellt wird, Links zu digitalen Assets hinzufügen. So können Sie die Beziehung zwischen Ihrer Website und Ihrer PWA definieren und dafür sorgen, 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 Datei assetlinks.json hinzu, z. B. app.example.com. Geben Sie im Attribut site den vollständigen Pfad zum Manifest der Web-App an, mit dem die Prüfung durchgeführt wird (nicht zum 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 die PWA informieren

Als Nächstes informieren Sie Ihre Website über Ihre PWA-App, indem Sie Ihrer Seite ein Web-App-Manifest hinzufügen. Das Manifest muss das Attribut related_applications enthalten, ein Array, das die Details zu Ihrer PWA enthält, 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

getInstallRelatedApps() wird aufgerufen

Durch den Aufruf von navigator.getInstalledRelatedApps() wird ein Promise zurückgegeben, das mit einem 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);
});

Um zu verhindern, dass Websites eine übermäßig große Anzahl eigener Apps testen, werden nur die ersten drei im Manifest der Webanwendung deklarierten Anwendungen 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? Prüfen Sie das Tag getInstalledRelatedApps auf Stack Overflow, um zu sehen, ob andere Nutzer ähnliche Fragen haben. Falls nicht, stellen Sie dort Ihre Frage und taggen Sie sie mit dem Tag progressive-web-apps. Unser Team überwacht das Tag regelmäßig und versucht, Ihre Fragen zu beantworten.

Feedback

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

  • Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an, fügen Sie eine einfache Anleitung zum Reproduzieren des Fehlers hinzu und geben Sie Mobile>WebAPKs in das Feld Komponenten ein. Glitch eignet sich hervorragend zum Teilen von schnellen und einfachen Reproduktionen.

Unterstützung für die API 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.

Nützliche Links

Vielen Dank

Wir danken ganz besonders Sunggook Chue von Microsoft für die Hilfe beim Testen von Windows-Apps und Rayan Kanso für Hilfe bei den Chrome-Details.