Как интегрировать «Добавить на главный экран» в PWA

Добавление на главный экран (для краткости A2HS) имеет основополагающее значение для работы с прогрессивными веб-приложениями, поскольку оно позволяет полностью использовать родные приложения, включая запуск приложений с домашнего экрана пользователя.

 Рекомендуемая литература: PWA vs Native: что вам больше подходит?

Будучи такой жизненно важной функцией для вашего PWA, вы, конечно же, не можете не интегрировать ее, поэтому сегодня в учебнике SimiCart PWA мы рассмотрим причины, по которым A2HS необходим, как он используется и как сделать PWA. Готовность к A2HS как на мобильных устройствах, так и на настольных компьютерах.

Поддерживаемые браузеры

A2HS очень близок к тому, чтобы стать универсальной функцией между браузерами. В настоящее время он поддерживается Mobile Chrome/Android Webview (начиная с версии 31), Opera для Android (начиная с версии 32) и Firefox для Android (начиная с версии 58). Для получения более подробной информации посетите веб-сайт CanIUse.

Добавление PWA на главный экран в действии

При столкновении с сайтом, на котором включено добавление PWA на главный экран (A2HS-Enabled), в нижней части пользовательского интерфейса можно увидеть баннер, уведомляющий о том, что сайт можно добавить на главный экран:

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

Как сделать ваше веб-приложение с поддержкой A2HS на мобильных устройствах

Устанавливаемые критерии

Чтобы ваше веб-приложение можно было установить, оно должно:

• еще не установлен
• соответствует эвристике взаимодействия с пользователем (пользователь должен взаимодействовать со страницей не менее 30 секунд)
• обслуживаться через безопасное (HTTPS) соединение
• зарегистрировать сервисного работника
• иметь правильно настроенный файл манифеста
• И самое главное, используемый браузер должен поддерживать событие beforeinstallprompt . Полный список браузеров, поддерживающих событие beforeinstallprompt , см. в CanIUse.

Начиная

В демонстрационных целях в этой статье мы будем использовать проект create-react-app в качестве основы для создания устанавливаемого PWA. create-react-app — это простая команда React для создания одностраничного приложения.

Примечание . Для create-react-app требуется как минимум узел >= 10.16 и npm >= 5.6.

Откройте командную строку Node.js и выполните следующие команды:

 npx создать-реагировать-приложение pwa-a2hs
компакт-диск pwa-a2hs
начало пряжи 

Создать файл манифеста

Обычно расположенный глубоко в корневой папке веб-приложения, ваш веб-манифест представляет собой файл, который содержит всю необходимую информацию о вашем веб-сайте, такую ​​как название вашего приложения, пути к различным значкам, цвет фона и т. д., в формате JSON. Файл веб-манифеста имеет решающее значение для функционального веб-приложения, поскольку он позволяет правильно представить ваше веб-приложение на различных этапах взаимодействия с пользователем.

Мы рекомендуем использовать генератор манифеста для автоматического создания файла вместе с оптимизированными по размеру значками для вашего приложения.

Используя генератор манифестов, вы можете получить файл manifest.zip с таким содержимым:

И ваш manifest.webmanifest должен выглядеть примерно так:

 {
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "дисплей": "автономный",
    "сфера": "/",
    "start_url": ".",
    "имя": "PWA-A2HS",
    "короткое_имя": "PWA",
    "description": "Демонстрационная функция PWA для A2HS",
    "значки": [
        {
            "источник": "/icon-192x192.png",
            "размеры": "192x192",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-256x256.png",
            "размеры": "256x256",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-384x384.png",
            "размеры": "384x384",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-512x512.png",
            "размеры": "512x512",
            "тип": "изображение/png"
        }
    ]
}

Теперь скопируйте содержимое сгенерированных файлов манифеста в папку /public/ , удалите файл manifest.json по умолчанию в этой папке и перейдите к следующему шагу.

Связать HTML с манифестом

Когда вы закончите настройку файла манифеста, сохраните его в корневом каталоге вашего веб-сайта, чтобы его можно было вызвать позже с относительным путем, например /manifest.webmanifest . Чтобы завершить настройку файла манифеста, укажите его в заголовке HTML. ( \pwa-a2hs\public\index.html ), например:

 <голова>
    <метакодировка="utf-8" />
    <ссылка rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <мета
      имя = "описание"
      content="Веб-сайт создан с помощью приложения create-реагировать"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </голова>

Настройка потока установки

Манифест веб-приложения — это не все, что требуется для установки веб-приложения. Вам нужно будет выполнить некоторые дополнительные настройки, чтобы сделать ваше веб-приложение доступным для установки и, таким образом, сделать его на один шаг ближе к PWA.

Создать сервис-воркера

Сервисный работник перехватывает ваши сетевые запросы и включает различные функции, подобные приложениям, которыми славится PWA. Создайте файл service-worker.js в папке pwa-a2hs\public и заполните его следующим содержимым:

 self.addEventListener («выборка», функция (событие) {
  событие.ответить(
      caches.match(event.request).then(function(response) {
          вернуть ответ || выборка (событие.запрос);
      })
  );
});

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

Зарегистрируйте своих сервисных работников

И чтобы наш service-worker.js работал, нам нужно зарегистрировать его, вставив этот код в конец <body> нашего index.html :

 //index.html
<скрипт>
    если ("serviceWorker" в навигаторе) {
      // Зарегистрировать сервис-воркер, размещенный в корневом каталоге
      // сайт, использующий область действия по умолчанию.
      navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        console.log('Регистрация Service Worker прошла успешно:', Registration);
      }, /*поймать*/ функция(ошибка) {
        console.log('Ошибка регистрации сервис-воркера:', ошибка);
      });
    } еще {
      console.log('Сервисные работники не поддерживаются.');
    }
  </скрипт>

Время проверить это!

Теперь ваш PWA должен быть доступен для установки. Обновите внешний интерфейс, и вы должны увидеть кнопку установки на панели задач (на рабочем столе) или небольшой баннер с уведомлением (на мобильном устройстве).

Нажатие « Установить » приведет к появлению ярлыка PWA на рабочем столе / домашнем экране:

A2HS — это еще не все

Вышеупомянутое является лишь базовым добавлением на главный экран с помощью продвижения установки, предоставляемого браузером. Чтобы поднять его на ступеньку выше, вы также можете сохранить событие beforeinstallprompt, чтобы вручную запустить процесс установки с различными шаблонами для продвижения установки PWA.

С помощью настраиваемой кнопки установки вы можете не прерывать путешествие пользователя, ориентируясь на конкретных пользователей, которым будет полезна установка приложения. И если вы продумаете, где и где разместить рекламный пользовательский интерфейс, ваше PWA, вероятно, будет работать лучше, чем ваши конкуренты, и в результате получит гораздо более высокие коэффициенты конверсии приложения.