Наверх
/
/
Что такое PWA? Внедрение и преимущества технологии для владельцев сайтов
В тренде

Что такое PWA? Внедрение и преимущества технологии для владельцев сайтов

30.04.2019 Время прочтения: 5 минут

О Progressive Web Apps говорят не первый год, но далеко не все владельцы сайтов решили воспользоваться новым благом интернет-технологий, особенно в России. Мы решили систематизировать имеющуюся информацию и разобраться, что такое PWA, чем она характеризуется и каковы ее перспективы.

Что такое PWA?

PWA (Progressive Web App) – это веб-технология, которая трансформирует сайт в приложение. Прямо из браузера его можно поставить на главный экран телефона, и оно будет отправлять push-уведомления и получит доступ к аппаратным средствам гаджета. И все это даже при нестабильном подключении или офлайн. PWA-приложения ставятся на смартфон пользователя в обход официальных магазинов приложений и несмотря на запрет ставить приложения с неизвестных источников. Магия вне Хогвартса.

Магия вне Хогвартса

Но это работает и приносит результаты первопроходцам.

Термин PWA придумали дизайнер Фрэнсис Берримэн (Frances Berriman) и инженер Google Chrome Алекс Рассел (Alex Russell) еще в 2015 году. Технология привлекла внимание, так как обещала несложную реализацию и практически моментальный контакт с пользователем.

PWA как гибрид сайта и приложения стал возможен благодаря растущим возможностям кэша, браузеров и push-разработок.

Как характеризуют технологию PWA разработчики Google?

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

Именно эти характеристики позволяют Progressive Web Apps завоевывать любовь коммерческих организаций и место на экране пользовательского смартфона.

Как выглядит PWA: примеры

Примеров Progressive Web Apps пока еще не так много, но они есть и даже на русском языке. Технология успешно реализована на примере Google Maps:

Google Maps pwa

А также в сервисе визуальных закладок и поиска картинок Pinterest:

Pinterest pwa

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

PWA-приложения становятся все популярнее, примеров все больше и больше. Лучшие PWA уже сейчас недосягаемы для обычных приложений и сайтов.

Преимущества PWA для владельцев сайтов и интернет-магазинов

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

  1. Разработчики заявляют, что Progressive Web Apps значительно проще создавать, чем обычные приложения. Да, как и любые другие веб-продукты их нужно обновлять и поддерживать, но сталкиваться с ограничениями маркетов приложений уже не придется.
  2. Progressive Web Apps индексируются и улучшают SEO-показатели: в Google сайт будет занимать значительно более высокие позиции, если подключена технология PWA. Как минимум, Google оценит наличие протокола безопасности – все прогрессивные веб-приложения работают на HTTPS.
  3. Благодаря кроссплатформенности технологии вы можете разработать одно приложение, которое будет работать на любых устройствах любых операционных систем, – достаточно браузера.
  4. Приложения, созданные по стандарту PWA, работают при слабом или вовсе отсутствующем сигнале – это значит, вы не потеряете потенциальные конверсии: пользователь может положить товары в корзину, просматривая сайт без подключения к Интернету, а оформить заказ в тот момент, когда появится доступ к Сети.

Недостатки Progressive Web Apps

Немного, но есть.

  1. Технология PWA – относительно новая, и во многом приходится действовать наощупь. Создание PWA будет в какой-то мере вызовом.
  2. Могут быть перебои в поддержке со стороны браузеров. На момент размещения этой статьи Progressive Web Apps поддерживают Chrome, Safari, Firefox, Edge.

Достаточно ли этого для отказа от PWA – решать вам.

Как сделать PWA: плагины и каркасы для различных CMS

Перед тем, как сделать PWA-приложение, удостоверьтесь, что сайт соответствует требованиям технологии:

  • Наличие SSL-сертификата.
  • Мобилопригодность (есть мобильная версия или внедрен адаптивный дизайн).
  • Скрипт Service Worker, который подгружает файлы и данные, а также сохраняет их.
  • Отдельный URL для каждой страницы.

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

Если все есть, выбирайте подходящий плагин:

  • Super Progressive Web Apps для веб-площадок на Wordpress.
  • PWA for WP & AMP (тоже для сайтов на Wordpress).
  • PWA от WebKul для сайтов на Joomla! (платный, 59 долларов).
  • Progressive Web App для веб-ресурсов на Drupal.
  • OpenCart PWA для сайтов OpenCart (платный, 99 долларов).
  • PWACommerce для веб-проектов на WooCommerce.
  • CS-Cart PWA для интернет-площадок на CS-Cart (платный, 99 долларов).
  • PWA Studio для сайтов на Magento (без программиста не обойтись).

Или каркас для разработки прогрессивных веб-приложений:

  • PWA-Starter-Kit – самый простой каркас от Polymer.
  • Vue Storefront – бесплатный каркас с открытым исходным кодом, подходящий ко многим CMS.
  • Ionic – фреймворк с платным расширением возможностей.
  • Quasar – также поможет сгенерировать Progressive Web Apps.

Перспективы PWA на будущее

Уже сейчас все параметры технологии Progressive Web Apps дают основание считать эту разработку технологией будущего. Она активно продвигается Google, и это определенно сыграет свою роль в распространении веб-приложений PWA.

Как и любая интернет-технология, способная повышать узнаваемость и конверсии, создание PWA-приложения заставляет дорабатывать свои сайты тех, кто давно никак их не улучшал. Протокол безопасного шифрования данных и мобилопригодность сайта для мобильных гаджетов – базовые стандарты для сайтов, которым нужен трафик в 2019 году. Без SSL-сертификата и адаптивного дизайна сайту все сложнее выживать, пользователь до него доходит все реже. Но если кого-то Progressive Web Apps подтолкнет только до этих основ, то кому-то поможет увеличить производительность сайта и улучшить поведенческие факторы.

Пусть другие тоже знают!

Еще на эту тему

Составление семантического ядра сайта – почему это важно?
Составление семантического ядра сайта – почему это важно?
Узнайте, что такое семантическое ядро сайта, как его правиль...
03.08.2018 10994
Сколько стоит seo-продвижение сайта
Сколько стоит seo-продвижение сайта
Из чего складывается цена SEO продвижения сайта в Яндекс и G...
31.01.2019 11584
Показать еще материалы

Другие интересные статьи

SEO-фрагменты (SEO Snippets) Google: что делать с ошибками 404, оставшимися с предыдущих версий сайта?
SEO-фрагменты (SEO Snippets) Google: что делать с ошибками 404, оставшимися ...
Сегодняшний вопрос прибыл из Сан-Франциско: что делать с оши...
07.05.2018 1863
Что лучше и выгоднее, Яндекс.Директ или Google AdWords?
Что лучше и выгоднее, Яндекс.Директ или Google AdWords?
Разбираемся какую систему контекстной рекламы выбрать, запус...
31.05.2018 14980
Оценка эффективности SEO-продвижения в системах статистики
Оценка эффективности SEO-продвижения в системах статистики
Грамотная оценка эффективности SEO-подрядчика. Проверяем рез...
09.01.2019 4371
Показать еще материалы
Оставить заявку