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

Metoda getInstalledRelatedApps() pozwala witrynie sprawdzić, czy na urządzeniu użytkownika jest zainstalowana aplikacja na iOS/Androida/komputera lub PWA.

Pete LePage

Czym jest interfejs getInstalledRelatedApps() API?

Witryna, która używa getInstalledRelatedApps() do określenia, czy jej aplikacja na Androida jest już zainstalowana.

Parametr getInstalledRelatedApps() umożliwia stronie sprawdzenie, czy Twoja aplikacja mobilna lub aplikacja na komputer, a w niektórych przypadkach progresywna aplikacja internetowa (PWA), jest już zainstalowana na urządzeniu użytkownika. Jeśli tak, możesz dostosować wyświetlane treści.

Jeśli na przykład aplikacja jest już zainstalowana:

  • Przekierowywanie użytkownika z strony marketingowej produktu bezpośrednio do aplikacji.
  • Scentralizowanie niektórych funkcji, takich jak powiadomienia, w innej aplikacji, aby uniknąć dublowania powiadomień.
  • Nie promujesz instalacji PWA, jeśli inna aplikacja jest już zainstalowana.

Aby korzystać z interfejsu API getInstalledRelatedApps(), musisz poinformować aplikację o swojej witrynie, a potem poinformować witrynę o aplikacji. Po zdefiniowaniu relacji między nimi możesz sprawdzić, czy aplikacja jest zainstalowana.

Obsługiwane typy aplikacji, które możesz sprawdzić

Typ aplikacji Dostępne w ramach
Aplikacja na Androida Tylko Android
Chrome 80 lub nowsza
Aplikacja na Windowsa (UWP) Tylko Windows
Chrome 85 lub nowsza
Edge 85 lub nowsza
Progresywna aplikacja internetowa
Zainstalowana w tym samym zakresie lub innym zakresie. 		Tylko Android
Chrome 84 lub nowszy

Sprawdź, czy aplikacja na Androida jest zainstalowana

Witryna może sprawdzić, czy aplikacja na Androida jest zainstalowana.

Obsługiwane na:

Android: Chrome 80 lub nowsza wersja

Poinformuj aplikację na Androida o swojej witrynie

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 będzie mogła sprawdzić, czy aplikacja na Androida jest zainstalowana.

W 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 sekcji strings.xml dodaj to oświadczenie o zawartości, zastępując site swoją domeną. Pamiętaj, aby uwzględnić znaki 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 o aplikacji na Androida na stronie internetowej

Następnie poinformuj swoją witrynę o aplikacji na Androida, dodając plik manifestu aplikacji internetowej do strony. Plik manifestu musi zawierać właściwość related_applications, czyli tablicę z informacjami o aplikacji, w tym platform i id.

  • Wartość platform musi być równa play
  • id to identyfikator aplikacji w Google Play Twojej aplikacji na Androida.
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Sprawdź, czy aplikacja jest zainstalowana

Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps(), aby sprawdzić, czy aplikacja na Androida jest zainstalowana.

Wypróbuj wersję demonstracyjną

Sprawdź, czy aplikacja na Windowsa (UWP) jest zainstalowana

Twoja witryna może sprawdzić, czy aplikacja na Windowsa (stworzona przy użyciu interfejsu UWP) jest zainstalowana.

Obsługiwane na:

Windows: Chrome 85 lub nowsza, Edge 85 lub nowsza

Informowanie aplikacji Windows o Twojej witrynie

Aby zdefiniować relację między witryną a aplikacją na Windowsa, musisz zaktualizować aplikację na Windowsa, korzystając z obsług URI. Dzięki temu tylko Twoja witryna będzie mogła sprawdzić, czy aplikacja na Windows jest zainstalowana.

Dodaj do pliku manifestu aplikacji Package.appxmanifest rejestrację rozszerzenia Package.appxmanifest.Windows.appUriHandler Jeśli np. adres Twojej witryny to example.com, w pliku manifestu aplikacji dodaj 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>

Pamiętaj, że do atrybutu <Package> może być konieczne dodanie przestrzeni nazw uap3.

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 projektancie 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 za pomocą modułów obsługi identyfikatorów URI aplikacji.

Informowanie o aplikacji Windows w witrynie

Następnie poinformuj swoją witrynę o aplikacji Windows, dodając plik manifestu aplikacji internetowej do strony. Plik manifestu musi zawierać właściwość related_applications, czyli tablicę z informacjami o aplikacji, w tym platform i id.

  • Wartość platform musi być równa windows
  • id to nazwa rodziny pakietu aplikacji, do której dołączona jest wartość <Application> Id w pliku Package.appxmanifest.
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

