Разработка PWA приложений

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

По данным Smashing Ideas, внедрение PWA повышает вовлеченность клиентов минимум на 20%.

На прогрессивные приложения переходят компании абсолютно разных направлений – от соцсетей (Twitter) до маркетплейсов (OLX) и служб такси (Uber).

Далее подробнее рассмотрим, что такое PWA, как оно работает и как создать прогрессивное приложение. 

Что такое PWA

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

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

Когда уместно разрабатывать PWA

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

Например, в виде PWA можно сделать форму заказа на сайте компании по доставке воды. Клиентам не нужно будет искать сайт поставщика – достаточно запустить форму с домашнего экрана смартфона и сделать заказ.

Личный кабинет для интернет-магазина тоже можно выделить как PWA. В таком приложении будет удобно просматривать статусы заказов и решать другие часто повторяющиеся задачи.

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

Преимущества PWA

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

Преимущества для пользователей

• Удобный интерфейс: страницы переключаются мгновенно, кнопки навигации и управления расположены по нативным стандартам;
• PWA адаптируется к экранам мобильных, планшетов, ноутбуков и ПК;
• Работает при медленном интернете и офлайн;
• Работает с камерой, bluetooth, датчиками и другим «железом»;
• Обменивается данными через безопасный протокол – HTTPS;
• Занимает мало памяти на устройстве – в среднем до 1 Мб;
• Иконку PWA можно добавить на домашний экран смартфона вместе с приложениями из AppStore и Google Play.

Преимущества для бизнеса 

• Можно разработать одно решение для всех платформ: Android, iOS, Windows, MacOS и Linux;
• Реализация маркетинговой стратегии через push-уведомления;
• PWA индексируется в поисковиках;
• Легко распространяется – достаточно поделиться ссылкой;
• По данным Google, для 50% пользователей удобнее покупать на сайтах, чем загружать приложение.

Сюда же можно добавить и все пользовательские преимущества. В итоге прибыль компании напрямую зависит от пользовательского опыта ее клиентов. 

Недостатки PWA

Если PWA задействует аппаратные возможности устройства, оно потребляет заряд быстрее, чем обычный сайт.

PWA невозможно продвигать через магазины приложений. 

Разница в возможностях и удобстве между PWA и нативными приложениями всё же есть. Особенно это справедливо для iOS.
Ограничения на iOS 
Apple постепенно внедряет поддержку функций в прогрессивных веб-приложениях. Но на текущий момент PWA на iPhone и iPad работают с ограничениями. 

В частности, в PWA на iOS не поддерживает: 

• Bluetooth, включая технологию определения местоположения iBeacon;
• Сканер отпечатка пальцев TouchID;
• Технологию распознавания лица FaceID;
• Фреймворк для приложений дополненной реальности ARKit;
• Высотомер;
• Получение информации о батарее;
• iOS выделяет под кэш PWA максимум 50 Мб (в большинстве случаев этого достаточно);
• После 7 дней неиспользования кэш стирается и приложение нужно подгружать заново;
• Эпловский браузер, Safari, не поддерживает получение данных с датчиков движения.

В PWA на iOS есть проблемы с фоновой синхронизацией и push-уведомлениями. Последнее решается через интеграцию оповещений по SMS.

Также На iOS нет поддержки обработки живого потока данных с камеры. Это создает определенные сложности при сканировании QR-кода.

Как работает PWA

В основе PWA лежат 4 технологии: Service Worker, App Shell, HTTPS и Web App manifest.
Service Worker
В обычном интернет-приложении есть два слоя: фронтенд и бэкенд. Первый – то, что пользователь видит в браузере, второй – отвечает за логику обработки данных на сервере.

В PWA появляется третий слой – Service Worker. Это javascript-файл, который обрабатывается браузером, как и фронтенд. Но при этом он может выполнять задачи, которые традиционно требовали подключения к серверу.

Service Working дает возможность отправлять push-уведомления, работать с кэшем или выполнять сложные операции с данными.

Service Worker сохраняет запросы и данные в кэше устройства. Это даёт 3 преимущества:

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

Для объяснения последней технологии приведем пример.

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

PWA продолжает выполнять ваш запрос даже при закрытом браузере. И как только появляется соединение, приложение автоматически отправляет сообщение (денежный перевод, файл). Это и есть фоновая синхронизация.

Совместимость с браузерами
Сервис воркеры поддерживаются основными браузерами: Chrome, Firefox, Edge, Safari и Opera.

App Shell
App Shell – архитектура, при которой оболочка (англ. Shell) страниц PWA загружается в кэш устройства во время первого посещения. При дальнейшем использовании приложения каркас страниц берется с локального кэша, с сервера подгружается только сам контент. 

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

Чтобы веб-приложение работало через HTTPS, нужно подключить SSL-сертификат в настройках хостинга. 

Web App manifest
Это файл в котором находятся данные о приложении: режим окна, название, иконка, режим окна. 

Режимы окна PWA быть трех видов:

• минимальный UI (слева);
• автономный или standalone (по центру);
• полноэкранный (справа);

В автономном режиме PWA внешне неотличимо от нативного мобильного приложения.

Этапы разработки прогрессивного приложения

ИТ-проекты, включая разработку PWA, проходят через стандартные этапы:

1. Исследование. Тест гипотезы, исследование рынка, постановка бизнес-задач.
2. Технические требования. На этой стадии нужно определить, какой тип приложения строить: сайт, PWA, нативное мобильное приложение или разрабатывать продукты для нескольких платформ параллельно. Различия между разными видами приложений мы разобрали
   этой статье. 
3. Проектирование. Создание оптимальных для решения задач проекта архитектуры и интерфейса приложения.
4. Проработка стиля. Утверждение высокоточных макетов, создание логотипов, кнопок, баннеров и другой графики.
5. Программирование. Написание кода для фронтенда, сервис воркера и бэкенда.

Фронтенд пишут с помощью HTML, CSS и Javascript.

Service-worker – это javascript файл. Поэтому его разрабатывают с помощью JavaScript фреймворков. Например, мы работаем на Vue.js.

Бэкенд можно разрабатывать на любом языке. Мы специализируемся на Python.

6. Тестирование. На этой стадии QA-специалисты решают две ключевые задачи:
   1. проверяют, что пользователи получат качественный продукт;
   2. находят ошибки на этапе, когда цена их исправления относительно невелика;
7. Запуск. Миграция на постоянный хостинг, подключение домена и финальная настройка.

Вопрос-ответ

Чем PWA отличается от SPA 

SPA – одностраничное интернет-приложение. Оно может относиться к прогрессивным, если соответствует трем критериям: 

1. Надежной работе при любом состоянии сети 
2. Удобном и быстром интерфейсе. 
3. Использованию технологий PWA: Service Worker, HTTPS, App Shell и Web App Manifest.

При этом PWA могут быть как одностраничными, так и многостраничными.

Разница между PWA и мобильным приложением 

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

статье о мобильных веб-приложениях

Сколько стоит разработка PWA приложений

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