Бұл жазба автоматты түрде орыс тілінен аударылған. Russian
Біз туралы аздап
Біз 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 PWA — ны Google Play-ге жариялау тәсілі болып табылатын сенімді веб-белсенділікті (TWA) енгізеді. 2021–2022 Capacitor.js және PWABuilder Android/iOS жүйесінде PWA орау құралы ретінде белсенді қолданыла бастады. 2023-2024 Apple iOS 16.4+ жүйесінде PWA шектеулерін ішінара алып тастайды: 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 жұмыс істемейді, егер:
- Қолданба фондық режимде жұмыс істеуі керек (мысалы, экран жабық немесе кішірейтілген қолданба).
- IOS жүйесінде BLE және NFC қол жетімділігі қажет. Android-де жұмыс істейді, iOS-та жұмыс істемейді. Apple әлі де Web Bluetooth -ирует блоктайды
- Ауыр графика, 3D анимация, AR, көрсету және өнімділік маңызды барлық тапсырмалар қолданылады
- Құрылғыға тереңірек қол жеткізу қажет (контактілер, SMS, қоңыраулар, хабарландырулар, қолданбалар мен статистикаға, жүйелік оқиғаларға қол жеткізу)
Әйтпесе, бұл тәсілде техникалық шектеулер жоқ. Сіз интернет-дүкенді, супер-қосымшаны және корпоративтік жүйені көтере аласыз. Мұнда сіз қажетті функционалдылыққа, техникалық шектеулерге, платформалардың ережелері мен талаптарына сүйенуіңіз керек.
Кросс-платформалар мен жергілікті тәсілден айырмашылық бар ма
Әрине, пайдаланушылардың тілімен айтқанда, сезім бірдей емес.
1. Пайдаланушы тәжірибесі нашар қабылданады
Reddit әзірлеушілері мен пайдаланушылары атап өтеді: тіпті PWA-ны тексергеннен кейін де, олар оны баяу, аз жауап береді және "туған" сезінеді — әсіресе экран күйінің айналуы, ауысуы және тұрақтылығы (мысалы, feed позициясына оралу) (сілтеме бойынша оқуға болады)
Бұл қолданба ретінде қабылдауға әсер етеді және функционалдығы жақсы болса да, жиі істен шығуға әкеледі.
2. Өнімділік сынақтары жергілікті немесе кросс-платформалық қолданбалар PWA-ға қарағанда жақсы өнімділік нәтижелерін көрсететінін көрсетеді, өйткені құрылғы ресурстарымен жақсырақ және тиімдірек өзара әрекеттеседі
Ал құны бойынша не
Әзірлеуде бұл опция арзанырақ болады, өйткені мобильді қосымшаны жасаушыларды тартудың қажеті жоқ. Қалғаны дизайн мен функционалдылыққа байланысты. Орташа баға белгілері бойынша PWA әзірлеу құны жергілікті қосымшаны әзірлеуге қарағанда 2-3 есе арзан.
Әзірлеу мерзімдері бойынша PWA кросс-платформалық шешімдерге қарағанда жылдамырақ және біртұтас кодтық базаның арқасында жергілікті шешімдерге қарағанда әлдеқайда жылдам, бұл одан әрі қолдауды жеңілдетеді.
Қорытынды
Егер мақсат тезірек, арзан болса, интерфейстің нақты талаптары болмаса және функционалдылық мүмкіндік берсе, онда PWA қолайлы таңдау болып табылады. Онда сіз әрқашан кросс-платформаларға немесе қажет болған жағдайда native-ге ауыса аласыз.
Немного о нас
Мы — компания 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
