Осенью прошлого года мы решили делать 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. Кейсов в глобальной практике уже достаточно много, чтобы хотя бы попытаться пристально рассмотреть, что это вообще такое, прежде чем пилить дорогое приложение.
Плюсы-минусы
Прежде чем защищать идею перед командой и советом директоров, я провел небольшой предварительный сравнительный анализ плюсов и минусов мобильного приложения и 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 получилось быстрее и проще. Мы задействовали наше API и привлекли людей из команды на парт-тайм. По сути основное, что нужно было сделать – глубокий редизайн сайта под PWA, продумать интуитивно понятный для пользователя интерфейс, который был бы так же органичен, как мобильное приложение. Нельзя сказать, что это было сложной задачей, но поменять масштаб вёрстки и обрезать углы было недостаточно. Формат нашей платформы предусматривает большое количество разного текстового контента, который должен быть читаемым.
Пришлось буквально брать каждую страницу, редизайнить и проверять ее на читабельность на разных телефонах. Процесс получился трудоемким. Так как задач было много, мы не держали их на тестовом стенде, а сразу выкладывали в продакшн. То есть, делали не одну глобальную задачу по редизайну всего сайта, а шли постепенно: сделали страницу, протестировали и выкатили. В итоге у нас было много итераций и возможность сразу исправлять ошибки и недочеты.
В июле мы запустили PWA в работу с реальными пользователями, всё работает. Хотя я бы удивился, если бы не работало — оглядываясь назад, я понимаю, что PWA максимально прост в разработке. Но разумеется ложка дегтя в этой бочке мёда есть. Даже несколько и с горкой.
Подводные камни
Ожидаемой задачей со звездочкой стала интеграция биометрии. У нас в PWA сейчас подключен вход по отпечатку пальца и идентификации лица. Почему возникли сложности: разработчики обычно знают, как сделать биометрию под Android или iOS, а вот опыта работы с вебом пока очень мало. Внедрение биометрии в веб в принципе технология новая, по которой пока нет доступных объемных гайдов, ее только начинают постепенно внедрять такие гиганты, как Google и Яндекс. Например, у Google в настройках можно включить биометрию для входа в почту в вебе.
Что мы хотели реализовать, но пока не смогли – установка PWA в один клик, когда пользователь видит кнопку “Установить приложение”, нажимает на нее и готово. Пока, к сожалению, эта функция сейчас доступна лишь частично на Android на определенных браузерах и полностью недоступна на iOS. Мы сделали для пользователей пошаговую инструкцию с картинками, как установить PWA с нашего сайта. Пока это существенный минус, так как с пользователями нужно провести дополнительную коммуникацию, объяснить, что такое PWA и как работает. Если бы у нас было больше разноплановых пользователей — было бы сложней, но как я уже говорил вначале, платформа работает в основном с b2b и b2e, мы можем себе позволить дополнительную точечную коммуникацию.
Вместо вывода
Познакомившись поближе с Progressive Web Apps, сейчас я уверен, что в ближайшие годы мы еще увидим повсеместный тренд по его использованию в разных сферах, уж очень весомые плюсы в сравнении с традиционными аппками. Да, нужно справиться еще с некоторыми нюансами, которые отличают PWA от мобильных приложений, но полагаю, что вскоре разница между ними с точки зрения пользователя окончательно сотрется.
Комментарии (53)
fransua
07.08.2024 15:11+4А вы рассматривали возможность упаковать PWA в нативное приложение и отправить в AppStore/GooglePlay?
mbystrov_23 Автор
07.08.2024 15:11Да, конечно, собственно, этим сейчас и занимаемся. Для GooglePlay есть проторенная дорожка, а вот с AppStore сложнее, прямого способа мы не нашли. Но в комментариях ниже кажется предложили способ, я с ним не сталкивался, будем проверять)
RaymanOne
07.08.2024 15:11Заходите в русскоязычное PWA сообщество - https://t.me/pwa_ru знаем все нюансы т.к. модераторы из GDE и Microsoft с большим стажем PWA. Также обратите внимание на https://www.pwabuilder.com/, как раз под ваш случай. Никакие Cordova не нужны.
m0xf
07.08.2024 15:11+5Ещё один минус pwa - тормоза на слабых устройствах. А если криво сделать, то тормозит и на мощных.
mbystrov_23 Автор
07.08.2024 15:11+5Соглашусь, но частично эту проблему решает Service Worker. А так pwa тормозит не больше ни меньше чем вкладки в браузере
ALapinskas
07.08.2024 15:11+4Если тормозит - это руки кривые. И нативно сделаете криво - будет тормозить.
QualityLab
07.08.2024 15:11+6PWA не очень дружит с iOS в плане пушей и ограниченного кеша. У вас не всплывали связанные с этим баги?
mbystrov_23 Автор
07.08.2024 15:11+1Да, пока что не очень дружит. Поскольку у нас ранее не было никакого приложения и мы жили только в вебе, то у нас и не было никаких пушей и тд. Так что пока не столкнулись. Мы сталкивались с тем, что для iOS пришлось делать некоторый велосипед, чтобы загрузочный экран отображался красиво как у обычных приложений. Но это не заняло много времени
Alex10
07.08.2024 15:11+2Если упаковать pwa в cordova/capasitor то минусы связаные со стором и плеймаркетом уйдут, так же можно спокойно использовать нативные функции типа deviceId если нужно.
mbystrov_23 Автор
07.08.2024 15:11+2Интересно, с таким способом не сталкивались, изучим обязательно, спасибо!
zoto_ff
07.08.2024 15:11посмотрите еще на tauri, недавно добавили поддержку мобильных устройств
Shado_vi
07.08.2024 15:11альфа версии tauri с android и ios уже в прошлом году были.(первые альфы с дек 2022)
сейчас уже "релиз кандидаты" версии, которые легко заставить запускать базовый шаблон в отличии от альф.
обещают в этом месяце закончить работы и уже выпустить релиз.
Релиз-кандидат Tauri 2.0
кроме rust(cargo) для работы можно использовать TypeScript/JavaScript(pnpm, yarn, npm, bun) или .NET.
т.е. с tauri легко можно в рамках 1 проекта собирать под 5 платформ(windows/linux/macos/ios/androud) и без знаний rust.
доступны нативные возможности через плагины в виде Notification, NFC, Barcode Scanner, Biometric, Haptics, Geolocation и др.
Octabun
07.08.2024 15:11Пишите честно - PWA дали нам шанс свалять по быстрому без необходимости чему-то существенному учиться. А обосновать, что через лёгкость что иначе, я и сам могу что угодно. Кстати, знаете сколько места занимает Procreate на iPad?
Я не верю что в описанной ситуации Вы могли с точностью до порядка оценить сколько времени писалось бы такое приложение на том же Flutter. Порог входа очень низкий, знаний и навыков у Вас никаких - тут всякое может быть, гремучая смесь.
Как пользователь, имею мнение однозначное - гнать PWA вон безжалостно, Интернету малейшую щёлочку дай - всё устройство загадит, учёные уже. Будьте прокляты вместе с Гуглом.
Но. PWA ставятся в обход обобщённой цензуры. И в складывающихся условиях это перевешивает всё.
mbystrov_23 Автор
07.08.2024 15:11+4Я правильно понимаю, что вам pwa не нравится, потому что с помощью него можно ставить приложения быстрее чем из магазинов и этим "загаживается" весь телефон?
Octabun
07.08.2024 15:11Конкретно PWA - прежде всего тем, что чтобы следить за ними нужна параллельная админка которой нет. Посмотрите прямо по статье как предполагается за пуши бороться - на моём устройстве PWA одна дорога... Альтернатива - жёсткие ограничения как у Эппл, но тогда PWA не только бесполезны, но и вредны - это тот же сайт, но с данными неизвестной свежести.
Amareis
07.08.2024 15:11+4Кстати, вебпуши в iOS наконец-то поддерживаются, начиная с 16.4 версии - а это был один из главных блокеров для нормальных PWA (ну не считая сложностей с установкой).
А чтотв итоге с биометрией? Сделали, какие апи использовали?
mbystrov_23 Автор
07.08.2024 15:11Скоро будем внедрять себе пуши, предметно проверим, насколько они работают на iOS:)
По поводу биометрии – использовали вот этот ресурс
Там очень подробные инструкции и примеры
supercat1337
07.08.2024 15:11А что там с пушами-то на iOS? Они должны были вроде как работать с 16-й версии
flancer
07.08.2024 15:11+1Я как-то писал статью про использование биомерии - https://habr.com/ru/articles/740000/ С iOS не помню особых проблем.
qeeveex
07.08.2024 15:11+5Ещё плюс PWA - realtime обновление. Не надо ждать когда пользователи обновят у себя приложения.
Люблю PWA как пользователь, и искренне рад за вас!
gun_dose
07.08.2024 15:11+1Познакомившись поближе с Progressive Web Apps, сейчас я уверен, что в ближайшие годы мы еще увидим повсеместный тренд по его использованию в разных сферах
Мне казалось, что пик популярности PWA прошёл где-то в 2018-2019
mbystrov_23 Автор
07.08.2024 15:11А мне кажется, что тогда много писали, но это были "инноваторы" и "первопроходцы" по инновационной модели. А ранее и тем более позднее большинство подтягивается вот сейчас и мы в их числе =)
isumix
07.08.2024 15:11Мне казалось, что пик популярности PWA прошёл где-то в 2018-2019
Вот чувствуется не понимание предметной области. Это как сказать про пик популярности ВЭБа. По мне как он рос, так и продолжает расти, и никуда уходить не собирается. В том числе благодаря ПРОГРЕССИВНОМУ добавлению новых фич. Кстати, ни одна другая область не развивается такими темпами как ВЭБ. Так что...
gun_dose
07.08.2024 15:11Всё у меня в порядке с предметной областью. Просто вы, видимо, мало с этим работали. С одной стороны, количество PWA растёт год от года, потому что любой сайт с манифестом автоматически становится PWA. А уж тем более с сервис-воркером. Но дело в том, что в 2019 многие клиенты реально просили добавить фичи, которые делаются с помощью PWA. А сейчас 99,99999999999% PWA являются таковыми лишь потому что при создании нового проекта манифест и сервис воркер создаются автоматически. Как минимум половина разработчиков не знают, что это за файлы и оставляют их потому что "наверное они для реакта нужны". В next.js вообще сервис воркер по умолчанию кэширует все картинки, и если на сайте очень много картинок, то сайт будет регулярно напоминать своим посетителям, что 128гб внутреннего хранилища для айфона маловато. Поэтому при аудите производительности сайтов на next всегда просят перепроверить сервис воркер. А потом выясняется, что он там вообще не нужен, и его просто удаляют.
Поэтому распространённость PWA действительно растёт, а вот осознанный спрос на эту технологию падает.
DeskundigeICT
07.08.2024 15:11Я вот слышал, что Гугл переводит Хромось на платформу Андроид, так как не хватает им текущего функционала для адекватнго осуществления функций ИИ. Так что будущее точно не за PWA.
isumix
07.08.2024 15:11+3JavaScript и устройства достаточно производительны в наше время.
Вэб платформа удобная, простая, гибкая, безопасная для разработки приложений.
Настоящая кросс-платформенность, один стэк для всех платформ и форм факторов.
Не надо отстёгивать 30% прибыли дяде Васе из корпорации и молиться чтобы он твое приложение не забанил в сторе.
Все костыли типа не разрешение установки по клику у яблака связаны с нежеланием купертиновцев терять баблишко от своего стора, хоть на словах они и за все хорошее. Но их все равно дожмут анти-монополисты))
Прогресс не остановить.
Сам на десктопе пользуюсь в основном вэб приложениями. Особенно нравится использовать VSCode как PWA запущенные локально в Docker для разных проектов для безопасности инструкция.
yeppiewhat
07.08.2024 15:11Зацепила фраза:
от мобильных приложений, но полагаю, что вскоре разница между ними с точки зрения пользователя окончательно сотрется
Сколько уже времени существует проект "Фугу", который пополняется проектами (нельзя сказать, что очень сложными и мудрёными), но сильно никуда сам Chromium не движется быстрыми темпами. Огромное количество ишьюсов, которые разбираются длительное время и мелкие фичи, которые добавляются в стандарт (та же возможность открыть пикер в input type="date").И это я говорил только про хромиум. А ещё у нас есть такие огромные мастадонты, как WebKit и Gecko.
Скоро - это точно не про ближайшие 5 лет развития. Хотя хотелось бы скорее увидеть этот прекрасный мир PWA...
zoto_ff
07.08.2024 15:11+3PWA сейчас и правда достаточно развиты, чтобы большинство приложений делать на них – это проще и удобнее. При должном старании дизайнеров и разработчиков они ощущаются точно так же, как нативные.
Есть, кстати, PWA, в котором собирают актуальные возможности PWA: whatpwacando.today
Megas
07.08.2024 15:11+2Буквально на днях закончил переписывать свое старое приложение на PWA (было написано года 4 тому назад на React Native), так как пришел к мнению, что современных API в браузере достаточно для необходимого функционала. Но обнаружил несколько неприятных мелочей:
Когда с сервера отправляешь пуш сообщения (без нотификации, только дата), а приложение в данный момент не активно, то Хром на телефоне отображает нотификацию "This site has been updated in the background", а пуш сообщения могут приходить часто. После долгого поиска я так и не понял как это исправить (кроме как встроить систему в приложение, которое будет сообщать серверу когда приложение активно).
-
Нет API которое поможет приложению понять, что у телефона нет доступа к интернету. Есть Network Information API, но там только информация о качестве мобильного соединения, а не о его отсутствии.
P.S. Оказывается можно так:window.addEventListener('offline', handleOffline); window.addEventListener('online', handleOnline);
kukovik
07.08.2024 15:11А при старте приложения через эти события начальное состояние можно узнать? Или только при изменении во время работы приложения?
LaoAx
07.08.2024 15:11Имхо, если в вашем приложении нет никаких офлайн фич, то делать нативное приложение смысла нет.
Я бы с удовольствием снёс некотрые)
isumix
07.08.2024 15:11Имхо, если в вашем приложении нет никаких офлайн фич, то делать нативное приложение смысла нет.
Как так нет?
Вот вам накину немножечко:
Запустить приложения как нативное, без контроллов браузера которые отжирают пространство, например VSCode
Добавить ярлыки приложений в трей и делать быстый поиск по ним, с иконками и прочими ништяками.
Переключаться нативным способом между приложениями, а не по табам броузера.
Каждое приложение имеет свой запомненный язык ввода, а не один для всех табов.
Все свои основные Вэб приложения я уже давно установил как приложения в операционной системе. Вообще любые сайты устанавливаются как PWA в Chromium, даже те что не поддерживают это.
isumix
07.08.2024 15:11Для всех скептиков PWA у меня есть одна картинка с одним малюсеньким PWA которое как бы намекает на возможности этой технологий ))
isumix
07.08.2024 15:11Вместо установки проприетарных приложений, которые могут шпионить за вами или что-то не хорошее делать с вашими данными или железом, установите лучше их PWA версию. Она безопасней, легковесней и обновляется сама.
Revertis
Как всегда, никто не думал об удобстве пользователей?
YMA
А в чем неудобство? У пары банков после выкидывания из AppStore перешел на PWA. Ничуть не хуже, ни по функционалу, ни по удобству. И лишних шаловливых лапок в моем телефоне нет.
PS: Вот это вообще хорошо, кстати. :)
Revertis
В тормозах, например. Вы не видите тормозов у веб технологий?
Dolios
Так не надо, например, в банковское приложение запихивать гороскопы, сторизы, антивирус, анальный зонд и рендеринг 3Д моделей, оно и тормозить не будет. Я не вижу тормозов у веб технологий, я вижу тормоза, когда технологии используются не по назначению.
qeeveex
Большинство приложений сейчас, это по сути веб приложения со своим браузером.
zoto_ff
у тинька PWA ощущается не как приложение, а как мобильная версия сайта. плохо подошли к UI/UX, кешированию и, видимо, сделали MPA вместо SPA с апи
mbystrov_23 Автор
Почему же, думали. У пользователей не было никакого приложения, а теперь есть pwa версия =)
Revertis
Тормозная, небось.
mbystrov_23 Автор
Смотря с чем сравнивать. По сравнению с хорошим приложением да, медленнее конечно. А по сравнения с сайтом ровно тоже самое.
Ну и у нас все-таки не игра и небольшой лаг по времени для нас не является критичной проблемой
dworkz
Тормозящий PWA, как правило, это проблема НЕ технологии, а ТЕХНОЛОГОВ.
Просто (секрет-секрет), за использованием ресурсов надо следить.
Применять виртуальные списки, оптимизировать анимацию. И так далее.
И на выходе получать супер быстрые приложения.
Но нет, проще обвинять платформу. Чойта я рендерю список из 10000 элементов, а оно тормозит?
Dir15
Для меня, например, Хабр в таком формате оказался удобнее классического приложения.