Jak zapewnić własny proces instalacji aplikacji

Pete LePage

Wiele przeglądarek umożliwia włączanie i promowanie instalacji progresywnej aplikacji internetowej (PWA) bezpośrednio w interfejsie. Instalacja (wcześniej nazywana Dodaj do ekranu głównego) umożliwia użytkownikom zainstalowanie PWA na urządzeniu mobilnym lub komputerze. Instalacja PWA powoduje dodanie aplikacji do ekranu głównego użytkownika, dzięki czemu może ona działać jak każda inna zainstalowana aplikacja.

Oprócz instalacji w przeglądarce możesz udostępnić własny proces instalacji bezpośrednio w aplikacji.

Decydując, czy promować instalację, zastanów się, jak użytkownicy zazwyczaj korzystają z Twojej aplikacji PWA. Jeśli np. masz grupę użytkowników, którzy korzystają z Twojej aplikacji internetowej wiele razy w ciągu tygodnia, mogą oni czerpać korzyści z dodatkowej wygody uruchamiania aplikacji z ekranu głównego telefonu lub z menu Start w systemie operacyjnym na komputerze. Niektóre aplikacje do pracy i rozrywki również korzystają z dodatkowej przestrzeni na ekranie, która powstaje po usunięciu pasków narzędzi przeglądarki z okna w trybie standalone, minimal-ui lub window-control-overlay.

Wymagania wstępne

Zanim zaczniesz, sprawdź, czy PWA spełnia wymagania instalowalności, które zwykle obejmują posiadanie pliku manifestu aplikacji internetowej.

Promowanie instalacji

Aby pokazać, że progresywna aplikacja internetowa jest instalowalna, i zapewnić niestandardowy proces instalacji w aplikacji:

1. Nasłuchuj zdarzenia beforeinstallprompt.
2. Zapisz zdarzenie beforeinstallprompt, aby można było później wywołać proces instalacji.
3. Poinformuj użytkownika, że PWA można zainstalować, i udostępnij przycisk lub inny element, który umożliwi rozpoczęcie procesu instalacji w aplikacji.

Nasłuchiwanie zdarzenia beforeinstallprompt

Jeśli Twoja progresywna aplikacja internetowa spełnia wymagane kryteria instalacji, przeglądarka uruchamia zdarzenie beforeinstallprompt. Zapisz odwołanie do zdarzenia i zaktualizuj interfejs użytkownika, aby wskazać, że użytkownik może zainstalować PWA.

// 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, umieść przycisk lub inny element interfejsu, który użytkownik może kliknąć, aby zainstalować aplikację. Gdy użytkownik kliknie element, wywołaj funkcję prompt() w zapisanym zdarzeniu beforeinstallprompt (przechowywanym w zmiennej deferredPrompt). Wyświetla użytkownikowi okno instalacji z prośbą o potwierdzenie, że chce zainstalować PWA.

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 jest rozwiązywana zgodnie z wyborem użytkownika. Funkcję prompt() możesz wywołać tylko raz w przypadku opóźnionego zdarzenia. Jeśli użytkownik go zamknie, musisz zaczekać, aż zdarzenie beforeinstallprompt zostanie ponownie wywołane, zwykle natychmiast po rozwiązaniu problemu z właściwością userChoice.

wykrywać, kiedy PWA została zainstalowana;

Możesz użyć właściwości userChoice, aby określić, czy użytkownik zainstalował Twoją aplikację z interfejsu użytkownika. Jeśli jednak użytkownik zainstaluje PWA z paska adresu lub innego elementu przeglądarki, userChoice nie pomoże. Zamiast tego zacznij nasłuchiwać zdarzenia appinstalled, które jest wywoływane, gdy tylko zainstalujesz PWA, niezależnie od tego, jaki mechanizm został użyty do jego 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');
});

wykrywanie sposobu uruchomienia aplikacji PWA,

Zapytanie o multimedia display-mode w CSS wskazuje, w jaki sposób uruchomiono PWA: na karcie przeglądarki czy jako zainstalowaną aplikację PWA. Umożliwia to stosowanie różnych stylów w zależności od sposobu uruchomienia aplikacji. Możesz na przykład skonfigurować aplikację tak, aby zawsze ukrywać przycisk instalacji i zapewniać przycisk Wstecz, gdy jest uruchamiana jako zainstalowana PWA.

Śledzenie sposobu uruchomienia PWA

Aby śledzić, jak użytkownicy uruchamiają PWA, przetestuj zapytanie o multimedia matchMedia() za pomocą narzędzia 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 || navigator.standalone)
    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';
}

Śledzenie zmian trybu wyświetlania

Aby śledzić, czy użytkownik przełącza się między trybem browser a innymi trybami wyświetlania, sprawdzaj zmiany w zapytaniu o multimedia display-mode.

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

Aktualizacja interfejsu użytkownika na podstawie bieżącego trybu wyświetlania

Aby zastosować inny kolor tła dla PWA podczas uruchamiania zainstalowanej PWA, użyj kodu CSS warunkowego:

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

Zmiana ikony i nazwy aplikacji

Co zrobić, jeśli musisz zaktualizować nazwę aplikacji lub przesłać nowe ikony? Aby dowiedzieć się, kiedy i jak te zmiany są odzwierciedlane w Chrome, przeczytaj artykuł Jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej.