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. 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.

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 skorzystać 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 progresywną aplikację internetową można zainstalować, i udostępnić 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łuchuj zdarzenia beforeinstallprompt

Jeśli Twoja progresywna aplikacja internetowa spełnia wymagane kryteria instalacji, przeglądarka uruchamia 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, 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() z zapisanym zdarzeniem beforeinstallprompt (przechowywanym w zmiennej 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ć funkcję prompt() tylko raz. Jeśli użytkownik ją zamknie, musisz zaczekać, aż zdarzenie beforeinstallprompt zostanie ponownie wywołane, zwykle natychmiast po rozwiązaniu problemu z właściwością userChoice.

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 jednak użytkownik zainstaluje PWA z paska adresu lub innego elementu przeglądarki, userChoice nie pomoże. Zamiast tego nasłuchuj zdarzenie appinstalled, które jest wywoływane, gdy tylko PWA zostanie zainstalowana, niezależnie od mechanizmu, za pomocą którego została zainstalowana.

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. Umożliwia to stosowanie różnych stylów 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 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: nasłuchiwanie zmian w zapytaniu o media 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 aplikacji PWA uruchomionej jako zainstalowana PWA, użyj warunkowego kodu CSS:

@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, zapoznaj się z artykułem Jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej.