PWA вместо приложения: плюсы, минусы, подводные камни
Осенью прошлого года мы решили делать PWA для платформы: в нашем случае это оказалось существенно дешевле, проще и практичней. Решил поделиться, почему выбрали PWA, какие преимущества и недостатки нашел при сравнении технологий, что успели сделать с командой за полгода, и какие проблемы сейчас есть у технологии.
Как мы узнали, что PWA это не клей
Шутка конечно. Уже пару лет технология Progressive Web Apps находится на слуху у программистов, впрочем в реальности пока мало кто с ней работал, тем более в русскоязычном ИТ-секторе.
Но если вдруг вы не в курсе: Progressive Web Apps (PWA) — это технология создания прогрессивного веб-приложения, по сути адаптация сайта под мобильное устройство, которая выглядит и работает как приложение. Пользователь в целом может даже не знать, PWA это или обычное приложение — запускается PWA через иконку, просто иконка активирует не установленное приложение, а браузер. Внутри браузера уже открывается сайт, где не видна адресная строка, поэтому возникает ощущение использования классического мобильного приложения.
Технология PWA была представлена Google еще в 2015 году. И в последние годы быстро развивалась, в том числе для iOS. Ещё шесть лет назад в iOS нельзя было ничего сделать с помощью PWA из-за ограничений Apple, но сейчас появляется все больше инструментов для работы.
ТЗ
Расскажу немного, какую задачу мы решали. Наш основной продукт — SaaS-платформа TYMY, технологический инструмент для крупного и среднего бизнеса, который обеспечивает прямые коммуникации между компаниями, банками и пользователями, быстрый обмен документами, электронное подписание и другие подобные задачи. В первую очередь на начальном этапе развития мы были ориентированы на b2b и b2e (business to enterprise). Главной задачей было выстраивание цепочек коммуникаций и бизнес девелопмент, особой необходимости в мобильном приложении не было — пользователи решали всё в личном кабинете в основном с десктопа, или с мобильной версии. Время от времени мы начинали обсуждать приложение, но всерьез взялись за эту задачу после запроса одного из наших ключевых партнеров — теперь точно откладывать было некуда.
Пул задач для мобильного приложения у нас достаточно простой. Мы не задействуем видеокамеру и голосовые команды, нет фич, которые не могут быть доступны на сайте. По сути, нам логично было адаптировать имеющийся сайт, точней онлайн-платформу, для корректной и комфортной работы с мобильного телефона. Именно в этот момент мы с командой и подумали —, а почему бы не PWA? Идея показалась весьма подходящей для нашего кейса.
Тревоги конечно было много. Технология относительно новая, о ней мало кто знает, в том числе среди разработчиков и руководителей проектов. Собственно, думаю, это основная причина, по которой технологию редко берут в проекты для крупных компаний — от PWA чаще всего отказываются в пользу мобильного приложения, просто потому что не знают, что это, и как оно работает. Хотя сегодня PWA используют, например, Twitter Lite, Pinterest и Spotify. Кейсов в глобальной практике уже достаточно много, чтобы хотя бы попытаться пристально рассмотреть, что это вообще такое, прежде чем пилить дорогое приложение.
Главная страница веб-версии TYMY
Плюсы-минусы
Прежде чем защищать идею перед командой и советом директоров, я провел небольшой предварительный сравнительный анализ плюсов и минусов мобильного приложения и PWA. Получился существенный перевес в сторону последнего, но ещё раз подчеркну, что речь именно про наш кейс, наверное для других бизнесов плюсы и минусы могут быть совсем другими.
Мобильное приложение:
Плюсы | Минусы |
Интеграция с устройством: есть доступ ко всем возможностям современных смартфонов (Bluetooth, Face ID и пр). | Стоимость: предварительная смета на PWA по нашему ТЗ составила 3,3 млн рублей, а на мобильное приложение — 7,7 млн рублей. |
Доверие пользователей: технология не новая, пользователи могут не переживать за безопасность при скачивании не из Google Play или App Store. | Дополнительные ресурсы и время: работа команды, поиск разработчиков под Android и iOS, новая настройка действующего API. |
Риск санкций: возможны сложности при регистрации приложения в App Store. | |
Сложнее поддерживать и дорабатывать |
PWA:
Плюсы | Минусы |
Скорость: по расчетам, PWA мы могли сделать вдвое быстрей. | Функционал: возможности мобильного приложения существенно шире и могут ограничивать развитие в будущем. |
Стоимость: опять же, 3,3 млн рублей против 7,7 млн — это минус приложения и жирный плюс PWA. | Ограниченная совместимость с устройством: нет доступа к календарю, контактам, управлению голосом. |
Мгновенный апдейт: новые функции появляются в PWA в тот же момент, что и на сайте. | Лояльность пользователей: мало кто пока знает, что такое PWA, некоторые пользователи могут опасаться скачивать что-то не из официальных сторов. |
Вариативность: PWA можно установить на телефон, планшет, MacBook и пр., не нужна отдельная разработка под каждую систему | |
Легкость: весит существенно меньше приложения. Разница в 10–20 раз — PWA занимает в телефоне 1–1,5 мб. | |
Безопасность: PWA работает через браузер, который сам по себе отвечает за безопасное соединение. |
Время и человекоресурсы
На работу у нас ушло полгода. Справились силами действующего отдела разработки, без дополнительного найма и отдельной команды, которая бы занималась только этим проектом. Думаю, что если бы команду выделили, то работу над PWA мы бы завершили вдвое или даже втрое быстрей — за два-три месяца. Но скорость и объем нагрузки по другим задачам мы не снижали, просто распределили работу с PWA во времени.
На проекте работали продакт-менеджер, штатные Backend и Frontend-инженеры, QA-инженер, лид-дизайнер и UX/UI-дизайнер. Если бы мы решили делать мобильное приложение, нам нужно было бы нанимать отдельно разработчика под Android и отдельно под iOs. Однако в нашем случае это было даже не основной проблемой. А основная заключалась в том, что под приложение нам нужно было заново выстраивать API. Так исторически сложилось, что мы строили ИТ-инфраструктуру платформы без независимого API. Фронтенд у нас сильно связан с бэкендом, что в свое время позволило команде разработки выполнять много задач в сжатые сроки. А вот с приложением это уже не сработало бы, для него нам нужно было построить новое API, чтобы грамотно работать и с вебом, и с мобильными приложениями. Только на эту задачу у нас ушло бы два месяца, это при условии, что мы полностью займем этим двух-трех человек.
Главная страница PWA TYMY
С PWA получилось быстрее и проще. Мы задействовали наше API и привлекли людей из команды на парт-тайм. По сути основное, что нужно было сделать — глубокий редизайн сайта под PWA, продумать интуитивно понятный для пользователя интерфейс, который был бы так же органичен, как мобильное приложение. Нельзя сказать, что это было сложной задачей, но поменять масштаб вёрстки и обрезать углы было недостаточно. Формат нашей платформы предусматривает большое количество разного текстового контента, который должен быть читаемым.
Пришлось буквально брать каждую страницу, редизайнить и проверять ее на читабельность на разных телефонах. Процесс получился трудоемким. Так как задач было много, мы не держали их на тестовом стенде, а сразу выкладывали в продакшн. То есть, делали не одну глобальную задачу по редизайну всего сайта, а шли постепенно: сделали страницу, протестировали и выкатили. В итоге у нас было много итераций и возможность сразу исправлять ошибки и недочеты.
В июле мы запустили PWA в работу с реальными пользователями, всё работает. Хотя я бы удивился, если бы не работало — оглядываясь назад, я понимаю, что PWA максимально прост в разработке. Но разумеется ложка дегтя в этой бочке мёда есть. Даже несколько и с горкой.
Подводные камни
Ожидаемой задачей со звездочкой стала интеграция биометрии. У нас в PWA сейчас подключен вход по отпечатку пальца и идентификации лица. Почему возникли сложности: разработчики обычно знают, как сделать биометрию под Android или iOS, а вот опыта работы с вебом пока очень мало. Внедрение биометрии в веб в принципе технология новая, по которой пока нет доступных объемных гайдов, ее только начинают постепенно внедрять такие гиганты, как Google и Яндекс. Например, у Google в настройках можно включить биометрию для входа в почту в вебе.
Что мы хотели реализовать, но пока не смогли — установка PWA в один клик, когда пользователь видит кнопку «Установить приложение», нажимает на нее и готово. Пока, к сожалению, эта функция сейчас доступна лишь частично на Android на определенных браузерах и полностью недоступна на iOS. Мы сделали для пользователей пошаговую инструкцию с картинками, как установить PWA с нашего сайта. Пока это существенный минус, так как с пользователями нужно провести дополнительную коммуникацию, объяснить, что такое PWA и как работает. Если бы у нас было больше разноплановых пользователей — было бы сложней, но как я уже говорил вначале, платформа работает в основном с b2b и b2e, мы можем себе позволить дополнительную точечную коммуникацию.
Вместо вывода
Познакомившись поближе с Progressive Web Apps, сейчас я уверен, что в ближайшие годы мы еще увидим повсеместный тренд по его использованию в разных сферах, уж очень весомые плюсы в сравнении с традиционными аппками. Да, нужно справиться еще с некоторыми нюансами, которые отличают PWA от мобильных приложений, но полагаю, что вскоре разница между ними с точки зрения пользователя окончательно сотрется.
