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 Ihre PWA auf dem Gerät eines Nutzers installiert ist.

Pete LePage

Was ist die getinstalledRelatedApps() API?

</ph> <ph type="x-smartling-placeholder">

Mit dem getInstalledRelatedApps() kann deine Seite folgende Aktionen ausführen: Prüfen Sie, ob Ihre mobile oder Desktop-App bzw. in einigen Fällen die progressive Die Web-App (PWA) ist bereits auf dem Gerät eines Nutzers installiert und bietet folgende Möglichkeiten: die User Experience anzupassen.

Wenn Ihre App beispielsweise bereits installiert ist:

• Sie leiten den Nutzer von einer Produktmarketingseite direkt zu Ihrer App weiter.
• Funktionen wie Benachrichtigungen werden in der anderen App zentralisiert, doppelte Benachrichtigungen zu vermeiden.
• Sie bewerben die Installation Ihrer PWA nicht, wenn Ihre andere App bereits installiert ist.

Damit du die getInstalledRelatedApps() API verwenden kannst, musst du deiner App Folgendes mitteilen: Ihre Website und informieren Sie Ihre Website über Ihre App. Sobald Sie die Beziehung zwischen den beiden besteht, können Sie prüfen, ob die App 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 musst du deine Android-App aktualisieren, um die Beziehung zwischen Ihrer Website und Ihrer Android-App Digital Asset Links-System: So wird sichergestellt, dass nur Ihre Website kann prüfen, ob deine Android-App installiert ist.

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

<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 mit Ihrer Domain. Vergessen Sie nicht, auch die Escapezeichen zu verwenden.

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

Erzählen Sie Ihrer Website von Ihrer Android-App.

Erzählen Sie als Nächstes von Ihrer Android-App, Hinzufügen eines Web-App-Manifests zu deiner Seite Das Manifest muss Fügen Sie das Attribut related_applications ein, ein Array mit den Details. zu deiner App, 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 Ihr Android-App ist installiert.

Demo ausprobieren

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

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

Windows-App über Ihre Website informieren

Sie müssen Ihre Windows-App aktualisieren, um die Beziehung zwischen Ihrem für Websites und Windows-Anwendungen mit URI-Handlern. Dieses sorgt dafür, dass nur Ihre Website prüfen kann, ob Ihre Windows-App installiert ist.

Registrierung der Erweiterung „Windows.appUriHandler“ dem Manifest deiner App hinzufügen Datei Package.appxmanifest. Beispiel: Die Adresse Ihrer Website lautet example.com würden Sie dem Manifest Ihrer App den folgenden Eintrag hinzufügen:

<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 den uap3-Namespace zu Ihrem <Package>.

Erstellen Sie dann eine JSON-Datei (ohne die Dateiendung .json) mit dem Namen windows-app-web-link und gib den Namen der Paketfamilie deiner App an. Ort entweder im Stammverzeichnis Ihres Servers oder im Verzeichnis /.well-known/. Ich können Sie den Namen der Paketfamilie im App-Manifest im Abschnitt „Verpackung“ finden. Designfachkraft.

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

Weitere Informationen finden Sie unter Apps für Websites mit App-URI-Handlern aktivieren für ausführliche Informationen zur Einrichtung von URI-Handlern.

Website über Ihre Windows-App informieren

Als Nächstes informieren Sie Ihre Website über Ihre Windows-App, Hinzufügen eines Web-App-Manifests zu deiner Seite Das Manifest muss Einschließen des Attributs related_applications, einem Array mit den Details zu deiner App, einschließlich platform und id.

• platform muss windows sein
• id ist der Name der Paketfamilie Ihrer App, an die das <Application>-Id angehängt wird in der Datei Package.appxmanifest.

