Что такое PWA-приложения и зачем они нужны бизнесу

В 2015 году разработчик Google Эдди Османи рассказал о новом способе создания приложений, которые не нужно скачивать с Google Play или App Store, и для использования которых не требуется подключение к интернету. Технология получила название Progressive Web Application, или PWA. Объясняем, как ее применять, и чем она может помочь бизнесу в современных условиях.

Что такое PWA и зачем он нужен

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

PWA работает на компьютере, смартфоне или планшете. Процесс установки включает в себя 3 шага:

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

2. Он нажимает на уведомление, а программа создает значок приложения на его устройстве.

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

От пользователя не требуется никаких специальных действий, технология безопасна для его устройства и личных данных. У PWA-приложения нет привязки к Google Play или App Store, а скорость загрузки страниц — значительно выше по сравнению с использованием веб-ресурса напрямую. 

Преимущества и недостатки

Внедрение PWA-приложения не отнимает много времени, не требует знаний в области программирования и реализуется бесплатно. Сегодня Google Play и App Store вводят все больше ограничений для разработчиков и пользователей, поэтому вместо создания мобильной версии сайта можно использовать PWA. 

Преимущества этого формата:

• работа на любых современных устройствах;

• поддержка использования в режиме офлайн;

• быстрый доступ к сайту;

• высокая скорость загрузки страниц;

• стабильная работа, которая не зависит от качества интернет-соединения;

• простой и быстрый процесс создания приложения;

• максимальная безопасность;

• небольшой вес среднего сайта (около 1 Мб);

• возможность отправки push-уведомлений;

• простота установки, использования и повышенное вовлечение.

К основным недостаткам относятся ограниченные возможности и отсутствие поддержки некоторыми браузерами. Однако технология развивается, и в будущем возможна совместимость с любым окружением. Ограничения связаны и с соображениями безопасности — например, через приложение нельзя отправлять СМС. 

Чем отличается от сайта и мобильного приложения

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

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

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

Какому бизнесу подходит

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

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

Если вы тоже активно взаимодействуете с клиентами, подключите Контакт-центр MANGO OFFICE. Сервис поможет вам оперативно обрабатывать большой поток обращений, контролировать работу колл-центра и качество обслуживания клиентов. Система уведомит сотрудников о пропущенных вызовах и запустит исходящий обзвон. В результате вы сведете количество потерянных обращений к нулю.

Как установить

Существует несколько способов установки PWA: 

• написание собственного кода с нуля; 

• использование плагинов;

• работа со сторонними сервисами. 

Код у прогрессивных приложений — несложный, однако для его написания все же нужно разбираться в языках программирования. Плагины подойдут только для сайтов, которые работают на CMS. При использовании сторонних сервисов тип движка не важен, однако необходимо разбираться в настройках.

Использование плагинов

Самой популярной системой управления сайтами считается WordPress. Для нее разработано больше всего плагинов, с помощью которых создают PWA-приложения. В их числе — Super Progressive Web Apps, Progressive WordPress или PWA for WP & AMP.

Алгоритм установки всех плагинов — примерно одинаковый:

1. Общие настройки. Здесь все стандартно — название приложения, описание, добавление иконок.

2. Регистрация в Firebase. Она обязательна, если вы планируете отправлять пользователям Push-уведомления. Зайдите на https://firebase.google.com/, скопируйте API-ключ и вставьте его в настройках плагина.

3. Расширенные настройки. Здесь указывают автоматическое кэширование, количество постов, офлайн-отслеживание и другие опции. Выберите нужные и сохраните изменения.

Большинство плагинов для WordPress и Drupal бесплатные. Для других CMS разработаны платные расширения. Например, плагин для Joomla! обойдется в 59 долларов.

Использование сервиса Gatsby

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

Для начала установите Node.js (https://nodejs.org/en/), Git (https://gitforwindows.org/) и Gatsby (https://github.com/gatsbyjs/gatsby-starter-blog). Для установки можно использовать путь только с англоязычными символами.

Алгоритм запуска сервисов и создания PWA:

1. Откройте командную строку и запустите Node. Для этого поочередно введите две команды: node --version и npm --version.

2. Зарегистрируйтесь в Git. Чтобы добавить имя пользователя, введите git config --global user.name "Imya polzovatelya", а для email git config --global user.email "adres@yandex.ru".

3. Введите в командную строку npm install -g gatsby-cli и создайте папку с названием вашего проекта gatsby new nash_proekt.

4. Зайдите в папку nash_proekt и выберите файл gatsby-config.js. Измените пункты «Название», «Описание» и «Адрес сайта» через https://.

5. Чтобы добавить публикацию, зайдите в Content, затем в Blog и создайте новую папку. Внутри нее создайте файл с расширением index.md, который и будет служить страницей. При необходимости добавьте изображения. Файлы .md нужно создавать по специальным правилам разметки.

6. В командной строке наберите gatsby build nash_proekt, чтобы генератор создал статический сайт. Останется загрузить его на любой удобный хостинг.

Если при открытии сайта появляется сообщение «Добавить сайт на главный экран», значит — PWA работает. Протестируйте приложение: кликните на уведомление, отключите интернет и запустите PWA.

Примеры использования

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

Многие компании оценили преимущества PWA. Например, благодаря этой технологии Twitter в кратчайшие сроки получил 250 000 посетителей. 

Среди других компаний, которые используют PWA:

• Телеграм;

• Pinterest;

• Википедия;

• Forbes;

• Uber;

• Starbucks.

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