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.
Was ist die getinstalledRelatedApps() API?
<ph type="x-smartling-placeholder">![](https://web.dev/static/articles/get-installed-related-apps/image/vjamv2uyz6NxBPxPIm11.jpg?authuser=6&hl=de)
getInstalledRelatedApps()
festgestellt wird,
Die Android-App ist bereits installiert.
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.
- Einige 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
App-Typ | Auswählbar 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 selben Geltungsbereich oder in einer anderen Geltungsbereich. |
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
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
Ihre 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
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 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: 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 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
kann 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
musswindows
seinid
ist der Name der Paketfamilie Ihrer App, an die das<Application>
-Id
angehängt wird. in der DateiPackage.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.
Android: Chrome 84 oder höher
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
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 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 (ausgeschlossen)
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
.
Android: Chrome 84 oder höher
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
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 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.