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?

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ć

Sprawdź, czy aplikacja na Androida jest zainstalowana

Witryna może sprawdzić, czy 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 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.

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.

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.

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.

• 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

• Publiczny opis interfejsu API getInstalledRelatedApps()
• Specyfikacja w wersji roboczej
• Śledzenie błędu
• Wpis na stronie ChromeStatus.com
• Składnik Blink: Mobile>WebAPKs

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.