Deconstructing PWA - подробное руководство по ставке Google на будущее веб-приложений

Что такое PWA?

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

Когда мы открываем веб-сайт с поддержкой PWA, после некоторых моментов активности (10–20 секунд) на веб-сайте он показывает автоматическое уведомление, управляемое браузером, для добавления ярлыка веб-приложения на главный экран.

При нажатии на то же самое предупреждение отображается, как показано ниже -

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

Таким образом, теперь приложение становится более доступным, поскольку оно находится на главном экране и его не нужно открывать в Chrome или других браузерах.

Кроме того, при открытии щелчком по значку ярлыка приложения он предоставляет автономное приложение, подобное интерфейсу, без адресной строки или других значков в браузере. Наряду с этим, к нему также можно получить доступ в автономном режиме (если он настроен в помещении приложения), и он будет способен получать push-уведомления.

Особенности PWA

• Прогрессивный. Поскольку большинство современных браузеров построены с прогрессивным улучшением в качестве основного принципа, PWA работает для каждого пользователя, независимо от выбора браузера.
• Отзывчивый. Приложение не зависит от платформы и области просмотра, поэтому подходит для мобильных, настольных, носимых и других устройств.
• Независимость от подключения: сервисные работники могут работать в автономном режиме или в сетях низкого качества.
• Как приложение - может быть таким же плавным и отзывчивым, как собственное приложение.
• Безопасный - обслуживается через HTTPS, чтобы обеспечить безопасность и доставку данных без подделки.
• Повторное вовлечение. Упростите повторное вовлечение с помощью таких функций, как push-уведомления.
• Устанавливаемый. Разрешите пользователям «оставлять» приложения, которые они считают наиболее полезными, на главном экране, не беспокоясь о магазине приложений.
• Возможность ссылки - им можно легко поделиться, используя ссылки и простой метод установки.
• Меньше хранилища. Поскольку он в основном отображается в движке браузера, ему не требуется ничего, кроме программ и кода внешнего интерфейса в пакете (в отличие от собственных приложений), поэтому он занимает очень мало места в вашем устройство.

Кто использует

Некоторые из отличных примеров PWA:

Немного статистики

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

Примеры:

Веб-сайт Trivago, созданный на основе PWA, теперь доступен на 33 языках в 55 странах. Освоение новой функциональности было впечатляющим: более полумиллиона человек добавили сайт trivago на свой рабочий стол. Вовлеченность пользователей, которые добавляют на рабочий стол, увеличилась на 150%: в среднем всего 0,8 повторных посещений для пользователей старого мобильного сайта до двух посещений для пользователей PWA.
- Следующий миллиард пользователей: trivago рассматривает прогрессивные веб-приложения как будущее мобильных устройств

BookMyShow - крупнейшая компания по продаже билетов в Индии, которую ежемесячно посещают более 50 миллионов человек. Они разработали улучшенную версию своего мобильного веб-сайта с использованием прогрессивного веб-приложения (PWA), что позволило увеличить конверсию на 80 +%, а это означает, что больше пользователей покупают билеты.
- Новое прогрессивное приложение BookMyShow. Веб-приложение увеличивает конверсию на 80%

Я только что перечислил два из них, их больше.

Вы можете проверить все приложения, которые выполнили переход на PWA, в PWAStats, который содержит управляемый сообществом список статистики и новостей, связанных с Progressive Web Apps.

Стоит ли переходить на PWA?

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

Тем не менее, иметь PWA - это хорошо, поскольку он дает возможность охватить больше аудитории, определенно увеличивает вовлеченность пользователей и обеспечивает повторное вовлечение.

Что нужно для создания PWA

Обязательными элементами для создания PWA являются SSL-сертификат на веб-сайте, конфигурация манифеста и Service Worker. Давайте углубимся в подробности о них,

Сертификат SSL

В веб-приложении должен быть включен протокол https, чтобы стать прогрессивным веб-приложением. Хотя когда-то он был зарезервирован в основном для паролей и других конфиденциальных данных, весь Интернет постепенно оставляет HTTP позади и переключается на HTTPS. Буква «S» в HTTPS означает «Безопасный». Это безопасная версия стандартного «протокола передачи гипертекста», используемого вашим браузером при взаимодействии с веб-сайтами.

