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/na komputer lub PWA.

Pete LePage

Czym jest interfejs getInstalledRelatedApps() API?

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 ze strony marketingowej produktu bezpośrednio do Twojej aplikacji.
• Niektóre funkcje, takie jak powiadomienia, scentralizuje się w drugiej aplikacji, aby zapobiec ich duplikowaniu.
• 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 tymi elementami możesz sprawdzić, czy aplikacja jest zainstalowana.

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

Sprawdź, czy aplikacja na Androida jest zainstalowana

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

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 może sprawdzać, 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 do strony plik manifestu aplikacji internetowej. Plik manifestu musi zawierać właściwość related_applications, tablicę ze szczegółowymi informacjami o aplikacji, w tym właściwości 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.

Zobacz prezentację

Sprawdzanie, czy aplikacja Windows (UWP) jest zainstalowana

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

Informowanie aplikacji systemu Windows o 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. Jeśli na przykład adres witryny to example.com, do pliku manifestu aplikacji dodaj taki 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 .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 korzystających z modułów obsługi identyfikatorów URI aplikacji.

Informowanie witryny o aplikacji Windows

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, tablicę ze szczegółowymi informacjami o aplikacji, w tym właściwości platform i id.

• Wartość platform musi być równa windows
• id to nazwa rodziny pakietów aplikacji, do której w pliku Package.appxmanifest dołączana jest wartość Id <Application>.

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

Sprawdź, czy aplikacja jest zainstalowana

Na koniec wywołaj navigator.getInstalledRelatedApps(), by sprawdzić, czy masz zainstalowaną aplikację Windows.

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

PWA może sprawdzić, czy jest już zainstalowana. W tym przypadku strona tworząca żądanie musi znajdować się w tej samej domenie i znajdować się w zakresie aplikacji PWA zdefiniowanym w pliku manifestu aplikacji internetowej.

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ą

Sprawdź, czy zainstalowano progresywną aplikację internetową (poza zakresem)

Twoja witryna może sprawdzić, czy aplikacja PWA jest zainstalowana, nawet jeśli jej strona wykracza poza zakres tej aplikacji. Na przykład strona docelowa z /landing/ może sprawdzać, czy jest zainstalowana PWA z /pwa/, lub czy strona docelowa jest wyświetlana z www.example.com, a PWA z app.example.com.

Poinformuj swoją 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 zdefiniować relację między Twoją witryną a progresywną aplikacją internetową i zadba o to, aby tylko Twoja witryna mogła sprawdzić, czy aplikacja PWA jest zainstalowana.

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

Wypróbuj wersję demonstracyjną

Wywoływanie getInstalledRelatedApps()

Wywołanie navigator.getInstalledRelatedApps() zwraca obietnicę obejmującą 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 stronie StackOverflow, aby zobaczyć, czy ktoś nie miał podobnych pytań. Jeśli nie, zadaj pytanie i otaguj je tagiem progressive-web-apps. Nasz zespół często sprawdza tę etykietę i stara się odpowiadać na Twoje pytania.

Prześlij opinię

Czy znalazłeś/znalazłaś błąd w implementacji Chrome? A może 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 opinia pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

• W tym wątku na forum Discourse dotyczącego WCG opisz, jak planujesz używać interfejsu API.
• Wyślij tweeta do @ChromiumDev, używając hashtaga #getInstalledRelatedApps, i podaj, gdzie i jak go używasz.

Przydatne linki

• Publiczne wyjaśnienie dotyczące interfejsu getInstalledRelatedApps() API
• Specyfikacja w wersji roboczej
• Śledzenie błędu
• Wpis na stronie ChromeStatus.com
• Komponent Blink: Mobile>WebAPKs

Dziękujemy

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