Рассылка по интернет-маркетингу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

Разнюхать о PWA: зачем бизнесу progressive web apps и как использовать эту технологию прямо сейчас

4 Апреля 2019 Дмитрий Дементий
Время чтения: 17 минут Нет времени читать? Нет времени? 21 комментариев
Отправим материал вам на:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

PWA или прогрессивное веб-приложение (англ. progressive web app) – гибрид сайта и приложения для мобильных устройств. Из этой статьи вы узнаете, что такое PWA и почему это крутая фишка для бизнеса. Также сможете за 5 минут добавить на существующий сайт функциональность прогрессивного веб-приложения или создать гибрид сайта и приложения с нуля.

Что такое PWA

Это технология, которая добавляет на сайт функциональность приложения. В десктопном браузере progressive web app остается обычным сайтом. А когда посетитель открывает его в мобильном браузере, PWA превращается в гибрид сайта и приложения.

Давайте посмотрим, как это работает. Пользователь заходит на сайт и получает предложение добавить его на главный экран.

PWA предлагает пользователю добавить сайт на главный экран

Если пользователь принимает предложение, значок сайта мгновенно появляется на экране мобильного устройства.

Значок сайта появился на экране мобильного устройства

Важный момент: PWA пробралось на устройство пользователя в два клика. Это произошло в обход Play Маркет, а также вопреки запрету устанавливать приложения из неизвестных источников. Антивирусная программа не ругалась.

Установка из неизвестных источников заблокирована, но для PWA это не проблема

После установки PWA создает кэш сайта. Это решает две задачи: повышает скорость загрузки и делает сайт доступным офлайн. То есть благодаря технологии PWA сайтом можно пользоваться даже без подключения к интернету.

Благодаря технологии PWA сайт доступен без подключения к интернету.

Очень важный момент: по состоянию на начало апреля 2019 года полностью поддерживает работу 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 на сайте

Для реализации PWA существующий сайт должен соответствовать требованиям:

Рекомендация для новичков: перед внедрением PWA сделайте резервную копию сайта. Резервное копирование нужно делать перед любыми изменениями.

Рассмотрим два способа реализовать PWA в порядке от простого к сложному.

Как в пару кликов превратить сайт в PWA с помощью готовых плагинов

Владельцам популярных CMS повезло: они могут превратить сайт в прогрессивное приложение с помощью плагинов.

На WordPress по состоянию на конец 2018 года работает треть от общего количества сайтов или почти две третьих сайтов на CMS. Поэтому инструкция написана на примере этого движка. После нее будет полезная информация для тех, кто работает с другими CMS.

Установите на сайт бесплатный плагин PWA for WP. Я протестировал несколько модулей из официального каталога WordPress и остановился на этом решении. Результаты его работы можно увидеть в начале статьи. Если хотите, попробуйте другие плагины.

Мы делаем профессиональные сайты на 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 с помощью Gatsby

Gatsby – генератор статических сайтов, написанный React (это библиотека JavaScript). На Gatsby работают большие ресурсы, в том числе ecommerce-проекты, лендинги, корпоративные сайты. Для профессионального использования Gatsby на серьезных проектах нужно разбираться в коде.

Но создать небольшой сайт-визитку, портфолио или блог на Gatsby можно и без технических знаний. Для этого нужно воспользоваться библиотекой готовых сборок для новичков. Рассмотрим создание PWA на примере минималистичной сборки для блога от создателя Gatsby Кайла Мэттьюза.

Установите на компьютер Node.js. Это нужно, чтобы запустить на компьютере локальный сервер, необходимый для работы с Gatsby. Подойдет как LTS-, так и Current-версия Node.js. После установки откройте командную строку и введите две команды: node --version и npm --version. Чтобы запустить командную строку в Windows, введите «cmd» в поиске на панели задач.

Если все сделано верно, увидите примерно такую картину (версии могут отличаться):

Проверяем установку Node.js

Установите Git. Это система контроля версий, она необходима для работы с Gatsby. После установки создайте учетную запись. Для этого введите в командную строку свои данные:

  • git config --global user.name "Vasya Pupkin".
  • git config --global user.email "basil.pupkin@gmail.com".

Установите Gatsby CLI с помощью команды npm install -g gatsby-cli.

Устанавливаем Gatsby CLI

