Разработка мобильного приложения на PWA
Немного о нас
Мы — компания Troubleshooting Technology, уже более 6 лет занимаемся проектированием и разработкой IT-решений для бизнеса, образования и государственных структур. За это время реализовали десятки проектов: от мобильных приложений и web-сервисов до интеграционных платформ и систем аналитики и автоматизации.
О чем поговорим
В продолжении прошлого поста разберем какие подходы есть при разработке мобильного приложения.
С чего начинается разработка приложения
Если вы решили создать мобильное приложение, важно понимать какой объем работ предстоит. Прежде чем приступить к программированию, проводится подготовка, анализ, проектирование и только потом — реализация:
- Формирование требований: что делает приложение, какие функции нужны, кто его будет использовать.
- Создание пользовательских сценариев (user flow): как пользователь будет двигаться по интерфейсу.
- UI/UX-дизайн: отрисовка интерфейса, кнопок, экранов, логики взаимодействия.
- Архитектура и бэкенд: серверная часть, если нужно хранить данные, обрабатывать запросы, работать с базой.
Эти работы — не зависят от выбранной технологии, они будут в любом случае. И далее уже идут:
- Разработка фронтенда (мобильной части): здесь уже выбирается технология (о них дальше).
- Тестирование и публикация: проверка, отладка, размещение в App Store и Google Play.
- Поддержка и обновления: исправление багов, обновление по отзывам, новые функции.
Эти работы — не зависят от выбранной технологии. Они будут в любом случае, просто могут отличаться по времени и стоимости.
Какие подходы бывают при разработке мобильных приложений
Когда речь идет о мобильных приложениях, есть три основных подхода:
- PWA - прогрессивное веб-приложение, которое работает через браузер, но «как приложение»
- Кроссплатформа - Одно приложение для iOS и Android на общем коде (Flutter, React Native и пр.)
- Нативная разработка - отдельная разработка под iOS и Android на родных языках (Swift, Kotlin)
В этом посте детально разберем подход с PWA.
PWA
С технической точки зрения, это веб-сайт, который может работат как приложение. Его можно опубликовать на платформах Play Market и App Store, устанавливать оттуда, имеет свою иконку на рабочем столе, имеет оффлайн доступ, визуально выглядит как приложение, а не страница в браузере.
Примеры применения такого подхода у крупных компаний: Twitter Lite, Starbucks PWA, Uber Web.
До 2019 года процесс установки такого "приложения" был трудным для пользователя, т.к. установить его можно было только при первом посещении сайта через браузер. После первого посещения пользователь мог установить его себе на устройство — нажав «Добавить на главный экран» (в Android это активно предлагается, в iOS чуть менее заметно).
После установки PWA ведёт себя как настоящее приложение: запускается по иконке, работает в отдельном окне, может работать без интернета.
Больше не нужно открывать браузер, чтобы пользоваться функционалом, пользователь особой разницы не ощущает. Но технически — внутри всё равно используется движок браузера.
В 2019 Google внедряет Trusted Web Activity (TWA) — способ публиковать PWA в Google Play. 2021–2022 Capacitor.js и PWABuilder начинают активно использоваться как инструмент упаковки PWA под Android/iOS. 2023–2024 Apple частично снимает ограничения для PWA на iOS 16.4+: позволяют push-уведомления, улучшен офлайн, установка на рабочий стол.
Обычно реализацию через PWA выбирают:
- Для запуска MVP, чтобы проверить идею, т.к. в разработке дешевле и плюсом получается еще и сайт.
- Подходит для ограниченного бюджета.
- Нет необходимости в доступе к сложным функциям смартфона.
- Уже есть сайт, который можно адаптировать, «упаковать» в мобильное приложение.
Что доступно из разрешений:
- Push-уведомления работают стабильно на Android (и с 2023 года частично — на iOS).
- Face ID, Touch ID, PIN — доступны через WebAuthn.
- Камера, микрофон, геолокация, гироскоп, акселерометр.
- Работа с файлами, копирование, drag-and-drop — в рамках File System Access API.
- Работа с BLE, WebUSB, Web Serial — работает на Android (не на iOS).
- Оффлайн-доступ и кэширование — через сервис-воркеры.
Из преимуществ однозначно выделяем одну кодовую базу - веб.
Однако, PWA не подойдет, если:
- Нужно чтобы приложение работало в фоновом режиме (например, при закрытом экране или свернутом приложении).
- Нужен доступ к BLE и NFC на iOS. На Android работает, на iOS — нет. Apple по-прежнему блокирует Web Bluetooth
- Используется тяжёлая графика, 3D анимации, AR, рендеринга и всех задач, где важна производительность
- Нужен более глубокий доступ к устройству (контакты, смс, звонки, уведомления, доступ к приложениям и статистике, системным событиям)
В остальном технических ограничений у данного подхода нет. Можно и интернет магазин поднять, и супер-апп, и корпоративную систему. Тут уже нужно отталкиваться от нужного функционала, технических ограничений, правил и требований платформ.
Есть ли разница с кроссплатформ и нативным подходом
Само собой, говоря языком пользователей, ощущения не те.
1. Пользовательский опыт воспринимается хуже
Разработчики и пользователи Reddit отмечают: даже протестировав PWA, они ощущают его медленнее, менее отзывчивым и менее «родным» — особенно по скроллу, переходам и устойчивости состояния экрана (например, возвращение к позиции feed) (можно почитать - по ссылке)
Это влияет на восприятие как приложения и приводит к более частым отказам — даже если по функционалу все окей.
2. Тесты производительности показывают, что приложения на нативе или кроссплатформенные показывают лучшие результаты производительности, чем PWA, т.к. лучше и эффективнее взаимодействуют с ресурсами устройства
А что по стоимости
В разработке такой вариант выйдет дешевле, т.к. не придется привлекать разработчиков мобильного приложения. В остальном сильно зависит от дизайна и функционала. По средним ценникам, стоимость разработки PWA в 2-3 раза дешевле разработки нативного приложения.
По срокам разработки PWA выходит быстрее, чем кроссплатформенные решения, и гораздо быстрее нативных, за счет единой кодовой базы, что упрощает и дальнейшую поддержку.
Итог
Если цель быстрее, дешевле, нет особых требований к интерфейсной части и функционал позволяет, то PWA подходящий выбор. А там всегда можно перейти на кроссплатформ или натив по мере необходимости.
Comments 1
Login to leave a comment
Kanat Murzabekov · July 26, 2025 13:30
Хороший подход