Вот уже несколько лет бизнес активно использует в своей работе прогрессивные веб-приложения (PWA), которые объединяют в себе возможности сайтов и нативных приложений.
Подобные решения значительно упрощают жизнь пользователей и повышают вовлеченность. В этой статье разберем, что такое PWA-решения, чем они полезны и кому стоит задуматься над их внедрением.
Принцип работы PWA-приложений и зачем они нужны
Progressive Web Apps — технологический прорыв, который наделил сайты функциональностью и удобством мобильного софта. Однако такие решения нет необходимости загружать в AppStore и Google Play.
PWA — это улучшенная версия сайта, которую можно установить на устройство, но при этом она не нуждается в адаптации под мобильные платформы.
Веб-решения решают три основные проблемы пользователей: долгая загрузка сайтов, зависимость от интернет-подключения и необходимость установки на мобильное устройство. С прогрессивным веб-решением все работает быстро, даже если пользователь не в сети, а установка сводится к добавлению ярлыка на главный экран устройства.
История появления и развития PWA
О веб-приложениях широкой аудитории стало известно в 2015 году, хотя саму технологию начали разрабатывать и тестировать Microsoft еще в 2000 году. Термин Progressive Web Apps был придуман дизайнером Ф. Берримэн и инженером Google Chrome А. Рассел.
Однажды Рассел разместил в своем блоге пост, как бы рассуждая:
«А что если бы сайты работали как программы? А вот бы заставить страницы загружаться в метро, где нет интернета…». В ответ критики посмеялись: «Очередная утопия от Google». Но уже через год мир увидел первые прототипы веб-приложений.
В 2016 году Twitter и Aliexpress сделали ставку на эти приложения и выиграли:
- Twitter получил PWA Twitter Lite, весом 600 Кб взамен 120 Мб основной программы;
- Aliexpress за счет внедрения веб-приложений получила полюс 82% к конверсиям.
2017-2018 года:
- Chrome, Firefox и Edge добавляют полную поддержку приложения;
- Apple осторожно внедряет Service Workers в Safari 11.1, но без push-уведомлений;
2019-2021 года:
- Microsoft интегрирует PWA в Windows 10;
- Apple постепенно улучшает поддержку.
PWA сегодня — это золотая середина между сайтами и приложениями, технология, которая дает скорость нативных приложений, но не нуждается в сложной разработке, экономит память устройства, работает оффлайн и не вынуждает пользователей скачивать приложения из магазина.
Суть PWA: технологии и принципы
Технологическая основа прогрессивных веб-приложений состоит из трех основных частей: Service Workers, Web App Manifest и HTTPS. Чтобы лучше понять эффективность такого подхода, разберем каждый элемент подробнее:
- Service Workers — это фоновые скрипты на JavaScript, работающие вне основного потока браузера. Они в ответе за:
- Оффлайн-режим — кэшируют критически важные ресурсы (статические и динамические). При обрыве соединения пользователь видит сохраненную версию страницы;
- Мгновенную загрузку страниц — сокращают время загрузки до 0,5-1 секунды;
- Фоновый процесс синхронизации — отправляют данные формы, как только соединение восстанавливается.
- Web App Manifest — это файл формата manifest.json, т. е. инструкция для браузера о том, как отображать PWA. В нем прописываются:
- название и иконка для добавления на экран;
- цвета темы, чтобы приложение сливалось с дизайном устройства;
- режим экрана (портретный/полноэкранный);
- стартовый URL — страница, открывающаяся при запуске.
- HTTPS (безопасное соединение) — обязательное требование для работы приложения:
- Шифрует данные пользователя (логин и пароль);
- Предотвращает взлом через MITM-атаки (подмена контента).
Без HTTPS функции оффлайн-режима и push-уведомлений не активизируются.
Отличие PWA от нативных приложений и мобильных сайтов
Многие путают веб-приложения с мобильной версией, однако между ними значительные различия:
| Мобильная версия | PWA | |
| Скорость загрузки | Зависит от подключения к сети | Благодаря кэшированию — моментальная |
| Функциональность | Ограниченная | Полноценная |
| Оффлайн-работа | Не работает без подключения к сети | Работает |
| Push-уведомления | Не поддерживаются | Поддерживаются |
| Обновления | Автоматические | Фоновые |
| Использование памяти | Не занимает место на устройстве | Минимальный объем |
| Производительность | Как обычный сайт | Выше (благодаря кэшированию и оптимизации) |
PWA и нативные приложения: ключевые различия
| Нативное приложение | PWA | |
| Установка | Требует загрузки из AppStore и Google Play | Устанавливается из браузера в 1 клик |
| Размер | Занимает много места на устройстве | Практически не занимает места — только кэш |
| Обновления | Обновления через магазин | Автоматически |
| Оффлайн-работа | Обычно не поддерживает | Поддерживает |
| Push-уведомления | Поддерживает | Поддерживает, кроме iOS |
| Время публикаций | Недели на прохождение модерации в магазинах | Мгновенная публикация |
Преимущества веб-приложений
Технологии веб-приложений открыли новые возможности для взаимодействия с потребителями. Давайте разберем главные преимущества.
Экономия бюджета на разработку и обслуживание
Главное их преимущество — это универсальность. В отличие от нативных приложений, которые требуют отдельных версий под каждую OC (iOS, Android), веб-приложения работают на всех устройствах.
Как это снижает расходы:
- Один код для всех ОС (нет необходимости нанимать разработчиков под каждую систему);
- Упрощенное тестирование (проверяется один продукт вместо нескольких под каждую OC);
- Недорогая поддержка (обновления выходят единовременно для всех).
- Рост вовлеченности пользователей. Еще одно преимущество веб-приложений — способность постоянно удерживать интерес ЦА и мотивировать ее к действиям за счет:
- Push-уведомлений — мгновенное информирование клиентов об акциях, скидках, персональных предложениях прямо на экране устройства;
- Добавления на главный экран — пользователь может закрепить его иконку, как обычное приложение, что будет способствовать частым возвратам в него.
- Бесперебойный доступ к контенту. Прогрессивные веб-приложения поменяли стандарты взаимодействия.
- Мгновенная загрузка за счет кэширования — страницы открываются за 0,5-2 секунды;
- Оффлайн-режим — пользователи ценят приложения, которые работают вне зависимости от качества интернет-соединения.
- Максимальный охват аудитории достигается за счет:
- Отсутствия необходимости установки — доступ через браузер с возможностью добавления иконки на экран мобильного устройства;
- Работают на любых устройствах — даже на стареньких смартфонах с небольшим объемом памяти;
- Экономят трафик — до 90% меньше потребляют мобильных данных.
- SEO-преимущества:
- Полная индексация в поисковиках в отличие от изолированных нативных приложений;
- Рост органического трафика благодаря быстрой загрузке.
- Безопасность. Обязательное использование HTTPS исключают риск перехвата пользователей.
Недостатки PWA: что нужно учитывать
Несмотря на множество преимуществ PWA, есть и недостатки, которые также стоит учитывать:
- Не полный доступ к некоторым возможностям устройства. Например, у таких веб-решений нет доступа к контактам, календарю и Bluetooth;
- Ограниченная поддержка на iOS — нет полноценных push-уведомлений и нет доступа к Face ID и Touch ID;
- Зависимость от браузеров. Разные браузеры по-разному интерпретируют код продукта;
- В старых версиях браузеров некоторые функции недоступны (например, Service Worker).
Как создать PWA-приложение из сайта
Для создания необходимо будет настроить и добавить три компонента:
- Service Worker;
- Manifest файл;
- Beforinstallprompt.
Service Worker
Service Worker — это Javascript-файл, который выполняет роль центрального процессора и позволяет реализовать:
- Мгновенную загрузку страниц за счет кэширования;
- Полноценную оффлайн-работу;
- Систему push-уведомлений;
- Фоновую синхронизацию данных.
Manifest файл
Manifest — это внешнее оформление приложения. Благодаря этому файлу приложение получает:
- Иконку на экране;
- Название под ярлыком;
- Фоновый цвет.
Beforinstallprompt
Beforinstallprompt — это событие, которое срабатывает когда:
- Браузер анализирует ваш сайт;
- Обнаруживает признаки существования веб-приложения (рабочие Service Worker и Manifest файл);
- Готовит автоматическое предложение «Установить приложение».
У Beforinstallprompt есть некоторая особенность: система может активизировать предложение по установке слишком рано для пользователя. То есть, когда пользователь впервые посетил сайт и еще не успел познакомиться с продуктом/контентом. Это часто приводит к отказу в установке. По этой причине рекомендуется активировать установку только после знакомства пользователя с сайтом или после какого-либо целевого действия (регистрации, добавления товара в корзину и пр.).
Пошаговая инструкция
Для тех, кто хочет быстро и просто создать веб-приложение, а также для новичков, существует сервис по созданию таких приложений — PWA Builder.
Инструкция:
- Проходите регистрацию на сайте и вставляете ссылку на свой сайт.
- Сервис займется анализом вашего сайта. Если выяснится, что на сайте есть какие-то проблемы, которые помешают создать PWA, то сервис даст рекомендации по устранению ошибок и улучшению, чтобы в дальнейшем все правильно отображалось и корректно работало.
- Далее будет создан код serviceworker.
- Теперь заполняем конструктор для файла Manifest, скачать готовый и вставить на сайте.
Примеры успешных PWA-приложений
PWA есть у многих известных брендов, которые благодаря прогрессивным приложениям решили основные проблемы:
Twitter Lite
Проблема: медленная работа, особенно в странах с плохим интернетом, высокий процент отказов.
Решение: приложение весом 600 КБ (у нативного приложения 23 МБ).
Starbucks
Проблема: низкая конверсия мобильных заказов.
Решение: приложение с оффлайн корзиной и меню.
Forbes
Проблема: долгая загрузка статей.
Решение: приложение с мгновенным кэшированием контента.
Заключение
Progressive Web Apps доказали свою эффективность в реальных бизнес-кейсах: от увеличения конверсии до экономии трафика. Технология будет особенно актуальна для:
- E-commerce (увеличение продаж);
- Медиа (удержание аудитории);
- Для регионов со слабым интернетом.
Стоит ли внедрять веб-приложение? Если ваша ЦА ценит скорость, а ваш бизнес — экономию без потери функциональности, то ответ очевиден.