Теперь можно установить сборку Gatsby. В командной строке выберите диск D или другой несистемный диск на ПК. Для этого введите команду D:.

Gatsby не работает, если в названии папки или в пути к файлу есть кириллические символы.

Выбираем диск D, на который установим сборку Gatsby

Установите сборку Gatsby с помощью команды gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog. В данном случае my-blog-starter – название сайта. Можете заменить его на любое другое.

Устанавливаем сборку Gatsby в папку my-blog-starter на диске D

После завершения установки перейдите в папку проекта с помощью команды cd my-blog-starter. Запустите PWA на локальном сервере с помощью команды gatsby develop. Если все сделано верно, локальная версия сайта станет доступной по адресу http://localhost:8000.

Вы запустили Gatsby на локальном сервере

Запуск Gatsby на локальном сервере показан на иллюстрации ниже, процесс длится менее минуты.

Запускаем Gatsby на локальном сервере

Редактировать PWA и создавать посты будем в папке проекта.

Прогрессивное приложение пока живет в папке на диске D

Чтобы изменить параметры блога, откройте в «Блокноте» или другом текстовом редакторе файл gatsby-config.js. Укажите подходящие метаданные: название блога, имя автора, описание. В качестве URL укажите что-то вроде https://basil-pupkin.surhe.sh, только вместо «basil-pupkin» напишите желаемый вариант. Обратите внимание, нужно указать протокол соединения https. Чуть позже бесплатно опубликуем сайт на хостинге Surge.

Указываем метаданные сайта

Сохраните изменения в файле. После этого локальный сервер обновит будущее PWA.

Gatsby мгновенно обновляется в браузере

Замените аватар в папке Content – Assets. Назовите файл со своим фото так же, как называется дефолтный аватар. Чтобы отредактировать информацию об авторе, откройте файл bio.js в папке Src – Components. Укажите данные и сохраните изменения.

Редактируем информацию об авторе

Создавать публикации будем в папке Content – Blog. Войдите в эту директорию и изучите содержимое. Каждый пост тестовой сборки лежит в отдельной папке. Название папки формирует URL поста. Внутри папки лежит текстовый файл index.md и опционально фотографии.

Здесь живут посты блога

Чтобы опубликовать новый пост, действуйте так:

  • Создайте папку с подходящим названием.
  • Внутри папки создайте файл index.md.
  • Откройте файл в текстовом редакторе.

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

Пишем пост в текстовом редакторе

Сохраните изменения. Gatsby сам обновит блог и опубликует пост.

Пост опубликован

Удалите все папки кроме своей из директории Blog. На сайте останется только ваша публикация. Я этого не делаю, чтобы в дальнейшем наглядно показать работу PWA.

Теперь переселите блог с локального сервера в интернет. Развернем PWA на условно бесплатном хостинге статических сайтов Surge, но по желанию можно использовать и другие платформы, например, GitHub Pages, Netlify и так далее.

Установите Surge. Для этого введите в терминал команду npm install --global surge. Сгенерируйте статический сайт: введите команду gatsby build в папке проекта. Gatsby в течение минуты подготовит статические файлы HTML и JavaScript, которые в дальнейшем будут опубликованы в сети.

Генерируем статические файлы для публикации в интернете

Введите команду surge public/.

Просим Surge опубликовать сайт

Система предложит случайное название домена.

Surge предлагает рандомный домен

Вручную замените это название на желаемое.

Указываем желаемый вариант

Нажмите Enter и дождитесь сообщения о публикации сайта.

Surge сообщает, что сайт опубликован

Проверьте доступность сайта в браузере. Обратите внимание, ресурс доступен по протоколам http и https. Редирект можно настроить, если купить платный аккаунт Surge. Чтобы посмотреть на работу PWA, используйте безопасное соединение, так как прогрессивные веб-приложения полноценно работают только через https.

Ваше прогрессивное приложение уже опубликовано в интернете

Проверьте работу PWA. Откройте блог на мобильном устройстве в браузере Chrome. Через несколько секунд появится предложение установить приложение.

Приложение просится на устройство

Добавьте приложение, подождите несколько минут и отключите интернет. Запустите приложение.

Блог доступен, даже когда устройство находится в автономном режиме без подключения к интернету

Проверьте, доступны ли внутренние страницы при отсутствии подключения.

Все публикации доступны и без интернета

Обратите внимание, на некоторых устройствах при первом запуске PWA требует подключения к интернету.

