Wykrywanie

Możesz wykryć, czy użytkownik korzysta z Twojej aplikacji PWA w przeglądarce czy w trybie autonomicznym. W przeglądarkach opartych na Chromium (na Androidzie i na komputerach) możesz też wykryć te zdarzenia:

• Stan i wynik okna z zaproszeniem do instalacji.
• Instalacja ukończona.
• Przenoszenie nawigacji z przeglądarki do okna progresywnej aplikacji internetowej 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ą PWA, możesz użyć matchMedia() do przetestowania zapytania o multimedia display-mode.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

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 składniku zapytania o multimedia, używając warunków oddzielonych przecinkami.

Możesz też dodać do pliku manifestu parametr zapytania start_url, który możesz rejestrować za pomocą funkcji analitycznych, aby śledzić statystyki dotyczące tego, kiedy, w jaki sposób i jak często jest używana Twoja aplikacja PWA.

Uwaga: jeśli do przechwytywania danych używasz parametru zapytania w start_url, ustaw pole id w pliku manifestu, aby jednoznacznie identyfikować aplikację. Instrukcje konfigurowania tego pola znajdziesz w artykule Unikalne identyfikowanie aplikacji PWA za pomocą właściwości identyfikatora manifestu aplikacji internetowej

Instalacja aplikacji

Gdy użytkownik zaakceptuje w przeglądarce prośbę o instalację, w przeglądarkach opartych na Chromium uruchamia się zdarzenie appinstalled. Ten moduł obsługi zdarzeń można wykorzystać do usunięcia dodanych wcześniej promocji instalacji 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 pakietem WebAPK zdarzenie jest wywoływane, gdy użytkownik zaakceptuje okno dialogowe, a nie po wygenerowaniu i zainstalowaniu pakietu WebAPK. Może minąć kilka sekund, zanim aplikacja zostanie w pełni zainstalowana.

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

Ostrzeżenie: zdarzenie appinstalled jest dostępne tylko w przeglądarkach opartych na Chromium i jest częścią inkubatora specyfikacji manifestu

.

Przeniesienie sesji

Użytkownicy mogą korzystać z Twojej aplikacji PWA w przeglądarce i w zainstalowanej formie samodzielnej. W przeglądarkach komputerowych możesz przenosić bieżącą nawigację między tymi kontekstami za pomocą plakietki lub elementów menu, jak widać na poniższym obrazie.

Na Androidzie jest element menu podobny do tego w przeglądarce na komputerze, który przekierowuje nawigację do aplikacji. W tym przypadku otwiera się bieżący adres URL, ale będzie to nowa strona w aplikacji.

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

Przenoszenie po instalacji

W przypadku przeglądarek na komputery po zainstalowaniu aplikacji bieżąca nawigacja jest natychmiast przenoszona do aplikacji. Karta przeglądarki jest zamknięta, a nowo zainstalowana aplikacja jest otwarta i kontynuuje działanie, w którym był użytkownik.

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

Wykrywanie przenoszenia

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

window.addEventListener('DOMContentLoaded', () => {
  // Replace "standalone" with the display mode used in your manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', () => {
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
    });
});

Izolacja pamięci masowej na urządzeniach z iOS i iPadOS

W systemie iOS i iPadOS nie ma możliwości nawigacji ani przenoszenia adresu URL między przeglądarką a zainstalowaną ikoną. 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 PWA wymaga logowania, użytkownik będzie musiał się ponownie zalogować. 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

Obsługa przeglądarek

• x
• x
• x
• x

Źródło

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

Wybierz powiązaną aplikację.

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 takim przypadku w kompatybilnych przeglądarkach procesy instalacji nie będą instalować PWA, lecz będą uruchamiać instalację z poziomu sklepu z usługą url lub id, jaką określono w pliku related_applications.

Powiązana aplikacja może być PWA i zostanie 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
}

Uwaga: użycie prefer_related_applications: true tylko z preferowaną aplikacją webapp nie ma wpływu na to, jak będzie udostępniana i instalowana PWA.

Inteligentne banery aplikacji Apple

Safari nie obsługuje elementu related_applications, ale udostępnia banery inteligentnych aplikacji dla aplikacji w App Store. Jeśli chcesz promować PWA lub inną aplikację opublikowaną w App Store, możesz umieścić w pliku HTML PWA metatagi z zaproszeniem do zainstalowania aplikacji (patrz link powyżej) lub przenieść nawigację, jeśli aplikacja 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 już zainstalowana, pomaga wdrażać funkcje takie jak ukrywanie promptów dotyczących niestandardowej instalacji lub przekierowywanie użytkownika bezpośrednio do zainstalowanej aplikacji zamiast na stronę internetową ogólnego przeznaczenia. Aby korzystać z metody getInstalledRelatedApps(), zarówno zainstalowana aplikacja, jak i witryna muszą skonfigurować połączenie. Każda aplikacja, w zależności od platformy, zawiera metadane umożliwiające rozpoznanie witryny, a witryna zawiera w polu related_applications w pliku manifestu informacje o oczekiwanej zainstalowanej aplikacji.

Narzędzia takie jak BubbleWrap czy PWA Builder, które umożliwiają publikowanie progresywnych aplikacji internetowych w sklepach z aplikacjami, już zawierają wymagane metadane, dzięki czemu Twoja witryna może od razu korzystać z getInstalledRelatedApps(). Aby wykryć, czy aplikacja PWA jest już zainstalowana za pomocą getInstalledRelatedApps(), zdefiniuj webapp w polu manifestu related_applications za pomocą adresu URL 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 Twoja aplikacja jest zainstalowana? Funkcja getInstalledRelatedApps() Ci to powie.
• MDN: powiązane aplikacje
• MDN: zdarzenie AppInstalled
• Apple: promowanie aplikacji za pomocą banerów inteligentnych