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.
Was ist die getinstalledRelatedApps() API?
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.
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
mussplay
seinid
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.
Prüfen, ob Ihre Windows-App (UWP) installiert ist
Ihre Website kann prüfen, ob Ihre mit UWP erstellte Windows-Anwendung installiert ist.
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
musswindows
seinid
ist der Paketfamilienname Ihrer App, an den der Wert<Application>
Id
in der DateiPackage.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.
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
musswebapp
seinurl
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.
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.
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
musswebapp
seinurl
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.
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.
- Teilen Sie im WICG Discourse-Thread mit, wie Sie die API verwenden möchten.
- Sende einen Tweet mit dem Hashtag
#getInstalledRelatedApps
an @ChromiumDev und teile uns mit, wo und wie du es verwendest.
Nützliche Links
- Öffentliche Erläuterung für die
getInstalledRelatedApps()
API - Entwurf der Spezifikation
- Tracking-Fehler
- ChromeStatus.com-Eintrag
- Blink-Komponente:
Mobile>WebAPKs
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.