PWA приложение. Возможности и недостатки этой технологии для проекта

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

Progressive web apps что это?

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

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

Отличие между PWA и нативным приложением

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

1. Загрузка приложения
   PWA это аналог вашего сайта, который можно скачать из интернета и установить себе на телефон как обычное приложение. Нативные приложения это те которые программируются под соответствующую платформу IOS или Android и скачиваются с маркетплейса.
2. Продвижение
   Из первого пункта вытекают следующий аргумент, что PWA-приложения не могут продвигаться через маркетплейсы(App Store или Play market). Вы никак не сможете добавить приложения на платформу и они не смогут двигаться через рейтинги, отзывы или количества скачиваний.
3. Доступ к программным компонентам

   Когда разрабатывается мобильное приложение? нужно прописать в техническом задании список тех элементов, которые вы планируете получать от пользователя (геолокация, доступ к камере). Когда мы говорим про нативный подход, то тут нет никаких ограничений — вы сможете получать все данные, которые нужно.

   В PWA присутствуют ограничения по компонентам, к которым вы сможете подключиться (NFC, Bluetooth, расширенному управлению камерой и т .д.). Эти ограничения могут привести к тому, что разработка вашего продукта будет невозможна при использовании PWA и лучше прибегнуть к нативному варианту.

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

Поскольку PWA (progressive web app) стоит рассматривать, как альтернативу мобильному приложению, то нужно понимать, что данное приложение станет отличной заменой нативному варианту для проектов, где нет сложной логики.

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

Неважно, какой у вас бизнес: клининговые услуги, ремонт техники — вы сможете постоянно находиться с пользователями на связи. Через push-уведомления можно сообщать про новые акции, или что клиент должен прийти в определенное время.

В формате 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 и нативными приложениями всё же есть. Особенно это справедливо для 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 (по центру);
• полноэкранный (справа);

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


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

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

1. Исследование. Тест гипотезы, исследование рынка, постановка бизнес-задач.
2. Технические требования. На этой стадии нужно определить, какой тип приложения строить: сайт, PWA, нативное мобильное приложение или разрабатывать продукты для нескольких платформ параллельно. Различия между разными видами приложений мы разобрали
   этой статье
3. Проектирование. Создание оптимальных для решения задач проекта архитектуры и интерфейса приложения.
4. Проработка стиля. Утверждение высокоточных макетов, создание логотипов, кнопок, баннеров и другой графики.
5. Программирование. Написание кода для фронтенда, сервис воркера и бэкенда.
6. Фронтенд пишут с помощью HTML, CSS и Javascript. Service-worker – это javascript файл. Поэтому его разрабатывают с помощью JavaScript фреймворков. Например, мы работаем на Vue.js. Бэкенд можно разрабатывать на любом языке. Мы специализируемся на Python.
7. Тестирование. На этой стадии QA-специалисты решают две ключевые задачи: проверяют, что пользователи получат качественный продукт и находят ошибки на этапе, когда цена их исправления относительно невелика.
8. Запуск. Миграция на постоянный хостинг, подключение домена и финальная настройка.

Выводы

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

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