Metoda getInstalledRelatedApps()
umożliwia witrynie sprawdzenie, czy
aplikacja na iOS/Androida/komputer lub PWA jest zainstalowana na urządzeniu użytkownika.
Co to jest interfejs API getinstalledRelatedApps()?
![](https://web.dev/static/articles/get-installed-related-apps/image/vjamv2uyz6NxBPxPIm11.jpg?authuser=7&hl=pl)
getInstalledRelatedApps()
do określenia, czy
Aplikacja na Androida jest już zainstalowana.
getInstalledRelatedApps()
umożliwia Twojej stronie
sprawdź, czy aplikacja ona mobilna czy komputerowa, a w niektórych przypadkach, jeśli aplikacja
Aplikacja internetowa (PWA) jest już zainstalowana na urządzeniu użytkownika i umożliwia
i w razie potrzeby dostosować środowisko
do własnych potrzeb.
Jeśli na przykład aplikacja jest już zainstalowana:
- Przekierowywanie użytkownika ze strony marketingowej produktu bezpośrednio do Twojej aplikacji.
- Niektóre funkcje, takie jak powiadomienia z drugiej aplikacji, są scentralizowane, i zapobiegaj duplikowaniu powiadomień.
- brak promowania instalacji PWA, jeśli inna aplikacja jest już zainstalowana.
Aby korzystać z interfejsu API getInstalledRelatedApps()
, musisz poinformować aplikację o
Twoją witrynę, a potem poinformuj ją o niej. Po zdefiniowaniu parametru
można sprawdzić, czy aplikacja jest zainstalowana.
Obsługiwane typy aplikacji, które możesz sprawdzić
Typ aplikacji | Można sprawdzić od |
---|---|
W aplikacji na Androida |
Tylko Android Chrome 80 lub nowsza |
Aplikacja Windows (UWP) |
Tylko Windows Chrome 85 lub nowsza Edge 85 lub nowsza. |
Progresywna aplikacja internetowa Zainstalowane w tym samym zakresie lub innym zakresie. |
Tylko Android Chrome 84 lub nowsza |
Sprawdzanie, czy aplikacja na Androida jest zainstalowana
Twoja strona może sprawdzić, czy masz zainstalowaną aplikację na Androida.
Android: Chrome 80 lub nowsza
Przekazywanie aplikacji na Androida informacji o witrynie
Najpierw musisz zaktualizować aplikację na Androida, aby zdefiniować relację między witryną a aplikacją na Androida za pomocą System Digital Asset Links Dzięki temu tylko może sprawdzić, czy Twoja aplikacja na Androida jest zainstalowana.
W AndroidManifest.xml
aplikacji na Androida dodaj asset_statements
wpis:
<manifest>
<application>
…
<meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
…
</application>
</manifest>
Następnie w sekcji strings.xml
dodaj następujące zestawienie informacji o zasobach, aktualizując site
o
w Twojej domenie. Pamiętaj, aby użyć znaków ucieczki.
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
</string>
Gdy to zrobisz, opublikuj zaktualizowaną aplikację na Androida w Sklepie Play.
Informowanie witryny o aplikacji na Androida
Następnie poinformuj witrynę o aplikacji na Androida przez
dodanie do strony pliku manifestu aplikacji internetowej. Plik manifestu musi
uwzględnij właściwość related_applications
, tablicę ze szczegółami
o Twojej aplikacji, w tym platform
i id
.
platform
musi mieć wartośćplay
id
to identyfikator Twojej aplikacji na Androida w Google Play
{
"related_applications": [{
"platform": "play",
"id": "com.android.chrome",
}]
}
Sprawdzanie, czy aplikacja jest zainstalowana
Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps()
, aby sprawdzić, czy
zainstalowana jest aplikacja na Androida.
Zobacz prezentację
Sprawdzanie, czy aplikacja Windows (UWP) jest zainstalowana
Witryna może sprawdzić, czy jest zainstalowana aplikacja dla systemu Windows (utworzona za pomocą UWP).
Windows: Chrome 85 lub nowsza, Edge 85 lub nowsza.
Informowanie aplikacji systemu Windows o witrynie
Aby zdefiniować relację między witryny i aplikacji systemu Windows za pomocą modułów obsługi URI. Ten Dzięki temu tylko Twoja witryna może sprawdzić, czy masz zainstalowaną aplikację Windows.
Dodaj rejestrację rozszerzenia Windows.appUriHandler
do pliku manifestu aplikacji
plik Package.appxmanifest
. Jeśli na przykład adres witryny to
example.com
w pliku manifestu aplikacji musisz dodać ten wpis:
<Applications>
<Application Id="App" ... >
...
<Extensions>
<uap3:Extension Category="windows.appUriHandler">
<uap3:AppUriHandler>
<uap3:Host Name="example.com" />
</uap3:AppUriHandler>
</uap3:Extension>
</Extensions>
</Application>
</Applications>
Uwaga: konieczne może być dodanie do pola przestrzeni nazw uap3
<Package>
.
Następnie utwórz plik JSON (bez rozszerzenia .json
) o nazwie
windows-app-web-link
i podaj nazwę rodziny pakietów aplikacji. Miejsce
ten plik w katalogu głównym serwera lub w katalogu /.well-known/
. Ty
może znaleźć nazwę rodziny pakietów w sekcji Opakowanie w manifeście aplikacji
projektantką.
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
Przeczytaj artykuł Włączanie aplikacji dla witryn korzystających z modułów obsługi identyfikatora URI aplikacji w tych artykułach: szczegółowe informacje o konfigurowaniu modułów obsługi identyfikatorów URI.
Informowanie witryny o aplikacji Windows
Następnie poinformuj witrynę o aplikacji Windows,
dodanie do strony pliku manifestu aplikacji internetowej. Plik manifestu musi
dołącz właściwość related_applications
, tablica ze szczegółami
o Twojej aplikacji, w tym platform
i id
.
platform
musi mieć wartośćwindows
id
to nazwa rodziny pakietów aplikacji uzupełniona o<Application>
Id
w plikuPackage.appxmanifest
.
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
Sprawdzanie, czy aplikacja jest zainstalowana
Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps()
, aby sprawdzić, czy
Zainstalowana jest aplikacja Windows.
Sprawdź, czy progresywna aplikacja internetowa jest już zainstalowana (w zakresie)
Aplikacja PWA może sprawdzić, czy została już zainstalowana. W tym przypadku strona żądanie musi znajdować się w tej samej domenie i być objęte zakresem Twojej aplikacji PWA, zgodnie z zakresem w pliku manifestu aplikacji internetowej.
Android: Chrome 84 lub nowsza
Poinformuj aplikację PWA o sobie
Powiedz swojej aplikacji PWA o sobie, dodając wpis related_applications
w sekcji
Plik manifestu aplikacji internetowej PWA.
platform
musi mieć wartośćwebapp
url
to pełna ścieżka do pliku manifestu aplikacji internetowej PWA
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
Sprawdzanie, czy aplikacja PWA jest zainstalowana
Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps()
z poziomu
zakres aplikacji PWA, aby sprawdzić, czy jest zainstalowana. Jeśli
Aplikacja getInstalledRelatedApps()
jest wywoływana poza zakresem Twojej aplikacji PWA,
zwraca wartość fałsz. Więcej informacji na ten temat można znaleźć w następnej sekcji.
Zobacz prezentację
Sprawdź, czy zainstalowano progresywną aplikację internetową (poza zakresem)
Twoja witryna może sprawdzić, czy aplikacja PWA została zainstalowana, nawet jeśli strona znajduje się poza nią
zakres aplikacji PWA. Na przykład strona docelowa wyświetlana z
/landing/
może sprawdzić, czy aplikacja PWA obsługiwana z adresu /pwa/
jest zainstalowana
z domeny www.example.com
, a PWA – z
app.example.com
Android: Chrome 84 lub nowsza
Przekazywanie PWA informacji o witrynie
Najpierw musisz dodać linki do zasobów cyfrowych do serwera, na którym znajduje się Twoja aplikacja PWA. . Ułatwi to zdefiniowanie relacji między witryną i zapewnia, że tylko Twoja witryna może sprawdzić, czy została zainstalowana.
Dodaj plik assetlinks.json
do katalogu /.well-known/
domeny, w której znajduje się aplikacja PWA, na przykład app.example.com
. W: site
podaj pełną ścieżkę do pliku manifestu aplikacji internetowej, który
(nie jest to plik manifestu aplikacji internetowej 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"
}
}
]
Informowanie witryny o progresywnej aplikacji internetowej
Następnie poinformuj witrynę o aplikacji PWA do
dodanie do strony pliku manifestu aplikacji internetowej. Plik manifestu musi
uwzględnij właściwość related_applications
, tablicę ze szczegółami
o PWA, w tym o platform
i url
.
platform
musi mieć wartośćwebapp
url
to pełna ścieżka do pliku manifestu aplikacji internetowej PWA
{
"related_applications": [{
"platform": "webapp",
"url": "https://app.example.com/manifest.json",
}]
}
Sprawdzanie, czy aplikacja PWA jest zainstalowana
Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps()
, aby sprawdzić, czy
Zainstalowano aplikację PWA.
Zobacz prezentację
Wywołanie metody getINSTALLRelatedApps()
Wywołanie navigator.getInstalledRelatedApps()
zwraca obietnicę, że
znajduje się w tablicy aplikacji zainstalowanych na urządzeniu użytkownika.
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
Aby uniemożliwić stronom testowanie zbyt szerokiego zestawu własnych aplikacji: tylko 3 pierwsze aplikacje zadeklarowane w manifeście aplikacji internetowej zostaną jest wzięty pod uwagę.
Podobnie jak większość zaawansowanych interfejsów API, interfejs API getInstalledRelatedApps()
jest
jest dostępna tylko podczas udostępniania przez HTTPS.
Nadal masz pytania?
Nadal masz pytania? Sprawdź tag getInstalledRelatedApps
na stronie StackOverflow
aby sprawdzić, czy ktoś nie miał podobnych pytań. Jeśli nie, zapytaj
pytania i pamiętaj, by oznaczyć je tagiem
progressive-web-apps
. Nasz zespół często monitoruje
ten tag i spróbuje odpowiedzieć na Twoje pytania.
Prześlij opinię
Czy wystąpił błąd z implementacją Chrome? Czy wdrożenie różni się od specyfikacji?
- Zgłoś błąd na https://new.crbug.com. Uwzględnij jak najwięcej
jak najwięcej szczegółów, podać proste instrukcje odtworzenia błędu oraz
W polu Komponenty wpisz
Mobile>WebAPKs
. Błąd to świetny sposób na szybkie i łatwe udostępnianie.
Pokaż wsparcie dla interfejsu API
Czy zamierzasz korzystać z interfejsu API getInstalledRelatedApps()
? Twoje publiczne
pomocy pomaga zespołowi Chrome ustalać priorytety funkcji i pokazywać inne
dostawców przeglądarek.
- Opisz planowany sposób korzystania z interfejsu API w wątku z dyskusją WICG.
- Wyślij tweeta na adres @ChromiumDev, używając hashtagu
#getInstalledRelatedApps
. i daj nam znać, gdzie i jak go używasz.
Przydatne linki
- Publiczne wyjaśnienie dotyczące interfejsu
getInstalledRelatedApps()
API - Wersja robocza specyfikacji
- Śledzenie błędu
- Wpis na temat ChromeStatus.com
- Komponent Blink:
Mobile>WebAPKs
Dziękujemy
Specjalne podziękowania dla Sunggook Chue z firmy Microsoft za pomoc w przekazaniu szczegółowych informacji za testowanie aplikacji dla systemu Windows, oraz Rayan Kanso, który udzieli Ci pomocy w kwestiach dotyczących Chrome.