Sprawdź, czy aplikacja jest zainstalowana

Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps(), aby sprawdzić, czy aplikacja na Windowsa jest zainstalowana.

Sprawdź, czy aplikacja Progressive Web jest już zainstalowana (w zakresie)

PWA może sprawdzić, czy jest już zainstalowana. W takim przypadku strona wysyłająca żądanie musi znajdować się w tej samej domenie i w zakresie aplikacji internetowej, zgodnie z definicją zakresu w pliku manifestu aplikacji internetowej.

Obsługiwane na:

Android: Chrome 84 lub nowsza wersja

Informowanie PWA o sobie

Podaj informacje o swojej aplikacji PWA, dodając wpis related_applications w pliku manifestu aplikacji internetowej.

  • Wartość platform musi być równa webapp
  • url to pełna ścieżka do pliku manifestu Twojej progresywnej aplikacji internetowej
{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  …
}

Sprawdź, czy PWA jest zainstalowana

Na koniec wywołaj navigator.getInstalledRelatedApps() w zakresie PWA, aby sprawdzić, czy jest zainstalowana. Jeśli funkcja getInstalledRelatedApps() zostanie wywołana poza zakresem PWA, zwróci wartość false. Więcej informacji na ten temat można znaleźć w następnej sekcji.

Wypróbuj wersję demonstracyjną

Sprawdzanie, czy progresywna aplikacja internetowa jest zainstalowana (poza zakresem)

Twoja witryna może sprawdzić, czy PWA jest zainstalowana, nawet jeśli strona znajduje się poza zakresem PWA. Na przykład strona docelowa wyświetlana z adresu /landing/ może sprawdzać, czy jest zainstalowana aplikacja PWA wyświetlana z adresu /pwa/, lub czy strona docelowa jest wyświetlana z adresu www.example.com, a aplikacja PWA z adresu app.example.com.

Obsługiwane na:

Android: Chrome 84 lub nowsza wersja

Poinformuj swoją PWA o swojej witrynie

Najpierw musisz dodać linki do zasobów cyfrowych na serwerze, z którego serwowana jest PWA. Pomoże to określić relację między Twoją witryną a PWA i zapewni, że tylko Twoja witryna będzie mogła sprawdzić, czy PWA jest zainstalowana.

Dodaj plik assetlinks.json do katalogu /.well-known/ domeny, w której znajduje się PWA, np. app.example.com. W właściwości site podaj pełną ścieżkę do pliku manifestu aplikacji internetowej, który będzie przeprowadzać sprawdzanie (nie pliku 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 PWA

Następnie poinformuj swoją witrynę o aplikacji PWA, dodając plik manifestu aplikacji internetowej do strony. Plik manifestu musi zawierać właściwość related_applications, czyli tablicę z informacjami o Twojej aplikacji PWA, w tym platform i url.

  • Wartość platform musi być równa webapp
  • url to pełna ścieżka do pliku manifestu Twojej progresywnej aplikacji internetowej
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

Sprawdź, czy PWA jest zainstalowana

Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps(), aby sprawdzić, czy aplikacja PWA jest zainstalowana.

Wypróbuj wersję demonstracyjną

Wywoływanie getInstalledRelatedApps()

Wywołanie funkcji navigator.getInstalledRelatedApps() zwraca obietnicę, która zwraca tablicę 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ć witrynom testowanie zbyt szerokiego zbioru własnych aplikacji, weźmiemy pod uwagę tylko 3 pierwsze aplikacje zadeklarowane w manifeście aplikacji internetowej.

Podobnie jak większość innych zaawansowanych interfejsów API, interfejs getInstalledRelatedApps() jest dostępny tylko w przypadku korzystania z protokołu HTTPS.

Nadal masz pytania?

Nadal masz pytania? Sprawdź tag getInstalledRelatedApps na StackOverflow, aby zobaczyć, czy ktoś inny nie zadał podobnego pytania. Jeśli nie, zadaj pytanie i otaguj je tagiem progressive-web-apps. Nasz zespół często sprawdza ten tag i stara się odpowiadać na Twoje pytania.

Prześlij opinię

Czy znalazłeś/znalazłaś błąd w implementacji Chrome? Czy implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, dołącz proste instrukcje odtwarzania błędu i wpisz Mobile>WebAPKs w polu Składniki. Glitch świetnie sprawdza się do udostępniania szybkich i prostych sposobów odtwarzania.

Pokaż informacje o pomocy dotyczącej interfejsu API

Zamierzasz używać interfejsu API getInstalledRelatedApps()? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Przydatne linki

Dziękujemy

Szczególne podziękowania dla Sunggook Chue z Microsoftu za pomoc w testowaniu aplikacji Windows oraz dla Rayana Kanso za pomoc w uzyskaniu informacji o Chrome.