Prośba o instalację

Użytkownicy mogą nie znać procesu instalacji PWA. Jako deweloper będziesz wiedzieć, kiedy należy zaprosić użytkownika do zainstalowania aplikacji. Możesz także ulepszać prompty instalacji domyślnej przeglądarki. Przyjrzyjmy się dostępnym narzędziom.

Ulepszenie okna instalacji

Przeglądarki udostępniają domyślne prośby o zainstalowanie aplikacji PWA, które spełniają kryteria instalacji. Do utworzenia promptu przeglądarka używa właściwości name i icons z Twojego pliku manifestu aplikacji internetowej.

Prośba o instalację Microsoft Edge.

Niektóre przeglądarki ulepszają proces instalacji, wykorzystując pola promocyjne w pliku manifestu, np. description, categories i screenshots. Jeśli na przykład w Chrome na Androidzie Twoja progresywna aplikacja internetowa zawiera wartości w polach description i screenshots, okno instalacji zmienia się z małego paska informacyjnego Dodaj do ekranu głównego na większe i bardziej szczegółowe okno, podobne do promptów ze sklepu z aplikacjami.

Zobacz, jak działają pola promocyjne:

Zdarzenie beforeinstallprompt

Prośby o instalację przeglądarki to pierwszy krok do zainstalowania aplikacji PWA. Aby można było zaimplementować własną instalację, aplikacja musi jeszcze spełnić kryteria instalacji: gdy przeglądarka wykryje, że można zainstalować aplikację, uruchamia zdarzenie beforeinstallprompt. Aby dostosować sposób działania aplikacji, musisz zaimplementować ten moduł. Aby to zrobić:

  1. Wykrywa zdarzenie beforeinstallprompt.
  2. Zapisz go (będzie Ci on potrzebny później).
  3. Aktywuj go w interfejsie.

W poniższym kodzie znajdziesz przykładowy odbiornik zdarzenia beforeinstallprompt oraz jego przechwytywanie, a później wykorzystanie niestandardowe.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Następnie, jeśli użytkownik kliknie niestandardowy przycisk instalacji, użyj zapisanego wcześniej deferredPrompt i wywołaj metodę prompt(), ponieważ użytkownik nadal musi wykonać proces przeglądarki, aby zainstalować aplikację. Twoje działanie polegało na opóźnieniu zdarzenia do momentu podania użytkownikowi odpowiedniego kontekstu zachęcającego do zainstalowania PWA.

Podczas rejestrowania wydarzenia możesz dodać wskazówki i zachęty dla użytkowników do zainstalowania Twojej aplikacji. Możesz też wyświetlać prośbę o jej instalację, gdy masz pewność, że użytkownicy są bardziej zaangażowani.

Zdarzenie nie zostanie uruchomione, jeśli:

  • Użytkownik zainstalował już aktualną aplikację PWA (działa tylko na komputerach i w przypadku WebAPK na urządzeniach z Androidem).
  • Aplikacja nie spełnia kryteriów instalacji PWA.
  • PWA nie można zainstalować na bieżącym urządzeniu z innych powodów (na przykład gdy urządzenie działa w trybie kiosku lub nie ma uprawnień).

Najlepsze miejsce na prompt

To, gdzie należy wysłać prośbę, zależy od aplikacji oraz od tego, kiedy użytkownicy są najbardziej zaangażowani w Twoje treści i usługi. Wykorzystując beforeinstallprompt, możesz wskazać użytkownikom, dlaczego warto nadal korzystać z aplikacji i jakie są korzyści płynące z jej zainstalowania. Wskazówki dotyczące instalacji możesz wyświetlać w dowolnym miejscu w aplikacji. Typowe wzorce to: w bocznym menu, po ważnej ścieżce użytkownika, takiej jak złożenie zamówienia, czy po stronie rejestracji. Więcej informacji na ten temat znajdziesz w artykule Wzorce promowania instalacji PWA.

Gromadzenie statystyk

Korzystanie ze statystyk pomoże Ci lepiej zrozumieć, gdzie i kiedy warto przedstawiać swoje prompty. Możesz użyć właściwości userChoice ze zdarzenia beforeinstallprompt. Parametr userChoice to obietnica, która zniknie po wykonaniu działania użytkownika.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Zobacz, jak to działa

Wypróbuj ten przykład w przeglądarce Chromium (na komputerze lub urządzeniu z Androidem).

Wycofanie

Jeśli przeglądarka nie obsługuje polecenia beforeinstallprompt lub zdarzenie się nie uruchamia, nie ma innego sposobu na wywołanie tego monitu. Jednak na platformach, które umożliwiają samodzielne instalowanie aplikacji PWA (np. iOS), możesz wyświetlić użytkownikowi te instrukcje.

Te instrukcje należy renderować tylko w trybie przeglądarki. Inne opcje wyświetlania, np. standalone czy fullscreen, oznaczają, że użytkownik zainstalował już aplikację.

Aby wyrenderować element tylko w trybie przeglądarki, użyj zapytania o multimedia display-mode:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Ćwiczenia z programowania

Biblioteki

Sprawdź te biblioteki, aby uzyskać pomoc w wyświetlaniu niestandardowej prośby o instalację:

Zasoby