{
  "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 Ihr Die Windows-App ist installiert.

Überprüfen, ob Ihre progressive Web-App bereits installiert ist (Bereich)

Ihre PWA kann prüfen, ob sie bereits installiert ist. In diesem Fall wird die Seite Die Anfrage muss sich in derselben Domain befinden und im Bereich liegen. Ihrer PWA, wie durch den Bereich im Web-App-Manifest definiert.

Erzählen Sie Ihrer PWA von sich selbst.

Informiere deine PWA über sich, indem du einen related_applications-Eintrag in deinem Web-App-Manifest für PWAs.

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

Demo ausprobieren

Überprüfen, ob Ihre progressive Web-App installiert ist (nicht im Umfang enthalten)

Deine Website kann prüfen, ob deine PWA installiert ist, auch wenn sich die Seite außerhalb von Bereich der PWA. Beispiel: Eine Landingpage, die über /landing/ kann prüfen, ob die von /pwa/ bereitgestellte PWA installiert ist oder Ihr Die Landingpage wird über www.example.com bereitgestellt und Ihre PWA von app.example.com.

Informieren Sie Ihre PWA über Ihre Website.

Zuerst müssen Sie auf dem Server, auf dem sich Ihre PWA befindet, Links zu digitalen Assets hinzufügen. aus denen die Anzeigen geschaltet werden sollen. So können Sie die Beziehung zwischen Ihrer Website und Ihre PWA und sorgt dafür, dass nur Ihre Website prüfen kann, ob sie installiert ist.

Datei assetlinks.json dem Verzeichnis /.well-known/ hinzufügen der Domain, in der sich die PWA befindet, z. B. app.example.com. Im site Property enthält, geben Sie den vollständigen Pfad zum Web-App-Manifest an, die Prüfung (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"
    }
  }
]

Deine Website über deine PWA informieren

Als Nächstes informieren Sie Ihre Website über Ihre PWA-App, indem Sie Hinzufügen eines Web-App-Manifests zu deiner Seite Das Manifest muss Fügen Sie das Attribut related_applications ein, ein Array mit den Details. zu deiner 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 Ihr PWA ist installiert.

Demo ausprobieren

getInstallRelatedApps() aufrufen

Der Aufruf von navigator.getInstalledRelatedApps() gibt ein Versprechen zurück, löst sich mit einer Reihe Ihrer Apps, 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 zu viele eigene Apps testen, werden nur die ersten drei im Web-App-Manifest deklarierten Apps berücksichtigt werden.

Wie die meisten anderen leistungsstarken Web-APIs ist auch die getInstalledRelatedApps() API nur bei Bereitstellung über HTTPS verfügbar.

Haben Sie noch Fragen?

Haben Sie noch Fragen? Prüfen Sie das getInstalledRelatedApps-Tag auf StackOverflow. um zu sehen, ob jemand ähnliche Fragen hat. Falls nicht, fragen Sie Ihren Frage und vergiss nicht, sie mit dem progressive-web-apps-Tag. Unser Team überwacht regelmäßig, dieses Tag und versucht, Ihre Fragen zu beantworten.

Feedback

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder ist die Implementierung von der Spezifikation abweichen?

• Melden Sie den Fehler unter https://new.crbug.com. Genauso viele wie möglich, einfache Anweisungen zum Reproduzieren des Fehlers Geben Sie Mobile>WebAPKs in das Feld Components ein. Störung eignet sich gut, um schnelle und einfache Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Möchten Sie die getInstalledRelatedApps() API verwenden? Meine öffentliche unterstützt das Chrome-Team beim Priorisieren von Funktionen wie wichtig es für ihre Unterstützung ist.

• Erzählen Sie im WICG-Discourse-Thread, wie Sie die API verwenden möchten.
• Sende einen Tweet mit dem Hashtag an @ChromiumDev #getInstalledRelatedApps und teilen Sie uns mit, wo und wie Sie sie nutzen.

Nützliche Links

• Öffentliche Erläuterung für die getInstalledRelatedApps() API
• Entwurf der Spezifikationen
• Tracking-Fehler
• ChromeStatus.com-Eintrag
• Blink-Komponente: Mobile>WebAPKs

Vielen Dank

Besonderer Dank geht an Sunggook Chue von Microsoft für die Hilfe bei den Details für das Testen von Windows-Apps und Rayan Kanso für weitere Informationen zu Chrome.