Разнюхать о PWA: Что такое Progressive Web Apps и как использовать эту технологию прямо сейчас

Mobile RGSsoft
22-04-2021
39
Разнюхать о PWA: Что такое Progressive Web Apps и как использовать эту технологию прямо сейчас

Разнюхать о PWA: Что такое Progressive Web Apps и как использовать эту технологию прямо сейчас

 

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 дает измеримые результаты. Вот несколько примеров:

Важно: функциональность прогрессивного веб-приложения не мешает пользоваться сайтом обычным способом. Не менее важно: превратить сайт в 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? Ловите решения:

Готовых решений для других движков я не нашел, но вы можете поискать самостоятельно.

 

Итог: бесплатные модули для реализации PWA есть у WordPress, включая WooCommerce и Drupal. За модули для Joomla!, OpenCart, CS-Cart и Prestashop нужно платить. Для реализации прогрессивного веб-приложения на других движках придется заплатить разработчикам.

«Многие считают PWA технологией будущего, и я с ними согласен»

Насколько актуально использовать PWA? Нужно ли владельцам бизнеса добавлять на корпоративные сайты или сайты интернет-магазинов функциональность прогрессивных приложений?

  • Более чем актуально. Удобство использования, увеличение скорости получения информации с сайта, а это один из важнейших показателей качества ресурса, возможность работы с приложением офлайн, push-уведомления и многое другое – все это благоприятно сказывается на посещаемости и конверсии, снижая при этом процент отказов. Который, кстати, растет пропорционально увеличению времени загрузки страницы.

Технология развивается, а это значит, что возможности будут только расти. По поводу нужно внедрять или нет – все зависит от целей, которые ставит перед собой бизнес. Если цели сходятся с теми плюсами, которые дает PWA, игра стоит свеч.

Что дальше

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

Из статьи вы узнали, как превратить в PWA существующий сайт, если он работает на популярном движке. Внедрение возможностей прогрессивного приложения как минимум не помешает сайту. Попробуйте сделать PWA! Благодаря инструкции из статьи вы быстро сделаете современный блог, портфолио или сайт-визитку с функциональностью PWA.

Если захотите реализовать прогрессивное приложение в интернет-магазине или на корпоративном сайте, обратитесь к профессиональным разработчикам.

Больше не нужно искать и обзванивать диджитал-агентства!
Создайте тендер и получите предложения по цене и срокам от лучших веб-студий Украины.
Это бесплатно и займет 2 минуты. В каталоге 1500+ диджитал-агенств, готовых помочь в реализации ваших задач. Выберите и сэкономьте до 30% времени и бюджета!
Создать тендер
Популярные статьи в разделе Mobile
Mobile
Mobile
29-04-2021
Tips for Developing a Safe and Powerful Mobile Wallet App Unit Space
What makes the digital payment solution global is its ability to offer fast and secure online...
Mobile
Mobile
07-05-2021
Flowers.ua запустил приложение для доставки цветов, которое позволит сэкономить время и деньги IT рейтинг UA
Как заказать свежие цветы с доставкой, не выходя из дома? Чтобы поздравить самых родных людей с п...
Mobile
Mobile
22-04-2021
Разнюхать о PWA: Что такое Progressive Web Apps и как использовать эту технологию прямо сейчас RGSsoft
PWA или прогрессивное веб-приложение (англ. progressive web app) – гибрид сайта и приложения для ...
Bug