Автоматты аударма пайдаланылды

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 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-ге ауыса аласыз.

Пікірлер 1

Кіру пікір қалдыру үшін

Хороший подход

Жауап беру