Прогрессивные веб-приложения: поиск и измерение установок

1. Добро пожаловать

В этой лабораторной работе вы добавите в существующее устанавливаемое PWA-приложение собственную кнопку установки. Это пятая из серии сопутствующих практических работ для семинара Progressive Web App . Предыдущая лабораторная работа называлась «От вкладки к панели задач» . В этой серии ещё три практических работы.

Чему вы научитесь

  • Создайте пользовательскую кнопку установки PWA в приложении

Что вам следует знать

  • JavaScript

Что вам понадобится

2. Подготовка

Начните с клонирования или загрузки начального кода, необходимого для выполнения этой лабораторной работы:

Если вы клонируете репозиторий, убедитесь, что вы находитесь на ветке pwa04--prompt-measure-install . ZIP-архив также содержит код для этой ветки.

Для этой кодовой базы требуется Node.js 14 или выше. После того, как код будет готов, выполните команду npm ci из командной строки в папке с кодом, чтобы установить все необходимые зависимости. Затем выполните npm start , чтобы запустить сервер разработки для этой кодовой лаборатории.

Файл README.md исходного кода содержит пояснения ко всем распространяемым файлам. Кроме того, ниже перечислены основные существующие файлы, с которыми вы будете работать в ходе этой лабораторной работы:

Ключевые файлы

  • js/main.js — Основной файл JavaScript приложения

3. Настройте кнопку «Установить»

Прежде чем добавлять запросы на установку и перехватывать события установки, необходимо выполнить некоторые настройки. Для начала создайте файл js/lib/install.js и добавьте в него следующий код:

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

Затем в js/main.js в нижней части события DOMContentLoaded добавьте следующий код:

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

Объяснение

Этот код настраивает класс Install, который будет использоваться на следующем шаге, и прикрепляет его к работающему приложению.

4. Добавьте прослушиватели приглашений на установку

Чтобы использовать кнопку «Установить» для запуска установки PWA, необходимо перехватить приглашение к установке. После установки необходимо сбросить перехваченное приглашение к установке. Для этого в constructor класса Install в js/lib/install.js напишите следующий код:

Захват приглашения к установке

  • Прослушайте событие beforeinstallprompt в window .
  • Предотвратить срабатывание события
  • Захватите подсказку
  • Показать триггер кнопки установки

Сбросить запрос при установке

  • Прослушивайте событие appinstalled в window .
  • Сбросить захваченную подсказку
  • Скрыть триггер кнопки установки

5. Запустите установку с помощью кнопки в приложении

После захвата запроса кнопка установки PWA должна быть способна его активировать. Для этого добавьте следующий код в класс Install в js/lib/install.js :

  • async метод для запуска установки, который
    • Использует захваченный запрос для запроса на установку
    • await выбора пользователем подсказки
    • Сбросить подсказку
    • Скрыть кнопку установки, если пользователь принял приглашение на установку
  • Добавьте прослушиватель событий click к кнопке установки в constructor класса, который вызывает триггер установки.

6. Поздравляем!

Вы только что узнали, как инициировать установку PWA с помощью кнопки установки в вашем приложении.

Следующая лабораторная работа в серии — «Расширение возможностей вашего PWA».