Progresywne aplikacje internetowe: wyświetlanie prośby o zainstalowanie i pomiar instalacji

1. Witamy

W tym module weźmiesz istniejącą aplikację PWA, którą można zainstalować, i dodasz do niej niestandardowy przycisk instalacji w aplikacji. To piąte szkolenie z serii szkoleń towarzyszących warsztatom dotyczącym progresywnych aplikacji internetowych. Poprzedni codelab to From Tab to Taskbar (Z karty na pasek zadań). Ta seria zawiera jeszcze 3 inne codelaby.

Czego się nauczysz

  • Tworzenie niestandardowego przycisku instalacji aplikacji PWA w aplikacji

Co warto wiedzieć

  • JavaScript

Wymagania

2. Pierwsze kroki

Zacznij od sklonowania lub pobrania kodu startowego potrzebnego do ukończenia tego ćwiczenia:

Jeśli klonujesz repozytorium, upewnij się, że jesteś w gałęzi pwa04--prompt-measure-install. Plik ZIP zawiera też kod tej gałęzi.

Ten kod wymaga Node.js w wersji 14 lub nowszej. Gdy kod będzie dostępny, uruchom npm ci z wiersza poleceń w folderze kodu, aby zainstalować wszystkie potrzebne zależności. Następnie uruchom npm start, aby uruchomić serwer programistyczny dla tego laboratorium.

Plik README.md kodu źródłowego zawiera wyjaśnienie wszystkich rozpowszechnianych plików. Oto najważniejsze pliki, z którymi będziesz pracować w trakcie tego ćwiczenia:

Kluczowe pliki

  • js/main.js – główny plik JavaScript aplikacji

3. Konfigurowanie przycisku instalacji

Zanim dodasz prośby o instalację i zaczniesz rejestrować zdarzenia instalacji, musisz przeprowadzić konfigurację. Najpierw utwórz plik js/lib/install.js i dodaj ten kod:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

Następnie w js/main.js u dołu zdarzenia DOMContentLoaded dodaj ten kod:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

Wyjaśnienie

Ten kod konfiguruje klasę Install, która zostanie użyta w następnym kroku, i dołącza ją do uruchomionej aplikacji.

4. Dodawanie odbiorców promptów instalacyjnych

Aby użyć przycisku instalacji do wywołania instalacji progresywnej aplikacji internetowej, musisz przechwycić prośbę o instalację. Po zainstalowaniu musisz zresetować przechwycony prompt instalacji. Aby to zrobić, napisz w pliku constructor w klasie Install w pliku js/lib/install.js kod, który wykona te czynności:

Przechwytywanie prośby o instalację

  • Nasłuchuj zdarzenia beforeinstallprompt na urządzeniu window.
  • Zapobieganie uruchomieniu zdarzenia
  • Uchwyć prompt
  • Wyświetlanie przycisku instalacji

Resetowanie prośby podczas instalacji

  • Nasłuchuj zdarzenia appinstalled na urządzeniu window.
  • Resetowanie przechwyconego promptu
  • Ukrywanie aktywatora przycisku instalacji

5. Wywoływanie instalacji za pomocą przycisku w aplikacji

Gdy prompt zostanie przechwycony, przycisk instalacji w PWA musi mieć możliwość jego wywołania. Aby to zrobić, dodaj do klasy Install w pliku js/lib/install.js te elementy:

  • Metoda async do wywoływania instalacji, która
    • Wykorzystuje przechwycony prompt do wyświetlania prośby o instalację
    • await wybór promptu przez użytkownika;
    • Resetowanie promptu
    • Ukrywanie przycisku instalacji, jeśli użytkownik zaakceptował prośbę o instalację
  • Dodaj detektor zdarzeń click do przycisku instalacji w klasie constructor, który wywołuje wyzwalacz instalacji.

6. Gratulacje!

Wiesz już, jak wywołać instalację aplikacji PWA za pomocą własnego przycisku instalacji w aplikacji.

Następny codelab z tej serii to Ulepszanie progresywnej aplikacji internetowej.