Progressive Web Apps

ДНЕПР, УКРАИНА

Нью-Йорк, США

WhatsApp, Telegram, Skype

Что только ни делают современные компании, чтобы угодить пользователю, уже изрядно избалованному широчайшим ассортиментом всего нужного и ненужного, возможностью купить любой товар в любое время в любом месте и оплатить его любым способом. Но пришло время идти дальше, поскольку никого уже не удивишь наличием сайта и приложения. Это уже must-have для компаний, работающих в сегменте e-commerce, где поддержание постоянной связи с пользователем становится одним из залогов успеха. Чтобы максимально облегчить это взаимодействие и свести к минимуму все факторы, мешающие компаниям оставаться на связи со своими клиентами 24/7, была разработана концепция прогрессивных веб-приложений (progressive web apps). Давайте разберемся, в чем суть этой технологии и как ее очевидные преимущества могут стать такими же очевидными выгодами для бизнеса.



Progressive web apps: что это?

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

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

Таким образом, отвечая на вопрос что это - progressive web apps, можно сказать, что это новая технология взаимодействия с целевой аудиторией, которая требует минимальных усилий от пользователя. Согласно статистическим данным большинство пользователей смартфонов не загружают ни одного приложения в течение месяца, а progressive web apps могут быть установлены мгновенно, поддерживают автоматическое обновление, работа с сайтом возможна в режиме офлайн, а возможность получать push-уведомления делает работу с таким решением еще более удобной.

Пример PWA: от теории к практике

Теория, безусловно, важна, но, как правило, любому потенциальному заказчику важно сначала “потрогать” каждое решение и понять принцип его действия изнутри.
Приведем наиболее успешные примеры PWA приложений. Вы наверняка слышали о них всех, а сайтами половины из них пользовались как минимум несколько раз. Итак, вот компании, которые уже внедрили progressive web app PWA в свои бизнес-процессы.

Немного статистики о PWA

Технологии, нашедшие применение в PWA

Ключевыми показателями, которые должны быть реализованы в progressive web apps, являются надежность, быстрота и привлекательность. Давайте посмотрим, как разработчики наделяют прогрессивные решения этими качествами.

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

HTTPS. Все ресурсы сайта передаются по этому протоколу, что означает надежность передачи данных.

Application Shell. Это виртуальная оболочка приложения, которая загружается при его запуске, а далее динамическая информация загружается на нее из сети.

Web App manifest. Это JSON файл, который задает параметры приложения, его внешний вид и т.д. Это то, как реализуется показатель привлекательности.

Push Notifications. Эта технология нашла свое применение и отдельно от PWA. Сейчас все больше сайтов предлагают пользователю разрешить получение уведомлений и прогрессивные приложения поддерживают эту идею.

Progressive web apps: очевидные выгоды для бизнеса

Очевидные преимущества в процессе разработки progressive web apps

Выше мы привели ряд успешных примеров, но все-таки отметим, что progressive web apps относительно новая технология ( и в этом тоже ее преимущество). Пока что большинство приложений все равно будут разрабатываться для App Store и Play Market.

Подход Woxapp: максимально прогрессивные решения

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


1. На старте разработки проекта мы прорабатываем Data flow системы и определяем, какие данные и на какой срок кэшировать. Это нужно не только для стабильной работы, но и для экономии трафика пользователя. Нужно понимать также, что кэширование или получение слишком больших объемов данных сразу может приводить к падению вкладки в браузере, так как в каждой ОС объем выделяемой под вкладку памяти ограничен.


2. На этапе отладки приложения главная трудность состоит в том, что операционные системы iOS и Android накладывают свои ограничения и по-разному интерпретируют объекты.
Но поскольку мы заранее “знаем в лицо” проблемы, с которыми нам предстоит столкнуться в процессе разработки, то разрабатываем каждый элемент с их учетом, что в дальнейшем позволяет нам сократить время и ресурсы на решение этих проблем.

В процессе разработки нами используются следующие технологии:


К вопросу о стоимости


Пользовательский интерфейс приложения может быть индивидуальным, однако, разрабатывая front-end часть, нужно максимально приблизиться к интерфейсу, принятому на мобильных устройствах. На практике это означает, что верстка должна быть создана практически с нуля, как правило основываясь на material дизайне.

Поэтому стоимость проекта будет определяться исходя из:

Итоги

На данный момент в сегменте электронной коммерции соотношение progressive web apps составляет 40 из 100 приложений. Значит, есть довольно перспективная возможность привлечь максимум целевой аудитории и сделать ее взаимодействие с вашей компанией максимально эффективным. Сейчас мы наблюдаем только начало внедрения этих технологий в бизнес, но их преимущества уже очевидны. Поэтому те, кто инвестируют в них сегодня, останутся на одной волне со своими клиентами и завтра, и послезавтра.


Команда Woxapp желает вам только смелых и инновационных решений, которые мы готовы обсудить и начать создавать для вас уже сегодня!







Этапы разработки:
  1. Идея продукта и бизнес-экспертиза
  2. Люди приходят к нам в компанию, чтобы воплотить в жизнь свою идею мобильного приложения, веб-ресурса или автоматизировать бизнес-процессы. Мы проводим бесплатную бизнес-экспертизу, консультируем клиента и дорабатываем идейную составляющую проекта, учитывая потребности пользователей.

  3. Оценка проекта и предложение
  4. Оценку проекта производит команда разработчиков. После чего клиент получает предварительное коммерческое предложение на разработку приложения.

  5. Создание прототипа
  6. Понимая, чего ждут от приложения пользователи, мы приступаем к процессу прототипирования. Грамотно выстроенный интерфейс – залог того, что пользователь быстро сориентируется, как приложение поможет решить его проблему. Вы получаете возможность посмотреть функционал будущего приложения без программной части.

  7. Дизайн продукта
  8. Рисуем дизайн всех экранов и состояний элементов. Используем рекомендации Google и Apple к дизайну приложения. Мы заботимся о том, чтобы графические решения были понятными и удобными. Вы получаете дизайн, который выделит вас среди конкурентов.

  9. Бэклог и договор на разработку
  10. Встреча с продукт-оунером, обсуждение деталей проекта. Команда разрабатывает бэклог на весь проект совместно с заказчиком. После утверждения бэклога, с заказчиком подписывается договор.

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

    проект не завершен

    проект завершен

  13. Ретроспектива
  14. Демонстрация заказчику результатов за 2 недели. Команда анализирует риски и проблемы, завершает спринт, оптимизирует дальнейший процесс разработки приложения.

  15. Сопровождение и достижение результата
  16. Отличие нашей работы в том, что мы не только разрабатываем приложения, но и берем их на продвижение. Наши клиенты получают компанию, которая ответственна за все этапы работы: от первой кнопки до скачивания приложения и благодарственных отзывов пользователей.

Расчет проекта

Что будем делать? Каждая мелочь и мысль может помочь нам составить необходимое представление о проекте