Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

Блог веб-студии WebTend. Блог веб-мастера Алексея Блохина. Публикации, статьи

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

Преимущества Progressive Web Apps (PWA)

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

Начать хочу с того, что часто нативное приложение (да и PWA тоже) вообще не нужны.

Чаще всего сайта с хорошей мобильной адаптивностью достаточно. Если сайт имеет пакет favicon (иконок) и manifest.json, как я писал раньше в статье "Ее величество иконка в manifest.json", то это очень напомнит PWA, но есть очень большая разница.

Как описано в статье, человек при желании открывает в смартфоне доп. меню и добавляет сайт "На экран Домой":

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

Появляется иконка с ссылкой на главном экране смартфона или планшета:

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

Удобно - да. Трат никаких. Но мало кто знает из обычных пользователей и использует.

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.

Согласитесь - не мало!

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

Недостатки PWA приложения

У  PWA приложения нет возможности отправлять уведомления на iPhone, так как в iOS браузер по умолчанию Safari. Однако в iOS 14 Apple добавила функцию выбора браузера по умолчанию. Это означает, что если пользователь выберет стандартным браузером не Safari, то уведомления можно будет отправлять и на iPhone.

PWA приложения не поддерживают функцию Touch ID и ограниченно работают с функцией Bluetooth.

Кратко, как работают прогрессивные веб-приложения

Progressive Web Apps состоят из двух основных частей:

  1. оболочки, которая отображает структуру страницы (сетку);
  2. контента, который может варьироваться между различными страницами приложения.

В зависимости от технологии, используемой для разработки страницы, содержимое может быть отправлено с сервера в формате 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. Пользователь переходит на сайт и видит всплывающее окно с предложением установить приложение. В правильных плагинах предложение не показывается, если приложение уже установлено.

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

2. Пользователь в один клик устанавливает приложение. На рабочем столе устройства появляется иконка для быстрого доступа. Теперь сайт доступен пользователю всего в один клик.

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

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

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

4. Пользователь получает ваши пуш уведомления.

Пример работы одного из плагинов для CMS Joomla:

Преимущества Progressive Web Apps (PWA) - Веб-студия WebTend г. Екатеринбург

 Главные выводы:

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 https://www.pwaonline.com/joomla-pwa-progressive-web-app-plugin.html https://www.extensionbase.com/joomla-progressive-web-app.html Как видите стоимость плагинов вполне доступна и адекватна. Бесплатных, не для одной CMS не встречал. Настройка и запуск очень проста.

CMS Joomla

CMS Joomla!

CMS Joomla (джумла) – один из мировых лидеров среди систем для создания сайтов и интернет-магазинов. Предельно простая, удобная, многофункциональная, полностью русифицированная административная часть. Простой и интуитивно понятный интерфейс, позволяющий, не имея специальных технических знаний или навыков программирования, работать с системой управления любому пользователю.

Веб-студия WebTend работает исключительно с системой управления контентом CMS Joomla!

Интернет-магазины создаем на CMS Joomla с немецким компонентом электронной коммерции - Joomshopping.

Подробнее о Joomla