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

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

Pete LePage

Co to jest interfejs API getinstalledRelatedApps()?

getInstalledRelatedApps() umożliwia Twojej stronie sprawdź, czy aplikacja ona mobilna czy komputerowa, a w niektórych przypadkach, jeśli aplikacja Aplikacja internetowa (PWA) jest już zainstalowana na urządzeniu użytkownika i umożliwia i w razie potrzeby dostosować środowisko do własnych potrzeb.

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 z drugiej aplikacji, są scentralizowane, i zapobiegaj duplikowaniu powiadomień.
• brak promowania instalacji PWA, jeśli inna aplikacja jest już zainstalowana.

Aby korzystać z interfejsu API getInstalledRelatedApps(), musisz poinformować aplikację o Twoją witrynę, a potem poinformuj ją o niej. Po zdefiniowaniu parametru można sprawdzić, czy aplikacja jest zainstalowana.

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

Sprawdzanie, czy aplikacja na Androida jest zainstalowana

Twoja strona może sprawdzić, czy masz zainstalowaną aplikację na Androida.

Przekazywanie aplikacji na Androida informacji o witrynie

Najpierw musisz zaktualizować aplikację na Androida, aby zdefiniować relację między witryną a aplikacją na Androida za pomocą System Digital Asset Links Dzięki temu tylko może sprawdzić, czy Twoja aplikacja na Androida jest zainstalowana.

W AndroidManifest.xml aplikacji na Androida dodaj asset_statements wpis:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Następnie w sekcji strings.xml dodaj następujące zestawienie informacji o zasobach, aktualizując site o w Twojej domenie. Pamiętaj, aby użyć znaków 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 witryny o aplikacji na Androida

Następnie poinformuj witrynę o aplikacji na Androida przez dodanie do strony pliku manifestu aplikacji internetowej. Plik manifestu musi uwzględnij właściwość related_applications, tablicę ze szczegółami o Twojej aplikacji, w tym platform i id.

• platform musi mieć wartość play
• id to identyfikator Twojej aplikacji na Androida w Google Play

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Sprawdzanie, czy aplikacja jest zainstalowana

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

Zobacz prezentację

Sprawdzanie, czy aplikacja Windows (UWP) jest zainstalowana

Witryna może sprawdzić, czy jest zainstalowana aplikacja dla systemu Windows (utworzona za pomocą UWP).

Informowanie aplikacji systemu Windows o witrynie

Aby zdefiniować relację między witryny i aplikacji systemu Windows za pomocą modułów obsługi URI. Ten Dzięki temu tylko Twoja witryna może sprawdzić, czy masz zainstalowaną aplikację Windows.

Dodaj rejestrację rozszerzenia Windows.appUriHandler do pliku manifestu aplikacji plik Package.appxmanifest. Jeśli na przykład adres witryny to example.com w pliku manifestu aplikacji musisz dodać 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>

Uwaga: konieczne może być dodanie do pola przestrzeni nazw uap3 <Package>.

Następnie utwórz plik JSON (bez rozszerzenia .json) o nazwie windows-app-web-link i podaj nazwę rodziny pakietów aplikacji. Miejsce ten plik w katalogu głównym serwera lub w katalogu /.well-known/. Ty może znaleźć nazwę rodziny pakietów w sekcji Opakowanie w manifeście aplikacji projektantką.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

Przeczytaj artykuł Włączanie aplikacji dla witryn korzystających z modułów obsługi identyfikatora URI aplikacji w tych artykułach: szczegółowe informacje o konfigurowaniu modułów obsługi identyfikatorów URI.

Informowanie witryny o aplikacji Windows

Następnie poinformuj witrynę o aplikacji Windows, dodanie do strony pliku manifestu aplikacji internetowej. Plik manifestu musi dołącz właściwość related_applications, tablica ze szczegółami o Twojej aplikacji, w tym platform i id.

• platform musi mieć wartość windows
• id to nazwa rodziny pakietów aplikacji uzupełniona o <Application> Id w pliku Package.appxmanifest.

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

Sprawdzanie, czy aplikacja jest zainstalowana

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

Sprawdź, czy progresywna aplikacja internetowa jest już zainstalowana (w zakresie)

Aplikacja PWA może sprawdzić, czy została już zainstalowana. W tym przypadku strona żądanie musi znajdować się w tej samej domenie i być objęte zakresem Twojej aplikacji PWA, zgodnie z zakresem w pliku manifestu aplikacji internetowej.

Poinformuj aplikację PWA o sobie

Powiedz swojej aplikacji PWA o sobie, dodając wpis related_applications w sekcji Plik manifestu aplikacji internetowej PWA.

• platform musi mieć wartość webapp
• url to pełna ścieżka do pliku manifestu aplikacji internetowej PWA

{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  …
}

Sprawdzanie, czy aplikacja PWA jest zainstalowana

Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps() z poziomu zakres aplikacji PWA, aby sprawdzić, czy jest zainstalowana. Jeśli Aplikacja getInstalledRelatedApps() jest wywoływana poza zakresem Twojej aplikacji PWA, zwraca wartość fałsz. Więcej informacji na ten temat można znaleźć w następnej sekcji.

Zobacz prezentację

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

Twoja witryna może sprawdzić, czy aplikacja PWA została zainstalowana, nawet jeśli strona znajduje się poza nią zakres aplikacji PWA. Na przykład strona docelowa wyświetlana z /landing/ może sprawdzić, czy aplikacja PWA obsługiwana z adresu /pwa/ jest zainstalowana z domeny www.example.com, a PWA – z app.example.com

Przekazywanie PWA informacji o witrynie

Najpierw musisz dodać linki do zasobów cyfrowych do serwera, na którym znajduje się Twoja aplikacja PWA. . Ułatwi to zdefiniowanie relacji między witryną i zapewnia, że tylko Twoja witryna może sprawdzić, czy została zainstalowana.

Dodaj plik assetlinks.json do katalogu /.well-known/ domeny, w której znajduje się aplikacja PWA, na przykład app.example.com. W: site podaj pełną ścieżkę do pliku manifestu aplikacji internetowej, który (nie jest to plik 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 progresywnej aplikacji internetowej

Następnie poinformuj witrynę o aplikacji PWA do dodanie do strony pliku manifestu aplikacji internetowej. Plik manifestu musi uwzględnij właściwość related_applications, tablicę ze szczegółami o PWA, w tym o platform i url.

• platform musi mieć wartość webapp
• url to pełna ścieżka do pliku manifestu aplikacji internetowej PWA

{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

Sprawdzanie, czy aplikacja PWA jest zainstalowana

Na koniec zadzwoń pod numer navigator.getInstalledRelatedApps(), aby sprawdzić, czy Zainstalowano aplikację PWA.

Zobacz prezentację

Wywołanie metody getINSTALLRelatedApps()

Wywołanie navigator.getInstalledRelatedApps() zwraca obietnicę, że znajduje się w 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 uniemożliwić stronom testowanie zbyt szerokiego zestawu własnych aplikacji: tylko 3 pierwsze aplikacje zadeklarowane w manifeście aplikacji internetowej zostaną jest wzięty pod uwagę.

Podobnie jak większość zaawansowanych interfejsów API, interfejs API getInstalledRelatedApps() jest dostępna tylko przy użyciu protokołu HTTPS.

Nadal masz pytania?

Nadal masz pytania? Sprawdź tag getInstalledRelatedApps na stronie StackOverflow aby sprawdzić, czy ktoś nie miał podobnych pytań. Jeśli nie, zapytaj pytania i pamiętaj, by oznaczyć je tagiem progressive-web-apps. Nasz zespół często monitoruje ten tag i spróbuje odpowiedzieć na Twoje pytania.

Prześlij opinię

Czy wystąpił błąd z implementacją Chrome? Czy wdrożenie różni się od specyfikacji?

• Zgłoś błąd na https://new.crbug.com. Uwzględnij jak najwięcej Podaj możliwie najdokładniejsze instrukcje umożliwiające odtworzenie błędu. W polu Komponenty wpisz Mobile>WebAPKs. Błąd to świetny sposób na szybkie i łatwe udostępnianie.

Pokaż wsparcie dla interfejsu API

Czy zamierzasz korzystać z interfejsu API getInstalledRelatedApps()? Twoje publiczne pomocy pomaga zespołowi Chrome ustalać priorytety funkcji i pokazywać inne dostawców przeglądarek.

• Opisz planowany sposób korzystania z interfejsu API w wątku z dyskusją WICG.
• Wyślij tweeta na adres @ChromiumDev, używając hashtagu #getInstalledRelatedApps. i daj nam znać, gdzie i jak go używasz.

Przydatne linki

• Publiczne wyjaśnienie dotyczące interfejsu getInstalledRelatedApps() API
• Wersja robocza specyfikacji
• Śledzenie błędu
• Wpis na temat ChromeStatus.com
• Komponent Blink: Mobile>WebAPKs

Dziękujemy

Specjalne podziękowania dla Sunggook Chue w firmie Microsoft za pomoc w przekazaniu szczegółowych informacji za testowanie aplikacji dla systemu Windows, oraz Rayan Kanso, który udzieli Ci pomocy w kwestiach dotyczących Chrome.