Jak zapewnić własny proces instalacji aplikacji

Pete LePage

Opublikowano: 14 lutego 2020 r.

Wiele przeglądarek umożliwia włączenie i promowanie instalacji progresywnej aplikacji internetowej (PWA) bezpośrednio w interfejsie użytkownika. Instalacja (wcześniej nazywana dodawaniem do ekranu głównego) umożliwia użytkownikom dodanie Twojej progresywnej aplikacji internetowej na urządzeniu mobilnym lub komputerze. Zainstalowanie PWA powoduje dodanie jej do Menu z aplikacjami użytkownika, dzięki czemu można ją uruchamiać jak każdą inną zainstalowaną aplikację.

Oprócz procesu instalacji udostępnianego przez przeglądarkę możesz udostępnić własny niestandardowy proces instalacji bezpośrednio w aplikacji.

Zastanów się, jak użytkownicy zwykle korzystają z Twojej aplikacji PWA. Jeśli na przykład grupa użytkowników korzysta z Twojej progresywnej aplikacji internetowej kilka razy w tygodniu, może im się przydać możliwość uruchamiania jej z ekranu głównego telefonu lub z menu Start na komputerze. Niektóre aplikacje zwiększające produktywność i rozrywkowe również korzystają z dodatkowej przestrzeni na ekranie, która powstaje po usunięciu pasków narzędzi przeglądarki z okna w trybach standalone, minimal-ui i window-control-overlay.

Wymagania wstępne

Zanim zaczniesz, upewnij się, że Twoja PWA spełnia wymagania dotyczące instalowalności, które zwykle obejmują plik manifestu aplikacji internetowej.

Promowanie instalacji

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

1. Nasłuchuj zdarzenia beforeinstallprompt.
2. Zapisz zdarzenie beforeinstallprompt, aby później mogło ono 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 progresywna aplikacja internetowa spełnia wymagane kryteria instalacji, przeglądarka wywołuje zdarzenie beforeinstallprompt. Zapisz odwołanie do zdarzenia 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, udostępnij przycisk lub inny element interfejsu, który użytkownik może kliknąć lub dotknąć, aby zainstalować aplikację. Gdy użytkownik kliknie lub dotknie 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ć Twoją aplikację 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 realizowana w zależności od wyboru użytkownika. Funkcję prompt() w przypadku odroczonego zdarzenia możesz wywołać tylko raz. Jeśli użytkownik zamknie okno, musisz poczekać, aż ponownie zostanie wywołane zdarzenie beforeinstallprompt, zwykle od razu po rozwiązaniu problemu z właściwością userChoice.

wykrywać, kiedy PWA została zainstalowana;

Za pomocą właściwości userChoice możesz określić, czy użytkownik zainstalował aplikację z poziomu interfejsu. Jeśli jednak użytkownik zainstaluje Twoją progresywną aplikację internetową z paska adresu lub innego komponentu przeglądarki, userChoice nie pomoże. Zamiast tego nasłuchuj zdarzenia appinstalled, które jest wywoływane za każdym razem, gdy Twoja progresywna aplikacja internetowa zostanie zainstalowana, niezależnie od użytego mechanizmu.

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

wykrywać sposób uruchomienia aplikacji PWA;

Zapytanie o media CSS display-mode wskazuje, w jaki sposób uruchomiono aplikację PWA – w karcie przeglądarki czy jako zainstalowaną aplikację PWA. Dzięki temu można stosować różne style w zależności od sposobu uruchomienia aplikacji. Możesz na przykład skonfigurować go tak, aby zawsze ukrywał przycisk instalacji i udostępniał przycisk Wstecz, gdy jest uruchamiany jako zainstalowana aplikacja PWA.

Śledzenie sposobu uruchomienia PWA

Aby śledzić, jak użytkownicy uruchamiają Twoją progresywną aplikację internetową, użyj matchMedia() do przetestowania display-mode zapytania o media.

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 zmiany trybu wyświetlania

Aby śledzić, czy użytkownik przełącza się między trybem browser a innymi trybami wyświetlania, nasłuchuj 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());
});

Aktualizowanie interfejsu na podstawie bieżącego trybu wyświetlania

Aby zastosować inny kolor tła w przypadku progresywnej aplikacji internetowej uruchamianej jako zainstalowana progresywna aplikacja internetowa, 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 podać nowe ikony? Sprawdź jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej, aby dowiedzieć się, kiedy i jak te zmiany są odzwierciedlane w Chrome.