Prośba o instalację

Użytkownicy mogą nie znać procesu instalacji PWA. Jako deweloper zorientujesz się, kiedy nadejdzie właściwy moment na zaproszenie użytkownika do zainstalowania aplikacji. Możesz też ulepszyć wyświetlane prompty instalacji domyślnej przeglądarki. Przyjrzyjmy się dostępnym narzędziom.

Ulepszanie okna instalacji

Przeglądarki wyświetlają domyślne prośby o instalację, gdy PWA spełniają kryteria instalacji. Do utworzenia promptu przeglądarka używa właściwości name i icons z pliku manifestu aplikacji internetowej.

Prośba o instalację Microsoft Edge.

Niektóre przeglądarki usprawniają proces instalacji, korzystając z pól promocyjnych w pliku manifestu, w tym description, categories i screenshots. Jeśli na przykład w Chrome na Androidzie aplikacja PWA zawiera wartości w polach description i screenshots, okno dialogowe instalacji może przekształcić się z niewielkiego paska informacyjnego Dodaj do ekranu głównego w większe, bardziej szczegółowe okno, które przypomina instrukcje instalacji ze sklepu z aplikacjami.

Zobacz, jak działają pola promocyjne:

Zdarzenie beforeinstallprompt

Prompty instalacji wyświetlane w przeglądarce to pierwszy krok na drodze do zachęcenia użytkowników do zainstalowania aplikacji PWA. Aby zaimplementować własną instalację, aplikacja musi spełniać kryteria instalacji: gdy przeglądarka wykryje, że można ją zainstalować, wywoła zdarzenie beforeinstallprompt. Aby dostosować sposób obsługi zdarzeń, musisz zaimplementować ten moduł obsługi zdarzeń. Aby to zrobić:

  1. Wykrywaj zdarzenie beforeinstallprompt.
  2. Zapisz go (będzie potrzebny później).
  3. Uruchom ją w interfejsie.
.

Poniżej znajdziesz przykładowy detektor zdarzenia beforeinstallprompt, jego przechwytywanie, a następnie użycie niestandardowego.

// 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 dostosowany przycisk instalacji, użyj zapisanego wcześniej parametru deferredPrompt i wywołaj metodę prompt(), ponieważ użytkownik musi jeszcze przejść proces instalacji aplikacji w przeglądarce. Trzeba było opóźnić wydarzenie do momentu, gdy przekazano mu właściwy kontekst, który zachęciłby go do zainstalowania aplikacji PWA.

Rejestrowanie wydarzenia pozwala Ci dodawać wskazówki i zachęty, które zachęcają użytkowników do zainstalowania Twojej aplikacji, oraz wyświetlanie prośby o instalację, gdy wiesz, że użytkownicy są bardziej zaangażowani.

Zdarzenie nie uruchomi się, jeśli:

  • Użytkownik zainstalował już aktualną aplikację PWA (działa tylko w przypadku komputerów i WebAPK na urządzeniach z Androidem).
  • Aplikacja nie spełnia kryteriów instalacji PWA.
  • PWA nie można zainstalować na tym urządzeniu z innych powodów (np. urządzenia działającego w trybie kiosku lub bez uprawnień).
.

Miejsce, w którym najlepiej wysłać prośbę

To, które miejsce należy wysłać, zależy od aplikacji i czasu zaangażowania użytkowników w treści i usługi. Gdy zarejestrujesz aplikację beforeinstallprompt, możesz pokazać użytkownikom, dlaczego warto dalej z niej korzystać i jakie korzyści przyniesie im jej zainstalowanie. Wskazówki dotyczące instalacji możesz wyświetlać w dowolnym miejscu aplikacji. Typowe wzorce: w bocznym menu, po kluczowej ścieżce użytkownika, takiej jak zrealizowanie zamówienia, lub po przejściu na stronę rejestracji. Więcej informacji znajdziesz w artykule Wzorce promujące instalację PWA.

Gromadzenie statystyk

Dzięki statystykom dowiesz się, gdzie i kiedy prezentować swoje prompty. Możesz użyć właściwości userChoice ze zdarzenia beforeinstallprompt. userChoice to obietnica, która zostanie rozstrzygnięta na podstawie działania wykonanego przez 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

Skorzystaj z poniższego przykładu w przeglądarce Chromium (na komputerze lub urządzeniu z Androidem).

Wycofanie

Jeśli przeglądarka nie obsługuje interfejsu beforeinstallprompt lub zdarzenie się nie uruchamia, nie ma innego sposobu na wywołanie prośby o instalację przeglądarki. Jednak w przypadku platform, które umożliwiają samodzielne instalowanie aplikacji PWA (np. iOS), możesz wyświetlić użytkownikowi te instrukcje.

Instrukcje te należy renderować tylko w trybie przeglądarki. inne opcje wyświetlania, takie jak standalone lub fullscreen, oznaczają, że użytkownik już zainstalował aplikację.

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

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

Ćwiczenia z programowania

Biblioteki

Jeśli potrzebujesz pomocy w renderowaniu niestandardowego promptu instalacji, zapoznaj się z tymi bibliotekami:

Zasoby