Wykrywanie

Możesz sprawdzić, czy użytkownik korzysta z Twojej aplikacji PWA w przeglądarce czy w trybie samodzielnym. W przeglądarkach opartych na Chromium (na urządzeniach z Androidem i komputerach) możesz też wykrywać te zdarzenia:

• Stan i wynik w oknie z zaproszeniem do instalacji.
• Instalacja ukończona.
• Przejście z przeglądarki do okna PWA i odwrotnie.
• Stan instalacji PWA.
• Powiązana aplikacja zainstalowana ze sklepu z aplikacjami.

Możesz używać tych danych do celów analitycznych, poznania preferencji użytkowników i dostosowania ich do potrzeb użytkowników. Aby przechwytywać te zdarzenia, możesz używać takich narzędzi jak zapytania o media, zdarzenia z window lub interfejsy API funkcji opisane tutaj.

Wykrywam tryb wyświetlania

Aby śledzić, jak użytkownicy uruchamiają Twoją aplikację PWA, 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 wybrać 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, korzystając z warunków rozdzielonych przecinkami.

Do elementu start_url w pliku manifestu możesz też dodać parametr zapytania, który możesz przechwytywać za pomocą narzędzi analitycznych, aby śledzić statystyki dotyczące czasu, sposobu i ilości wykorzystania Twojej aplikacji PWA.

Instalacja aplikacji

Gdy użytkownik zaakceptuje w przeglądarce prośbę o instalację, w przeglądarkach opartych na Chromium uruchamia się zdarzenie appinstalled. Świetnym zastosowaniem tego modułu obsługi zdarzeń jest usunięcie dodanej promocji dotyczącej 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 funkcją WebAPK zdarzenie jest wywoływane, gdy użytkownik zaakceptuje okno dialogowe, a nie po utworzeniu i zainstalowaniu pakietu WebAPK. Pełne zainstalowanie aplikacji może zająć kilka sekund.

W rozdziale na temat promptu instalacji wyjaśniamy, jak sprawdzić, czy komunikat z prośbą o instalację jest dostępny, i jaka jest opcja wyboru użytkownika.

Przeniesienie sesji

Użytkownicy mogą korzystać z PWA w przeglądarce i w zainstalowanym, samodzielnym formularzu. W przeglądarkach na komputerze możesz przenieść bieżącą nawigację między tymi kontekstami, używając plakietek lub pozycji menu, jak widać na ilustracji poniżej.

Na Androidzie znajduje się element menu podobny do tej na komputerze, który przenosi nawigację do aplikacji. W tym przypadku otwarty zostanie bieżący adres URL, ale będzie to nowa strona nawigacji w aplikacji.

Na poniższym obrazie widać pozycję menu na urządzeniu z Androidem, gdy aplikacja jest już zainstalowana.

Przenieś po instalacji

Z przeglądarek na komputerze bieżąca nawigacja zostanie natychmiast przeniesiona do aplikacji po instalacji. Karta przeglądarki zostaje zamknięta, a nowo zainstalowana aplikacja jest otwarta, aby kontynuować czynności wykonywane przez użytkownika.

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

Wykrywam transfer

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

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 urządzeniach z iOS i iPadOS

W systemach iOS i iPadOS nie ma opcji nawigacji ani przenoszenia adresów URL między przeglądarką a ikoną zainstalowanej aplikacji. Nawet jeśli jest to ta sama aplikacja PWA, każda ikona PWA zainstalowana przez użytkownika będzie mieć własne miejsce na dane, oddzielnie od karty w Safari i innych ikon. Gdy użytkownik kliknie ikonę zainstalowanej, pamięć nie zostanie udostępniona Safari. Jeśli Twoja aplikacja PWA wymaga logowania, użytkownik będzie musiał zalogować się ponownie. Jeśli aplikacja została kilka razy dodana do ekranu głównego, dla każdej instancji PWA użytkownik ma inną sesję.

Powiązane aplikacje

Witryna wskazuje relację z aplikacją za pomocą pliku manifestu. Aby to zrobić, użyj related_applications specyfikacji pliku manifestu aplikacji internetowej. Klucz related_applications to tablica obiektów reprezentujących każdą powiązaną aplikację. Każda pozycja zawiera platform, url i opcjonalny 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).

Preferowanie powiązanej aplikacji

Gdy użytkownik zainstaluje aplikację, możesz przekierować go do powiązanej aplikacji, jeśli w pliku manifestu ustawisz pole prefer_related_applications na true. W przypadku takiej konfiguracji w zgodnych przeglądarkach proces instalacji nie spowoduje zainstalowania aplikacji PWA. zamiast tego uruchamiają instalację w sklepie z poziomu url lub id określonego we wpisie related_applications.

Powiązaną aplikacją może być Twoja PWA. Zostanie ona zainstalowana ze sklepu z aplikacjami. Jedną z zalet tej konfiguracji jest to, że obecnie tylko aplikacje zainstalowane z poziomu sklepu z aplikacjami są przywracane przy użyciu kopii zapasowej lub po przejściu na nowe urządzenie.

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

Inteligentne banery aplikacji Apple

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

Wykrywanie powiązanych zainstalowanych aplikacji

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

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

Narzędzia takie jak BubbleWrap lub PWA Builder, które umożliwiają publikowanie aplikacji PWA w sklepach z aplikacjami, już dodają wymagane metadane, dzięki czemu Twoja witryna od razu będzie mogła korzystać z getInstalledRelatedApps(). Aby wykryć, czy aplikacja PWA jest już zainstalowana przy użyciu interfejsu getInstalledRelatedApps(), zdefiniuj webapp w polu related_applications manifestu, podając adres URL swojego pliku manifestu:

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

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

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

Wykrywanie instalacji spoza PWA

W Chrome na Androidzie 89 możesz wykryć, czy aplikacja PWA została zainstalowana – nawet spoza zakresu tej aplikacji. Twoja aplikacja PWA musi ustawić plik JSON w folderze /.well-known/, przyznając uprawnienia do drugiego zakresu, jak opisano w tym artykule.

Zasoby

• Czy aplikacja jest zainstalowana? Dowiesz się o tym za pomocą metody getAvailableRelatedApps().
• MDN: powiązane aplikacje
• MDN: zdarzenie instalacji aplikacji
• Apple: promowanie aplikacji za pomocą banerów inteligentnych