PWA или прогрессивное веб-приложение (англ. progressive web app) – гибрид сайта и приложения для мобильных устройств. Из этой статьи вы узнаете, что такое PWA и почему это крутая фишка для бизнеса. Также сможете за 5 минут добавить на существующий сайт функциональность прогрессивного веб-приложения или создать гибрид сайта и приложения с нуля.
Что такое PWA
Это технология, которая добавляет на сайт функциональность приложения. В десктопном браузере progressive web app остается обычным сайтом. А когда посетитель открывает его в мобильном браузере, PWA превращается в гибрид сайта и приложения.
Давайте посмотрим, как это работает. Пользователь заходит на сайт и получает предложение добавить его на главный экран.
Если пользователь принимает предложение, значок сайта мгновенно появляется на экране мобильного устройства.
Важный момент: PWA пробралось на устройство пользователя в два клика. Это произошло в обход Play Маркет, а также вопреки запрету устанавливать приложения из неизвестных источников. Антивирусная программа не ругалась.
После установки PWA создает кэш сайта. Это решает две задачи: повышает скорость загрузки и делает сайт доступным офлайн. То есть благодаря технологии PWA сайтом можно пользоваться даже без подключения к интернету.
Очень важный момент: по состоянию на начало апреля 2020 года полностью поддерживает работу PWA только Chrome, в том числе Chrome для мобильных. Другие браузеры поддерживают частично или вообще не поддерживают.
Это значит, что при реализации функциональности PWA она будет работать для посетителей сайта, которые пользуются Chrome. В других браузерах ваш сайт будет работать как обычно, но функциональность прогрессивного веб-приложения останется недоступной или частично доступной.
Результаты экспресс-тестов:
- В Firefox PWA полностью работает.
- В браузере Samsung Internet PWA не работает, блог доступен как обычный сайт.
- В Opera сайт доступен без функциональности PWA.
- В Microsoft Edge для Android PWA полностью работает.
Таким образом, технология PWA поддерживается как минимум в 80% браузеров (это доля Chrome, Firefox и Edge).
Промежуточный итог: PWA делает четыре крутые штуки:
- Устанавливается на устройство в один клик без магазинов приложений.
- Быстро загружается благодаря заранее созданному кэшу страниц.
- Работает офлайн благодаря тому же кэшу.
- Рассылает пользователям push-уведомления.
Зачем бизнесу использовать progressive web apps
Все ответы на вопрос из подзаголовка можно найти в предыдущем разделе. Повторим главные тезисы для закрепления. PWA помогают бизнесу:
- Пробраться на мобильное устройство пользователя в обход Google Play и других магазинов приложений.
- Сделать сайт доступным офлайн. Это работает даже для интернет-магазинов, но информация об оформленных сделках «прилетает» в магазин, когда у пользователя появляется интернет.
- Повысить скорость загрузки сайта на мобильных устройствах.
- Рассылать пользователям уведомления.
Внедрение PWA дает измеримые результаты. Вот несколько примеров:
- Tinder благодаря технологии сократил время загрузки страниц с 11,9 до 4,69 секунды. PWA Tinder на 90% «легче», чем их нативное приложение.
- PWA Uber почти ничего не весит и грузится за 3 секунды даже в сетях 2G.
- OLX благодаря PWA повысил CTR объявлений на 146 % и уменьшил количество отказов на 80 %.
Важно: функциональность прогрессивного веб-приложения не мешает пользоваться сайтом обычным способом. Не менее важно: превратить сайт в PWA быстрее и дешевле, чем сделать нативное приложение.
С помощью инструкций ниже вы за 5 минут реализуете функциональность progressive web app на своем сайте. Бесплатно. Правда, повезет не всем, а только тем, кто выбирает нормальные движки для сайта. Остальным придется расплачиваться за неправильный выбор в прямом смысле: нанимать разработчиков и платить за внедрение PWA.
Как реализовать функциональность PWA на сайте
Для реализации PWA существующий сайт должен соответствовать требованиям:
- Доступ по протоколу http.
- Адаптивность или отзывчивость.
- Отдельный URL для каждой страницы (важный пункт, если ваш сайт – SPA).
Рекомендация для новичков: перед внедрением PWA сделайте резервную копию сайта. Резервное копирование нужно делать перед любыми изменениями.
Рассмотрим два способа реализовать PWA в порядке от простого к сложному.
Как в пару кликов превратить сайт в PWA с помощью готовых плагинов
Владельцам популярных CMS повезло: они могут превратить сайт в прогрессивное приложение с помощью плагинов.
На WordPress по состоянию на конец 2020 года работает треть от общего количества сайтов или почти две третьих сайтов на CMS. Поэтому инструкция написана на примере этого движка. После нее будет полезная информация для тех, кто работает с другими CMS.
Установите на сайт бесплатный плагин PWA for WP. Я протестировал несколько модулей из официального каталога WordPress и остановился на этом решении. Результаты его работы можно увидеть в начале статьи. Если хотите, попробуйте другие плагины.
Укажите общие настройки. Выберите иконку для рабочего стола (App Icon) и иконку-прелоадер (App Splash Screen Icon). В настройках есть возможность выбрать ориентацию приложения (портрет или ландшафт), но эта функция не работает. Приложение отображается в режиме «портрет» независимо от настроек.
Чтобы отправлять пользователям push-уведомления, зарегистрируйте проект в Firebase, получите ключ к API и укажите его на вкладке Push notifications.
В расширенных настройках включите офлайн-отслеживание с помощью Google Analytics. По желанию включите поддержку PWA-уведомлений на экранах десктопов.
В настройках кэширования выберите автоматическое создание кэша. Укажите количество постов, которые будут кэшированы. Максимальное значение – 50.
Сохраните изменения и откройте сайт на мобильном устройстве в браузере Chrome. PWA уже работает, результаты внедрения вы видели в начале статьи.
Что делать, если сайт работает не на WordPress? Ловите решения:
- Joomla!: PWA от WebKul (59 долларов).
- Drupal: Progressive Web App (работает с Drupal 7, версия для Drupal 8 в разработке).
- OpenCart: OpenCart PWA (99 долларов).
- Magento: PWA Studio (понадобится помощь разработчика).
- CS-Cart: CS-Cart PWA (99 долларов).
- Prestashop: PWA and push notifications и Advance PWA (90 и 150 евро соответственно).
- WooCommerce: PWACommerce.
Готовых решений для других движков я не нашел, но вы можете поискать самостоятельно.
Итог: бесплатные модули для реализации PWA есть у WordPress, включая WooCommerce и Drupal. За модули для Joomla!, OpenCart, CS-Cart и Prestashop нужно платить. Для реализации прогрессивного веб-приложения на других движках придется заплатить разработчикам.
«Многие считают PWA технологией будущего, и я с ними согласен»
Насколько актуально использовать PWA? Нужно ли владельцам бизнеса добавлять на корпоративные сайты или сайты интернет-магазинов функциональность прогрессивных приложений?
- Более чем актуально. Удобство использования, увеличение скорости получения информации с сайта, а это один из важнейших показателей качества ресурса, возможность работы с приложением офлайн, push-уведомления и многое другое – все это благоприятно сказывается на посещаемости и конверсии, снижая при этом процент отказов. Который, кстати, растет пропорционально увеличению времени загрузки страницы.
Технология развивается, а это значит, что возможности будут только расти. По поводу нужно внедрять или нет – все зависит от целей, которые ставит перед собой бизнес. Если цели сходятся с теми плюсами, которые дает PWA, игра стоит свеч.
Что дальше
PWA – перспективная технология, которая расширяет возможности взаимодействия с мобильными пользователями.
Из статьи вы узнали, как превратить в PWA существующий сайт, если он работает на популярном движке. Внедрение возможностей прогрессивного приложения как минимум не помешает сайту. Попробуйте сделать PWA! Благодаря инструкции из статьи вы быстро сделаете современный блог, портфолио или сайт-визитку с функциональностью PWA.
Если захотите реализовать прогрессивное приложение в интернет-магазине или на корпоративном сайте, обратитесь к профессиональным разработчикам.