Что такое прогрессивное веб-приложение (PWA)?

Прогрессивное веб-приложение — это тип прикладного программного обеспечения, доставляемого через Интернет и предназначенного для работы на любой платформе, использующей браузер, соответствующий стандартам, включая как настольные, так и мобильные устройства.

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

Преимущества PWA: -

  • НАДЕЖНЫЙ — загружается мгновенно и быстро, без отображения полного экрана загрузки.
  • БЫСТРЫЙ — быстро отвечает нам плавной анимацией.
  • ВОЗВРАЩЕНИЕ – хороший пользовательский интерфейс/UX, напоминающий интерфейс приложения, а не веб-сайта.
  • НЕЗАВИСИМЫЙ — они не зависят от магазинов приложений и могут быть найдены через поисковую систему, социальные сети или любую другую часть экосистемы.

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

P.S. Если вы застряли на каком-либо этапе, вы можете обратиться к этому репозиторию Github.

Шаг 1. Настройте простое приложение React

Мы будем использовать create-react-app, чтобы создать новое стандартное приложение для реагирования.

Если у вас не установлено приложение create-react-app, вы можете запустить приведенную ниже команду в терминале, чтобы настроить его.

npm install -g create-react-app

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

create-react-app simple-pwa

Мы перейдем в папку, в которой было установлено наше приложение, а затем запустим сервер разработки.

//Change directory
cd simple-pwa
//Start VSCode
code .          
//Start the Development Server
yarn start

Шаг 2. Аудит приложения для PWA

Аудит веб-сайта — это полный анализ всех факторов, влияющих на веб-сайт, и стандартный метод, который дает полное представление о любом веб-сайте, общем трафике и отдельных страницах.

Мы будем использовать Lighthouse для проведения аудита вашего приложения React по Контрольному списку PWA Google. Вы можете добавить Lighthouse в Chrome по этой ссылке, если вы еще этого не сделали.

После того, как вы нажмете «Создать отчет», будет создан автоматический отчет, как показано ниже.

Давайте исправим эти проблемы прямо сейчас!

Шаг 3: Зарегистрируйте сервисного работника

Service Worker – это скрипт, который ваш браузер запускает в фоновом режиме отдельно от веб-страницы и открывает доступ к функциям, которым не требуется веб-страница или взаимодействие с пользователем.

Создайте новый файл worker.js в папке public и добавьте следующий код:

Обновите файл index.html (строки 19–33) в папке public, чтобы проверить, поддерживает ли браузер клиента сервис-воркеры:

Теперь обновите файл index.js в папке src, как показано ниже в строке 6 и строке 18:

Теперь создайте файл serviceWorker.js в папке src и добавьте в него следующий код:

Теперь перезапустите сервер разработки с помощью npm start или yarn start и перезагрузите приложение. В консоли должно появиться сообщение «Регистрация воркеров прошла успешно».

Теперь давайте снова запустим аудит и проверим, не устранены ли оставшиеся проблемы.

Шаг 4. Добавьте логотип в свое приложение

Этот шаг необязателен, но мы добавляем логотип в наш index.html. Единственная цель этого дополнительного упражнения — отрисовка изображения до загрузки Javascript. Для демонстрации я использовал логотип React, доступный в общей папке нашего стандартного приложения.

Добавьте приведенный ниже код (строки с 15 по 36 и строки с 41 по 43) в файл index.html в общедоступной папке вашего приложения. Стиль, выполненный в этом примере, выравнивает изображение по центру страницы, вы можете выбрать собственный стиль.

Шаг 5. Добавьте значки-заставки

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

Чтобы пройти аудит, вам нужно добавить значок заставки размером 512x512 пикселей, Chrome автоматически масштабирует его в соответствии с устройством.

Добавьте следующий код в файл manifest.json в общедоступной папке вашего приложения.

Я добавил все доступные значки в массив значков. Поскольку я использую logo512.png в качестве приветственного логотипа, я сделал его маскируемым, чтобы он не попал в почтовый ящик после установки приложения на мобильном устройстве.

Перезапустите приложение и перезагрузите его.

Проведите аудит с помощью Lighthouse.

Все проверки прошли, кроме одной? Если вы терпеливо выполнили все шаги до этого момента, то единственной проверкой, которую нужно пройти, будет «Не перенаправлять HTTP-трафик на HTTPS». Итак, это подводит нас к следующему шагу, который обеспечивает быстрое решение для прохождения этой проверки.

Шаг 6. Разверните приложение

Для некоторых платформ разработки (таких как Firebase или Netlify) ваше приложение будет автоматически перенаправляться на HTTPS после развертывания. Для других (например, Heroku) вам нужно будет получить сертификат от центра сертификации (ЦС) и загрузить его.

Как только ваше приложение будет развернуто и защищено, ваш последний аудит должен быть пройден.

Поздравляем, вы только что создали работающее прогрессивное веб-приложение!