Jak zapewnić własny proces instalacji aplikacji

Pete LePage

Wiele przeglądarek umożliwia włączenie i promowanie instalacji progresywnej aplikacji internetowej (PWA) bezpośrednio w jej interfejsie. Instalacja (wcześniej nazywana „Dodaj do ekranu głównego”) umożliwia użytkownikom Twoją aplikację PWA na komórce lub komputerze. Zainstalowanie aplikacji PWA powoduje dodanie jej do aplikacji użytkownika co pozwala uruchamiać ją tak samo jak każdą inną zainstalowaną aplikację.

Oprócz udostępniania w przeglądarce, możesz skonfigurować własną, niestandardową procedurę instalacji bezpośrednio w aplikacji.

Rozważając, czy warto promować instalację, zastanów się, jak użytkownicy zwykle używać aplikacji PWA. Jeśli na przykład istnieje grupa użytkowników, którzy korzystają z aplikacji PWA wiele użytkowników w tygodniu mogą korzystać z Z poziomu ekranu głównego telefonu lub menu Start na komputerze. systemu operacyjnego. Niektóre aplikacje zwiększające produktywność i rozrywkowe również mają z dodatkowej przestrzeni ekranu utworzonej przez usunięcie pasków narzędzi okno w zainstalowanych trybach standalone lub minimal-ui.

Wymagania wstępne

Zanim zaczniesz, upewnij się, że Twoja aplikacja PWA spełnia wymaganiami w zakresie możliwości instalacji, które zwykle mieć manifest aplikacji internetowej.

Promuj instalację

Aby pokazać, że progresywną aplikację internetową można zainstalować, i udostępnić proces instalacji w aplikacji:

1. Wykrywaj zdarzenie beforeinstallprompt.
2. Zapisz zdarzenie beforeinstallprompt, aby mogło aktywować proces instalacji później.
3. Poinformuj użytkownika, że aplikację PWA można zainstalować, i podaj przycisk lub inny aby rozpocząć proces instalacji w aplikacji.

Nasłuchuj zdarzenia beforeinstallprompt

Jeśli progresywna aplikacja internetowa spełnia wymagane kryteria instalacji, przeglądarka uruchomi zdarzenie beforeinstallprompt. zapisać odwołanie do wydarzenia, i zaktualizuj interfejs, aby wskazać, że użytkownik może zainstalować Twoją progresywną aplikację internetową.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

Proces instalacji w aplikacji

Aby umożliwić instalację w aplikacji, dodaj przycisk lub inny element interfejsu którą użytkownik może kliknąć, by zainstalować aplikację. po kliknięciu elementu lub i kliknij, aby zadzwonić pod numer prompt() w przypadku zapisanego zdarzenia beforeinstallprompt (zapisanego w deferredPrompt). Wyświetla użytkownikowi modalne okno instalacji z pytaniem potwierdzić, że chcą zainstalować Twoją progresywną aplikację internetową.

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

Właściwość userChoice to obietnica, która realizuje się zgodnie z wyborem użytkownika. W zdarzeniu odroczonym możesz wywołać prompt() tylko raz. Jeśli użytkownik zostanie odrzucony, musisz poczekać do zdarzenia beforeinstallprompt uruchamia się ponownie, zwykle bezpośrednio po właściwości userChoice. został rozwiązany.

Wykrywanie instalacji PWA

Możesz użyć właściwości userChoice, aby określić, czy użytkownik zainstalował do aplikacji z poziomu interfejsu. Jeśli użytkownik zainstaluje Twoją PWA, z paska adresu lub innego komponentu przeglądarki, userChoice nie pomoże. Zamiast tego lepiej nasłuchiwać zdarzenia appinstalled, które jest uruchamiane, gdy z instalacją aplikacji PWA niezależnie od mechanizmu użytego do jej zainstalowania.

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

Sprawdzanie, jak została uruchomiona aplikacja PWA

Zapytanie o media display-mode w usłudze porównywania cen wskazuje, w jaki sposób została uruchomiona PWA: na karcie przeglądarki lub jako zainstalowana aplikacja PWA. Dzięki temu można stosować różne w zależności od sposobu uruchomienia aplikacji. Możesz na przykład skonfigurować aby zawsze ukrywać przycisk instalacji i wyświetlać przycisk Wstecz po uruchomieniu zainstalowana aplikacja PWA.

Śledzenie, jak została uruchomiona aplikacja PWA

Aby śledzić, jak użytkownicy uruchamiają Twoją PWA, za pomocą narzędzia matchMedia() przetestuj Zapytanie o multimedia: display-mode. Safari na iOS nie obsługuje jeszcze tej funkcji, więc musisz zaznacz navigator.standalone, które zwraca wartość logiczną wskazującą, czy przeglądarka działa w trybie samodzielnym.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

Śledzenie zmian trybu wyświetlania

Aby sprawdzić, czy użytkownik zmienia się między standalone a browser tab, nasłuchuj zmiany w zapytaniu o media display-mode.

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);
});

Aktualizuj interfejs użytkownika zgodnie z bieżącym trybem wyświetlania

Aby zastosować inny kolor tła aplikacji PWA uruchomionej jako zainstalowana PWA, użyj warunkowego kodu CSS:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Aktualizowanie ikony i nazwy aplikacji

Co zrobić, jeśli musisz zaktualizować nazwę aplikacji lub dodać nowe ikony? Dowiedz się, jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej. aby zobaczyć, kiedy i w jaki sposób te zmiany zostaną odzwierciedlone w Chrome.