Metoda getInstalledRelatedApps()
umożliwia witrynie sprawdzenie, czy na urządzeniu użytkownika jest zainstalowana aplikacja na iOS, Androida lub komputer albo PWA.
Czym jest interfejs API getSupportedRelatedApps()?
Dzięki getInstalledRelatedApps()
strona Twojej może sprawdzić, czy Twoja aplikacja mobilna lub komputerowa, a w niektórych przypadkach, jest już zainstalowana progresywna aplikacja internetowa (PWA) na urządzeniu użytkownika. W razie potrzeby możesz też dostosować sposób jej działania.
Na przykład jeśli aplikacja jest już zainstalowana:
- Przekierowywanie użytkownika ze strony marketingowej produktu bezpośrednio do aplikacji
- Scentralizujemy niektóre funkcje, takie jak powiadomienia w innej aplikacji, aby zapobiec powielaniu powiadomień.
- nie promować instalacji aplikacji PWA, jeśli inna aplikacja jest już zainstalowana;
Aby korzystać z interfejsu getInstalledRelatedApps()
API, musisz poinformować aplikację o swojej witrynie, a potem poinformować ją o aplikacji. Po zdefiniowaniu relacji możesz sprawdzić, czy aplikacja jest zainstalowana.
Obsługiwane typy aplikacji, które możesz sprawdzić
Typ aplikacji | Można wybrać z |
---|---|
W aplikacji na Androida |
Tylko Android Chrome w wersji 80 lub nowszej |
Aplikacja Windows (UWP) |
Tylko w systemie Windows Chrome w wersji 85 lub nowszej Edge 85 lub nowsza |
Progresywna aplikacja internetowa Zainstalowana w tym samym zakresie lub innym zakresie. |
Tylko Android Chrome w wersji 84 lub nowszej |
Sprawdzanie, czy aplikacja na Androida jest zainstalowana
Twoja witryna może sprawdzić, czy jest zainstalowana aplikacja na Androida.
Android: Chrome 80 lub nowsza wersja
Informowanie aplikacji na Androida o stronie internetowej
Najpierw musisz zaktualizować aplikację na Androida, aby zdefiniować relację między witryną a aplikacją na Androida za pomocą systemu Digital Asset Links. Dzięki temu tylko Twoja witryna może sprawdzić, czy masz zainstalowaną aplikację na Androida.
W sekcji AndroidManifest.xml
aplikacji na Androida dodaj wpis asset_statements
:
<manifest>
<application>
…
<meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
…
</application>
</manifest>
Następnie w usłudze strings.xml
dodaj poniższe informacje o komponentach, aktualizując site
przy użyciu danych domeny. Pamiętaj, aby uwzględnić znaki zmiany znaczenia.
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
</string>
Gdy skończysz, opublikuj zaktualizowaną aplikację na Androida w Sklepie Play.
Poinformuj swoją witrynę o aplikacji na Androida
Następnie przekaż swojej witrynie informacje o aplikacji na Androida, dodając do niej plik manifestu. Plik manifestu musi zawierać właściwość related_applications
, czyli tablicę ze szczegółowymi informacjami o aplikacji, m.in. platform
i id
.
- Wartość w polu
platform
musi wynosićplay
id
to identyfikator aplikacji Google Play dla Twojej aplikacji na Androida
{
"related_applications": [{
"platform": "play",
"id": "com.android.chrome",
}]
}
Sprawdzanie, czy aplikacja jest zainstalowana
Na koniec wywołaj navigator.getInstalledRelatedApps()
, aby sprawdzić, czy Twoja aplikacja na Androida jest zainstalowana.
Wypróbuj prezentację
Sprawdzanie, czy jest zainstalowana aplikacja Windows (UWP)
Witryna może sprawdzić, czy jest zainstalowana aplikacja Windows (utworzona przy użyciu UWP).
Windows: Chrome 85 lub nowsza wersja, Edge 85 lub nowsza
Przekazywanie aplikacji Windows do witryny
Aby zdefiniować relację między witryną a aplikacją systemu Windows za pomocą modułów obsługi identyfikatora URI, musisz zaktualizować aplikację w systemie Windows. Dzięki temu tylko Twoja witryna będzie mogła sprawdzić, czy masz zainstalowaną aplikację dla systemu Windows.
Dodaj rejestrację rozszerzenia Windows.appUriHandler
do pliku manifestu aplikacji Package.appxmanifest
. Jeśli na przykład adres witryny to example.com
, dodaj do pliku manifestu aplikacji 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>
Może być konieczne dodanie przestrzeni nazw uap3
do atrybutu <Package>
.
Następnie utwórz plik JSON (bez rozszerzenia pliku .json
) o nazwie windows-app-web-link
i podaj nazwę rodziny pakietów aplikacji. Umieść ten plik w katalogu głównym serwera lub w katalogu /.well-known/
. Nazwę rodziny pakietów znajdziesz w sekcji „Pakowanie” w designie pliku manifestu aplikacji.
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
Szczegółowe informacje o konfigurowaniu modułów obsługi identyfikatorów URI znajdziesz w artykule Włączanie aplikacji dla witryn korzystających z modułów obsługi identyfikatorów URI aplikacji.
Przekazywanie informacji o aplikacji do systemu Windows do witryny
Następnie powiedz swojej witrynie o aplikacji dla systemu Windows, dodając do niej plik manifestu aplikacji internetowej. Plik manifestu musi zawierać właściwość related_applications
, czyli tablicę ze szczegółowymi informacjami o aplikacji, w tym o platform
i id
.
- Wartość w polu
platform
musi wynosićwindows
id
to nazwa rodziny pakietów Twojej aplikacji, do której w plikuPackage.appxmanifest
dodana jest wartość<Application>
Id
.
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
Sprawdzanie, czy aplikacja jest zainstalowana
Na koniec wywołaj navigator.getInstalledRelatedApps()
, aby sprawdzić, czy aplikacja na Windows jest zainstalowana.
Sprawdzanie, czy progresywna aplikacja internetowa jest już zainstalowana (w zakresie)
PWA może sprawdzić, czy jest już zainstalowana. W tym przypadku strona, z której pochodzi żądanie, musi znajdować się w tej samej domenie i w zakresie Twojej PWA, zgodnie z zakresem określonym w pliku manifestu aplikacji internetowej.
Android: Chrome 84 lub nowsza wersja
Opowiedz o swojej aplikacji PWA
Opowiedz o swojej aplikacji PWA, dodając wpis related_applications
do pliku manifestu aplikacji internetowej.
- Wartość w polu
platform
musi wynosićwebapp
url
to pełna ścieżka do pliku manifestu aplikacji internetowej Twojej PWA
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
Sprawdzanie, czy aplikacja PWA jest zainstalowana
Na koniec wywołaj navigator.getInstalledRelatedApps()
z zakresu Twojej aplikacji PWA, aby sprawdzić, czy jest zainstalowana. Jeśli usługa getInstalledRelatedApps()
zostanie wywołana poza zakresem Twojej aplikacji PWA, zwróci wartość false (fałsz). Więcej informacji na ten temat można znaleźć w następnej sekcji.
Wypróbuj prezentację
Sprawdzanie, czy jest zainstalowana progresywna aplikacja internetowa (poza zakresem)
Twoja witryna może sprawdzić, czy aplikacja PWA jest zainstalowana, nawet jeśli strona wykracza poza zakres tej aplikacji. Na przykład strona docelowa wyświetlana z /landing/
może sprawdzić, czy zainstalowana jest aplikacja PWA wyświetlana z domeny /pwa/
lub czy strona docelowa jest wyświetlana z www.example.com
, a PWA – z app.example.com
.
Android: Chrome 84 lub nowsza wersja
Poinformuj aplikację PWA o swojej witrynie
Najpierw musisz dodać linki do zasobów cyfrowych do serwera, z którego jest wyświetlana Twoja aplikacja PWA. Pomoże to określić relację między Twoją witryną a PWA i zagwarantuje, że tylko Twoja witryna będzie mogła sprawdzać, czy zainstalowana jest aplikacja PWA.
Dodaj plik assetlinks.json
do katalogu /.well-known/
domeny, w której działa PWA, np. app.example.com
. We właściwości site
podaj pełną ścieżkę do pliku manifestu aplikacji internetowej, który przeprowadzi sprawdzanie (nie do pliku manifestu Twojej 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"
}
}
]
Napisz opinię o aplikacji PWA w swojej witrynie
Następnie poinformuj witrynę o aplikacji PWA, dodając do niej plik manifestu aplikacji internetowej. Plik manifestu musi zawierać właściwość related_applications
, czyli tablicę ze szczegółowymi informacjami o PWA, w tym platform
i url
.
- Wartość w polu
platform
musi wynosićwebapp
url
to pełna ścieżka do pliku manifestu aplikacji internetowej Twojej PWA
{
"related_applications": [{
"platform": "webapp",
"url": "https://app.example.com/manifest.json",
}]
}
Sprawdzanie, czy aplikacja PWA jest zainstalowana
Na koniec wywołaj navigator.getInstalledRelatedApps()
, aby sprawdzić, czy Twoja aplikacja PWA jest zainstalowana.
Wypróbuj prezentację
Wywoływanie metody getinstalledRelatedApps()
Wywołanie navigator.getInstalledRelatedApps()
zwraca obietnicę, która odnosi się do 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 zapobiec testowaniu zbyt szerokiego zestawu własnych aplikacji przez witryny, uwzględnimy tylko 3 pierwsze aplikacje zadeklarowane w pliku manifestu aplikacji internetowej.
Podobnie jak większość innych zaawansowanych interfejsów API internetowych, interfejs getInstalledRelatedApps()
API jest dostępny tylko wtedy, gdy jest wyświetlany przez HTTPS.
Nadal masz pytania?
Nadal masz pytania? Sprawdź tag getInstalledRelatedApps
na stronie StackOverflow, aby zobaczyć, czy ktoś inny nie zadał podobnych pytań. Jeśli nie, zadaj tam pytanie i pamiętaj, by oznaczyć je tagiem progressive-web-apps
. Nasz zespół często monitoruje
ten tag i stara się odpowiedzieć na Twoje pytania.
Prześlij opinię
Czy wystąpił błąd związany z implementacją przeglądarki Chrome? A może implementacja różni się od specyfikacji?
- Zgłoś błąd na https://new.crbug.com. Podaj jak najwięcej szczegółów, podaj proste instrukcje odtworzenia błędu i wpisz
Mobile>WebAPKs
w polu Komponenty. Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.
Pokaż obsługę interfejsu API
Czy zamierzasz używać interfejsu API getInstalledRelatedApps()
? Twoja publiczna pomoc pomaga zespołowi Chrome priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.
- W wątku WICG Discourse opisz, jak zamierzasz korzystać z interfejsu API.
- Wyślij tweeta na adres @ChromiumDev, używając hashtagu
#getInstalledRelatedApps
, i daj nam znać, gdzie i w jaki sposób go używasz.
Przydatne linki
- Publiczne wyjaśnienie dla interfejsu API
getInstalledRelatedApps()
- Wersja robocza specyfikacji
- Śledzenie błędów
- Wpis na ChromeStatus.com
- Komponent Blink:
Mobile>WebAPKs
Dziękujemy
Szczególnie dziękujemy Sunggookowi Chue z firmy Microsoft za pomoc w testowaniu aplikacji na Windows i Rayanowi Kanso za pomoc dotyczącą Chrome.