Сейчас мы живем в мире mobile-first. Многие задумались о создании мобильного приложения помимо своего сайта. Но всегда ли нужно нативное приложение и как превратить в приложение уже имеющийся сайт, читайте в этой статье.
Начать хочу с того, что часто нативное приложение (да и PWA тоже) вообще не нужны.
Чаще всего сайта с хорошей мобильной адаптивностью достаточно. Если сайт имеет пакет favicon (иконок) и manifest.json, как я писал раньше в статье "Ее величество иконка в manifest.json", то это очень напомнит PWA, но есть очень большая разница.
Как описано в статье, человек при желании открывает в смартфоне доп. меню и добавляет сайт "На экран Домой":
Появляется иконка с ссылкой на главном экране смартфона или планшета:
Удобно - да. Трат никаких. Но мало кто знает из обычных пользователей и использует.
PWA идет дальше, недаром технология носит название Progressive Web Application, что на русский язык переводиться как «прогрессивное веб-приложение».
Progressive Web Apps (PWA) — это сайты, которые похожи на приложения для смартфонов не только внешне, но и функционально.
PWA или Progressive Web Application – технология, которая позволяет клиентам установить ваш сайт на смартфон как приложение. Теперь не нужно разрабатывать отдельно сайт, приложение под iOS и приложение под Android. Достаточно иметь и поддерживать только сайт.
Благодаря PWA пользователи могут установить сайт себе на смартфон: работать он будет как мобильное приложение, а на экране телефона появится иконка для быстрого доступа. Также PWA-сайт можно установить как приложение на десктоп. Progressive Web Application – это гибрид сайта и приложения.
И вы удивитесь - для установки PWA-сайта не понадобилось заходить в App Store или Google Play! Да, да - в отличие от мобильного нативного приложения, PWA не нужно регистрировать в магазинах приложений.
Для бизнеса это означает экономию. Во-первых, не нужно платить App Store и Google Play за размещение; во-вторых продвигать и поддерживать PWA дешевле, чем мобильное приложение.
Пользователю же не нужно идти в магазин приложений, чтобы скачать PWA.
При этом PWA можно добавить в Google Play с помощью функции TWA (Trusted Web Activities), а значит сайт получает дополнительную площадку для распространения.
Главные преимущества PWA
1. Разработать PWA во много раз дешевле, чем мобильное приложение. Кроме того нет трат на обновление приложения и синхронизации (это очень дорого).
2. Не нужно заходить в Google Play или AppStore, чтобы что-либо загрузить. Требуется только подключение к интернету и браузер. Его можно скачать напрямую с вашего сайта.
3. PWA – его не нужно создавать отдельно для каждой операционной системы. Опять экономия.
4. Позволяет отправлять Push-уведомления. Progressive Web Apps позволяют отправлять уведомления на главный экран смартфона по типу обычных приложений (к сожалению из-за полити Apple, работает только на Android).
5. Работает без интернета. Даже в офлайне пользователи могут читать контент и отправлять формы. Данные из формы сохранятся и поступят на сервер, когда у пользователя появится интернет-соединение.
6. Экономия на повторном привлечении клиента, так как нет расходов на инструменты возвращения клиента (ретаргетинг, ремаркетинг).
7. Быстро загружается. Когда пользователь в первый раз заходит на сайт, данные сайта сохраняются в кэше. Благодаря этому в будущем сайт загружается мгновенно.
8. PWA приложение работает с функциями: геолокация, камера, микрофон.
9. Наличие плагинов практически для всех популярных CMS.
Согласитесь - не мало!
Недостатки PWA приложения
У PWA приложения нет возможности отправлять уведомления на iPhone, так как в iOS браузер по умолчанию Safari. Однако в iOS 14 Apple добавила функцию выбора браузера по умолчанию. Это означает, что если пользователь выберет стандартным браузером не Safari, то уведомления можно будет отправлять и на iPhone.
PWA приложения не поддерживают функцию Touch ID и ограниченно работают с функцией Bluetooth.
Кратко, как работают прогрессивные веб-приложения
Progressive Web Apps состоят из двух основных частей:
- оболочки, которая отображает структуру страницы (сетку);
- контента, который может варьироваться между различными страницами приложения.
В зависимости от технологии, используемой для разработки страницы, содержимое может быть отправлено с сервера в формате HTML или с помощью сценария JSON.
Файл манифеста
Один из наиболее важных элементов PWA — манифест приложения в формате JSON. Файл позволяет изменить визуальную часть в тех областях, где обычно отображается контент.
Этот файл содержит следующие данные:
- Name: имя приложения.
- Description: описание приложения.
- Icons: иконка приложения с различными разрешениями для мобильных устройств.
- Start url: url запуска. Когда пользователь жмет на иконку, должна открываться главная страница.
- Display: настройки отображения (standalone, fullscreen, minimal-ui и другие).
- Orientation: веб-приложение может использоваться в портретном или в ландшафтном режиме.
- Theme_color: цвет, который будет использоваться в верхней панели приложения.
- Background_color: цвет для экрана перед полной загрузкой приложения.
Service Worker
Другим важным файлом PWA является Service Worker – скрипт, который работает в фоновом режиме и позволяют сайту работать автономно, загружая содержимое и генерируя push-уведомления.
Принцип понятен. Для желающих знать больше: https://web.dev/progressive-web-apps/
Как PWA устанавливается на смартфон пользователя?
1. Пользователь переходит на сайт и видит всплывающее окно с предложением установить приложение. В правильных плагинах предложение не показывается, если приложение уже установлено.
2. Пользователь в один клик устанавливает приложение. На рабочем столе устройства появляется иконка для быстрого доступа. Теперь сайт доступен пользователю всего в один клик.
3. Сайт открывается без интерфейса браузера и выглядит как мобильное приложение.
4. Пользователь получает ваши пуш уведомления.
Пример работы одного из плагинов для CMS Joomla:
Главные выводы:
1. Большинству бизнесов и их сайтов не нужно создание нативных приложений и даже PWA. А вот пакет иконок с манифестом сделать обязательно надо.
2. PWA интересная технология. Ее сильно продвигает Google, возможно ее наличие в будущем будет и ранжирующим фактором (не факт).
3. Конечно, для некоторых бизнесов PWA не может стать полноценной заменой мобильному приложению. Возможностей у нативного мобильного приложения значительно больше. Но если вам достаточно перечисленных выше преимуществ, PWA-сайт может стать для бизнеса хорошей и значительно более дешевой альтернативой приложению.
И еще. Так как наша стадия создает сайты в основном на CMS Joomla, то хочу привести ссылки на плагины для быстрого создания PWA (видел аналогичные и для других популярных CMS): https://www.extensioncoder.com/joomla-progressive-web-application.html https://kanev.com/products/progressive-web-app-for-joomla Как видите стоимость плагинов вполне доступна и адекватна. Бесплатных, не для одной CMS не встречал. Настройка и запуск очень проста.
