The post has been translated automatically. Original language: Russian Russian
A little bit about us
We are a Troubleshooting Technology company, which has been engaged in the design and development of IT solutions for business, education and government agencies for more than 6 years. During this time, we have implemented dozens of projects, from mobile applications and web services to integration platforms and analytics and automation systems.
What are we going to talk about
In the continuation of the last post, let's look at what approaches there are when developing a mobile application.
How does application development begin?
If you decide to create a mobile application, it is important to understand the amount of work that needs to be done. Before starting programming, preparation, analysis, design, and only then implementation are carried out.:
- Requirements formation: what does the app do, what functions are needed, and who will use it.
- Creating user scripts (user flow): how the user will move through the interface.
- UI/UX design: rendering of the interface, buttons, screens, interaction logic.
- Architecture and backend: the server side, if you need to store data, process requests, and work with the database.
These jobs do not depend on the chosen technology, they will be in any case. And then there are already:
- Development of the frontend (mobile part): The technology is already being selected here (more on them later).
- Testing and publishing: verification, debugging, and posting on the App Store and Google Play.
- Support and updates: bug fixes, feedback updates, new features.
These jobs do not depend on the chosen technology. They will be available anyway, they just may differ in time and cost.
What approaches are used in the development of mobile applications?
When it comes to mobile apps, there are three main approaches:
- PWA is a progressive web application that works through a browser, but "as an application"
- Cross-platform - One app for iOS and Android based on common code (Flutter, React Native, etc.)
- Native development - separate development for iOS and Android in native languages (Swift, Kotlin)
In this post, we will analyze the approach with PWA in detail.
PWA
From a technical point of view, this is a website that can work as an application. It can be published on the Play Market and App Store platforms, installed from there, has its own icon on the desktop, has offline access, visually looks like an application, not a page in a browser.
Examples of this approach from large companies: Twitter Lite, Starbucks PWA, Uber Web.
Until 2019, the installation process of such an "application" was difficult for the user, since it could only be installed on the first visit to the site through a browser. After the first visit, the user could install it on his device by clicking "Add to home screen" (this is actively offered in Android, slightly less noticeable in iOS).
After installation, PWA behaves like a real application: it starts by clicking on the icon, runs in a separate window, and can work without the Internet.
You no longer need to open a browser to use the functionality, the user does not feel much difference. But technically, the browser engine is still used inside.
In 2019, Google is introducing Trusted Web Activity (TWA), a way to publish PWAs on Google Play. 2021-2022 Capacitor.js and PWABuilder are beginning to be actively used as a PWA packaging tool for Android/iOS. 2023-2024 Apple partially removes restrictions for PWA on iOS 16.4+: push notifications allow, offline is improved, desktop installation.
Usually, the implementation via PWA is chosen:
- To launch an MVP, to test the idea, because it is cheaper to develop and the website also turns out to be a plus.
- Suitable for a limited budget.
- There is no need to access complex smartphone functions.
- There is already a website that can be adapted and "packaged" into a mobile application.
What is available from the permissions:
- Push notifications work stably on Android (and partially on iOS starting in 2023).
- Face ID, Touch ID, and PIN are available via WebAuthn.
- Camera, microphone, geolocation, gyroscope, accelerometer.
- Working with files, copying, drag-and-drop — within the framework of the File System Access API.
- Working with BLE, WebUSB, Web Serial — works on Android (not on iOS).
- Offline access and caching are provided through service workers.
Of the advantages, we definitely single out one codebase - the web.
However, PWA is not suitable if:
- The application must run in the background (for example, when the screen is closed or the application is minimized).
- You need access to BLE and NFC on iOS. It works on Android, but not on iOS. Apple still blocks Web Bluetooth
- Heavy graphics, 3D animations, AR, rendering and all tasks where performance is important are used.
- We need deeper access to the device (contacts, SMS, calls, notifications, access to applications and statistics, system events)
Otherwise, there are no technical limitations to this approach. You can raise an online store, a super app, and a corporate system. Here you already need to build on the necessary functionality, technical limitations, rules and requirements of the platforms.
Is there a difference between the cross-platform and native approach
Of course, speaking in the language of users, the sensations are not the same.
1. The user experience is perceived worse
Developers and Reddit users note that even after testing the PWA, they feel it slower, less responsive, and less "native" — especially in terms of scrolling, transitions, and screen stability (for example, returning to the feed position) (you can read it here)
This affects the perception of the application and leads to more frequent failures — even if everything is OK in terms of functionality.
2. Performance tests show that native or cross-platform applications show better performance results than PWAs, because they interact better and more efficiently with device resources.
And what about the cost
In development, this option will be cheaper, because you will not have to involve developers of the mobile application. Otherwise, it strongly depends on the design and functionality. According to the average price tags, the cost of developing a PWA is 2-3 times cheaper than developing a native application.
In terms of development time, PWA comes out faster than cross-platform solutions, and much faster than native ones, due to a single code base, which simplifies further support.
Result
If the goal is faster, cheaper, there are no special requirements for the interface part and the functionality allows, then PWA is the right choice. And there you can always switch to cross-platform or native as needed.
Немного о нас
Мы — компания 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 подходящий выбор. А там всегда можно перейти на кроссплатформ или натив по мере необходимости.
Share