Вы можете создать бесплатный сертификат SSL здесь -

Файл манифеста

Манифест - это файл конфигурации JSON, который находится в веб-приложении. Этот файл определяет, как веб-приложение должно вести себя при установке на мобильное устройство или рабочий стол.

Конфигурации в файле манифеста

name - название приложения

short_name - имя, которое будет отображаться вместе со значком установленного приложения на главном экране устройства

icons - значки, которые будут использоваться для создания ярлыка для установки

start_url - этот маршрут будет отображаться при открытии приложения

background_color - это будет цвет фона заставки.

Подробное описание конфигурации манифеста вы можете найти здесь.

Вы можете создать файл манифеста здесь -

Сервисный работник

Service worker - это в основном сценарий, который запускается в браузере, когда любое веб-приложение отображается в движке браузера. Этот скрипт автономен, не зависит от какого-либо взаимодействия с пользователем и запускается, даже когда браузер не открыт. У него нет доступа к DOM, и он работает в совершенно другом потоке, чем движок просмотра.

Service worker помогает веб-приложению указать механизм кэширования (то есть какие статические файлы будут сохранены в кеше браузера), конфигурацию автономного режима (то есть страницы, которые доступны или могут обслуживаться без Интернета), Push-уведомления, процесс фоновой синхронизации и т. Д. .

Дополнительные функции, такие как периодическая синхронизация, геозона, находятся в разработке для сервис-воркеров.

Дизайн

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

Пример -

Шаги по созданию PWA из веб-приложения

В этом руководстве я считаю, что у вас уже есть веб-приложение.

Шаг 1. Убедитесь, что на вашем веб-сайте включен SSL (т. е. доступна https-версия вашего сайта и любой трафик, не связанный с https, перенаправляется на https).

Шаг 2. Теперь создайте статический файл манифеста с именем service-worker.js в каталоге вашего приложения, как показано ниже:

Здесь, в этом файле манифеста, я добавил некоторые прослушиватели событий, которые мне нужны для моего приложения, например -

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

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

Дополнительная конфигурация -

Включите файл сервис-воркера в свой HTML-файл следующим образом:

<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() {
console.log("Service Worker Registered");
});
}
</script>

Шаг 3. Добавьте в приложение файл манифеста, например -

И добавьте это на сайт как -

<link rel="manifest" href="/manifest.json">

Шаг 4. Добавьте в разметку контент, не относящийся к Javascript, который будет отображаться, когда Javascript отключен в клиентском браузере, в противном случае аудит завершится неудачно и выдаст следующую ошибку:

Образец обратной связи, не относящейся к js, будет -

<noscript>This website requires JavaScript. </noscript>

Шаг 5. Добавьте в HTML-файл мета-конфигурацию цвета темы, которая добавит цвет фона панели навигации на мобильных устройствах в соответствии с темой вашего приложения -

<meta name="theme-color" content="#5f5eaa">

Шаг 6. Теперь протестируйте свой веб-сайт с помощью инструмента Chrome Lighthouse Audit.

Чтобы открыть его, вы можете открыть веб-сайт в браузере Chrome, а затем открыть Параметры разработчика ›Аудит.

Теперь выберите параметры, как показано ниже, и нажмите Выполнить аудит.

Обработка заявки займет некоторое время, после чего она предоставит отчет, как показано ниже -

Создание сборки приложения из PWA для публикации в магазине Play

Если у вас уже есть PWA, поздравляю, сила уже с вами.

Теперь вы можете перейти на указанный ниже веб-сайт и ввести URL-адрес своего веб-сайта -

После отправки вашего веб-сайта вы увидите что-то вроде этого -

Затем нажмите Build My PWA в правом верхнем углу, и он покажет все доступные параметры -

Нажатие на Android дает два варианта, вы можете выбрать любой из них и загрузить. Затем извлеките его, откройте каталог с помощью Android Studio и создайте приложение.

Вот и все, у вас есть пакет для своего PWA-приложения.

Теперь вы можете опубликовать этот пакет в магазине Play.

Почему Fasal переходит на WPA

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

использованная литература