Czy Twoja aplikacja jest zainstalowana? Poinformuje Cię to na stronie getinstalledrelatedApps().

Metoda getInstalledRelatedApps() umożliwia witrynie sprawdzenie, czy na urządzeniu użytkownika jest zainstalowana aplikacja na iOS, Androida lub komputer albo PWA.

Piotr LePage

Czym jest interfejs API getSupportedRelatedApps()?

Witryna używająca atrybutu getInstalledRelatedApps() w celu określenia, czy aplikacja na Androida jest już zainstalowana.

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.

Obsługiwane na:

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

Obsługiwane na:

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

Obsługiwane na:

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.

Obsługiwane na:

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.

Przydatne linki

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.