Чтобы опубликовать новый пост, повторите описанные шаги: запустите блог на локальном сервере, создайте пост в папке проекта, убедитесь, что содержание и внешний вид вас устраивает, сгенерируйте статические файлы и заново опубликуйте блог на Surge.

Важный момент: в отличие от Google, «Яндекс» пока не умеет индексировать контент, который генерируется с помощью JavaScript. Чтобы помочь поисковику, нужно настроить в Gatsby рендеринг на стороне сервера. Об этом поговорим в следующих публикациях.

Промежуточный итог: рассмотрели два способа реализации PWA. Это внедрение функциональности PWA на существующий сайт с помощью готовых плагинов или создание PWA с нуля с помощью генератора статических сайтов Gatsby. Конечно, есть и третий путь: всегда можно обратиться к профессиональным разработчикам и попросить реализовать прогрессивное веб-приложение.

«Многие считают PWA технологией будущего, и я с ними согласен»: программист отдела разработки сайтов «Текстерры» Николай Ильичев

Программист «Текстерры» Николай Ильичев поделился с читателями своим мнением о прогрессивных веб-приложениях.

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

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

Николай Ильичев

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

Д.Д.: Одна из фишек PWA – возможность использовать сайт офлайн. То есть даже если у пользователя нет подключения к интернету, он может пользоваться кэшированными страницами. Это актуально для контент-проектов, блогов, СМИ. Не будет ли у пользователей проблем из-за кэширования? PWA в фоновом режиме что-то грузит при доступе к интернету, насколько это критично?

Н.И.: Будут проблемы или нет – зависит от разработчика, который задаст правила загрузки и кэширования данных. Если на сайте много видео, и все это видео скачивать – в итоге просто закончится место, выделенное для кэша. Обычно оно считается как процент от свободной памяти устройства. В идеале же пользователь получит одни преимущества – все та же скорость загрузки и возможность работать без интернета. Как только на устройстве клиента появляется интернет, PWA начинает обновлять кэш. Это нужно для того, чтобы на устройстве всегда была актуальная версия сайта. Так что это не критично для владельцев мобильных устройств.

Д.Д.: Реализовать функциональность PWA на сайте можно в пару кликов без технических знаний. Почему, по вашему мнению, PWA пока не очень широко используются?

Н.И.: Технология достаточно новая – в этом вся причина. Google анонсировал ее в 2015 году, а более или менее нормальная поддержка браузерами появилась еще позже. Многие даже не слышали об этой технологии, а кто слышал, не понимают, какие преимущества она имеет. Хотя стоит заметить, что ситуация постоянно улучшается. Многие крупные компании уже используют данную технологию. А разработчиков, способных реализовать этот функционал, становится все больше. Многие считают, что за этой технологией будущее, и я с ними согласен.

Д.Д.: Для реализации PWA сайт изначально должен обладать рядом характеристик: адаптивностью, высокой скоростью загрузки, доступностью по безопасному протоколу соединения. Значит ли это, что реализация PWA заставит владельца сайта «подтянуть хвосты» и улучшить сайт?

Н.И.: Так и есть. Но, конечно, желательно, чтобы эти хвосты подтягивались по умолчанию, либо не возникали вовсе. Адаптивность – без нее никуда, большую часть времени мы ищем что-то в интернете через смартфон, и сайт без адаптивного дизайна просто не выживет: пользователь просто не сможет им пользоваться. Скорость загрузки – один из самых важных показателей сайта, который влияет на позицию в поисковой выдаче. Мне кажется, что стоит использовать PWA не для закрытия хвостов, а для увеличения общей производительности сайта и удобства его использования.

Д.Д.: Как вы думаете, повлияет ли на популярность PWA тот факт, что этот формат активно продвигает Google?

Н.И.: Думаю, да. Google у всех на слуху, а технологии, которые он продвигает, обычно становятся достаточно популярны. Эта компания обладает внушительными ресурсами, позволяющими постоянно улучшать технологии, которые она считает перспективными.

Что дальше

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

Если во время работы с PWA на WordPRess или Gatsby будут вопросы, пишите в комментариях, будем разбираться.

© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.
Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl + enter.
Оцените материал:
Texterra – продвижение в интернете x
Заказать звонок:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
Texterra – продвижение в интернете x
Заказать услугу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных