Wykrywanie

Możesz sprawdzić, czy użytkownik używa Twojej aplikacji PWA w przeglądarce, czy w trybie samodzielnym. W przeglądarkach opartych na Chromium (Android i komputery) możesz też wykrywać te zdarzenia:

  • Stan i wynik okna dialogowego zaproszenia do instalacji.
  • Instalacja ukończona.
  • Nawigacja z przeglądarki do okna PWA i odwrotnie.
  • Stan instalacji PWA.
  • Powiązana aplikacja została zainstalowana ze sklepu z aplikacjami.

Możesz używać tych danych do celów analitycznych oraz poznawania preferencji użytkowników i dostosowywania ich do swoich potrzeb. Aby przechwycić te zdarzenia, możesz użyć narzędzi takich jak zapytania o multimedia lub zdarzenia z window albo interfejsów API funkcji, które znajdziesz tutaj.

Wykrywanie trybu wyświetlania

Aby śledzić, jak użytkownicy uruchamiają Twoją progresywną aplikację internetową, możesz przetestować zapytanie o media display-mode za pomocą narzędzia matchMedia().

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

Jeśli korzystasz z tego przykładu, pamiętaj, aby dopasować tryb wyświetlania z pliku manifestu aplikacji internetowej, na przykład standalone, minimal-ui lub fullscreen. Możesz też dopasować wiele zapytań w ciągu zapytania o media, używając warunków rozdzielonych przecinkami.

Do pliku start_url w pliku manifestu możesz też dodać parametr zapytania, który możesz rejestrować za pomocą narzędzi analitycznych, aby śledzić statystyki dotyczące czasu, w jaki sposób i częstotliwości korzystania z PWA.

Instalacja aplikacji

Gdy użytkownik zaakceptuje w przeglądarce monit o zainstalowanie, zdarzenie appinstalled uruchomi się w przeglądarkach opartych na Chromium. Świetnie sprawdza się on w usuwaniu dodanych przez Ciebie promocji instalacji w aplikacji.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

Pamiętaj, że na urządzeniach z Androidem z WebAPK zdarzenie jest wywoływane po zaakceptowaniu okna przez użytkownika, a nie po wygenerowaniu i zainstalowaniu pakietu WebAPK. Do pełnego zainstalowania aplikacji może minąć kilka sekund.

W rozdziale dotyczącym prośby o instalację wyjaśniamy, jak sprawdzić, czy prośba o instalację jest dostępna, i jaki wybrać użytkownik.

Przenoszenie sesji

Użytkownicy mogą korzystać z Twojej aplikacji PWA w przeglądarce i w zainstalowanej, samodzielnej aplikacji. W przeglądarkach na komputerach możesz przenosić bieżącą nawigację między tymi kontekstami przy użyciu plakietek lub pozycji menu, tak jak na ilustracji poniżej.

Przechodzenie między kartą przeglądarki a oknem PWA.

Na urządzeniu z Androidem w przeglądarce na komputerze znajduje się pozycja menu podobna do tej na komputerze, która przenosi nawigację do aplikacji. W takim przypadku bieżący adres URL jest otwarty, ale będzie to nowa nawigacja ze strony w aplikacji.

Na ilustracji poniżej widać pozycję menu w Androidzie, gdy aplikacja jest już zainstalowana.

Chrome na Androidzie wyświetla pozycję menu, która otwiera nową nawigację w oknie PWA.

Przenieś po instalacji

W przeglądarkach na komputerach bieżąca nawigacja jest natychmiast przenoszona do aplikacji po instalacji. Karta przeglądarki jest zamknięta, a nowo zainstalowana aplikacja jest otwierana i kontynuuje to, co użytkownik robił.

W przeglądarkach mobilnych bieżąca nawigacja pozostaje w przeglądarce po zainstalowaniu aplikacji. Jeśli użytkownicy chcą przejść do aplikacji, muszą otworzyć ją ręcznie. Będzie to nowa nawigacja.

Wykrywanie transferu

Aby wykryć przenoszenie między przeglądarką a oknem, możesz użyć zapytania o multimedia:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

Izolacja pamięci masowej na iOS i iPadOS

W iOS i iPadOS nie ma nawigacji ani przenoszenia adresu URL między przeglądarką a ikoną instalacji. Nawet jeśli jest to ta sama progresywna aplikacja internetowa, każda ikona PWA zainstalowana przez użytkownika będzie miała własną pamięć inną niż karty i inne ikony przeglądarki Safari. Gdy użytkownik otworzy ikonę Zainstalowana, Safari nie otrzyma żadnego miejsca na dane. Jeśli aplikacja PWA wymaga logowania, użytkownik będzie musiał zalogować się ponownie. Jeśli aplikacja została dodana do ekranu głównego kilka razy, dla każdej instancji PWA użytkownik ma inną sesję.

Obsługa przeglądarek

  • x
  • 79
  • x
  • x

Źródło

Witryna wskazuje relację z aplikacją za pomocą pliku manifestu. Aby to zrobić, użyj elementu related_applications specyfikacji pliku manifestu aplikacji internetowych. Klucz related_applications to tablica obiektów reprezentujących każdą powiązaną aplikację. Każda pozycja zawiera wartości platform, url i opcjonalną id.

Oto możliwe wartości platformy:

  • chrome_web_store: Google Chrome Web Store
  • play: aplikacje z Google Play (Android i ChromeOS).
  • chromeos_play: ChromeOS Play.
  • webapp: aplikacje internetowe.
  • windows: Microsoft Store (Windows 10 i 11).
  • f-droid: F-droid.
  • amazon: Amazon AppStore (FireOS).

Gdy użytkownik zainstaluje aplikację, możesz przekierować go do powiązanej aplikacji, jeśli w polu prefer_related_applications w pliku manifestu ustawisz wartość true. W przypadku tej konfiguracji w zgodnych przeglądarkach proces instalacji nie instaluje aplikacji PWA; zamiast tego uruchamia instalację sklepu ze źródła url lub id określonego we wpisie related_applications.

Powiązaną aplikacją może być Twoja aplikacja PWA, która zostanie zainstalowana ze sklepu z aplikacjami. Jedną z zalet tej konfiguracji jest to, że obecnie tylko aplikacje zainstalowane ze sklepu z aplikacjami są przywracane przy użyciu kopii zapasowej lub po przełączeniu się na nowe urządzenie.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Banery aplikacji inteligentnych Apple

Safari nie obsługuje subskrypcji related_applications, ale oferuje banery aplikacji inteligentnych dla aplikacji ze sklepu App Store. Jeśli więc chcesz promować aplikację PWA lub inną aplikację opublikowaną w App Store, możesz umieścić w jej kodzie HTML metatagi, aby zaprosić użytkownika do zainstalowania aplikacji (patrz podany przed chwilą link), lub przenieść nawigację, jeśli jest już zainstalowana.

Metoda getInstalledRelatedApps() umożliwia witrynie sprawdzenie, czy na urządzeniu użytkownika jest zainstalowana aplikacja na iOS, Androida lub komputerowa bądź progresywna aplikacja internetowa.

Sprawdzanie, czy powiązana aplikacja jest już zainstalowana, pomaga wdrożyć takie funkcje jak ukrywanie niestandardowych komunikatów lub przekierowywanie użytkownika bezpośrednio do zainstalowanej aplikacji zamiast otwierania witryny ogólnego przeznaczenia. Aby można było używać metody getInstalledRelatedApps(), zarówno zainstalowana aplikacja, jak i witryna muszą skonfigurować swoje połączenie. Każda aplikacja, w zależności od platformy, zawiera metadane służące do rozpoznawania witryny, a witryna zawiera w polu related_applications w pliku manifestu oczekiwaną zainstalowaną aplikację.

Narzędzia takie jak BubbleWrap czy PWA Builder, które umożliwiają publikowanie PWA w sklepach z aplikacjami, muszą już dodać wymagane metadane, aby Twoja witryna mogła od razu używać getInstalledRelatedApps(). Aby wykryć, czy aplikacja PWA jest już zainstalowana za pomocą interfejsu getInstalledRelatedApps(), zdefiniuj parametr webapp w polu related_applications pliku manifestu, podając adres URL Twojego pliku manifestu:

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

getInstalledRelatedApps() zwraca tablicę obiektów aplikacji. Jeśli tablica jest pusta, powiązana aplikacja nie jest zainstalowana.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

Wykrywanie instalacji spoza zakresu aplikacji PWA

W Chrome na Androidzie 89 możesz wykryć, czy aplikacja PWA jest zainstalowana, nawet spoza zakresu tej aplikacji. PWA musi zawierać plik JSON w folderze /.well-known/, który przyznaje uprawnienia do innego zakresu zgodnie z opisem w tym artykule.

Zasoby