Гар утсанд ээлтэй веб апп хэрхэн бүтээх

Гар утсанд ээлтэй веб апп гэдэг нь утсан дээр апп шиг ажилладаг вебсайт юм: нарийн дэлгэцэнд тохирч, том хүрэх талбартай, гар утасны дата дээр хурдан ачаалж, прогрессив веб апп (PWA) хэлбэрээр утасны үндсэн дэлгэц дээр нэмэгдэж болдог. Ихэнх шинэ аппын хувьд энэ нь практик анхны хувилбар юм: нэг код, нэг холбоос, store-ын шалгалт шаардахгүй. Гэхдээ энэ нь хязгаартай, ялангуяа iPhone дээрх мэдэгдэл болон төхөөрөмжийн гүн хандалтын талаар. Энэ гарын авлага хэзээ нативаар хийх хэрэгтэйг шулуун тодорхойлно.

Утсан дээр "гар утсанд ээлтэй" байх гурван арга

PWA нь хариу өгдөг веб апп дээр хэдэн нэмэлт зүйл нэмсэн хувилбар тул эхний хоёрын хооронд сонгох шаардлагагүй. Эхлээд хариу өгдөг болгож, дараа нь суулгах боломжтой болго. Илүү дэлгэрэнгүй харьцуулалтыг нативе ба прогрессив веб апп хуудаснаас үзнэ үү.

Веб апп утсан дээр юу хийж, юу хийж чадахгүй вэ

Хөтөч нь олон хүний бодсоноос илүү зүйл хийж чадна:

• Камер ба зураг оруулах, стандарт файлын оролтоор.
• Байршил, хэрэглэгчийн зөвшөөрлөөр.
• Үндсэн дэлгэцэд суулгах, дүрстэй, бүтэн дэлгэцээр нээгдэх.
• Офлайнаар ажиллах, service worker-оор (сайтынхаа ард вебсайт ажиллуулдаг дэвсгэр скрипт) хуудас болон өгөгдлийг кэшлэх.
• Push мэдэгдэл — iPhone дээр нэг барьцаатай. Apple-ийн WebKit баг web push нь iOS болон iPadOS 16.4-д Home Screen-д нэмсэн веб аппд ирсэн гэж мэдээлсэн. Хэрэглэгч эхлээд апп суулгаж, дараа нь мэдэгдэлд зөвшөөрөл өгөх ёстой.

Нативе нь илүү давуу талтай зүйлс:

• Төхөөрөмжийн гүн боломжууд — арын байршил, Bluetooth төхөөрөмж, эрүүл мэндийн өгөгдөл, гэрийн дэлгэцийн виджет зэрэг. Хөтөчид дэмжлэг хязгаарлагдмал эсвэл платформ тус бүрт өөр байдаг.
• Store-ын хайлт. Хүмүүс store-д хайж таныг олох ёстой бол та store-д байх хэрэгтэй.
• Хүнд офлайн ажил, жишээлбэл арын дэвсгэрт синк хийх их хэмжээний өгөгдөл.
• Гүйцэтгэлд чухал график, жишээлбэл хүнд тоглоом.

Хэрэв эдгээр зүйлс таны аппын төвд байхгүй бол веб апп ихэвчлэн хангалттай.

Утсан дээр хамгийн түрүүнд зохион бүтээх

Утасны бүтцийг эхэлж зохио, дараа нь том дэлгэцэд тэлээрэй; эсрэгээр хийвэл утсан дээр ихэвчлэн ачаалалтай харагддаг.

Бүтэц

• Нэг багана жижиг дэлгэцэн дээр. Хажуугийн цэсүүд доод талын баар эсвэл цэс болж хувирна.
• Хэвтээ гүйлгэлт байхгүй. Өргөн хүснэгтүүд карт болж эсвэл өөрийн контейнер дотор гүйлгэгдэнэ.
• Зоомгүйгээр уншигдах текст — ойролцоогоор 16px-ийн үндсэн текст.

Хүрэлт

• Том товшилтын талбай. Ойролцоогоор 44 x 44 пиксел бол түгээмэл доод хэмжээ. Тэдгээрийн хооронд зай үлдээ.
• Гол үйлдлүүд нуруулаар хүрэх хэмжээнд, урт утсан дээр дэлгэцийн доод хэсэгт.
• Зөвхөн hover-т суурилсан функцгүй байх. Hover дээр гардаг tooltip болон цэсүүд touch дэлгэц дээр байдаггүй.
• Зөв гар. Имэйл талбар имэйлийн гарыг, утасны талбар дугаарын гарыг нээх ёстой. Зөв input type-ийг хүс.

Хурд

• Жижиг зургууд, тохирох хэмжээтэйгээр, харагдах үед ачаалагдана.
• Хүнд номын сангуудыг бага байлгах. Нэмэлт бүр утасны дата дээр татах хугацааг нэмдэг.
• Skeleton дэлгэц эсвэл тодорхой ачаалах төлөв, апп хэзээ ч гацсан мэт харагдахгүй байхын тулд.

Аюулгүй талбар ба хаягийн мөр

Орчин үеийн утсан дээр контент notch эсвэл гэрийн индикаторын доор орох боломжтой, ялангуяа бүтэн дэлгэцтэй суулгасан аппд. Аюулгүй талбарын дотоод зайг хүс. Мөн хөтөчийн хаягийн мөр гарч, алга болоход бүтэн өндрийн бүтэц үсрэдэг эсэхийг анхаар.

Суулгах боломжтой болгох (PWA)

Суулгах боломжтой болохын тулд веб апп дараахийг шаарддаг:

1. Веб аппын манифест — аппын нэр, богино нэр, дүрс, өнгө, нээгдэх хэлбэр (ихэвчлэн бүтэн дэлгэц, "standalone") бүхий жижиг файл.
2. Дүрсүүд платформуудын хүлээж буй хэмжээнд, Apple төхөөрөмжид зориулсан нэгийг оруулаад.
3. HTTPS, зөв хостлогдсон аль ч апп үүнийг аль хэдийн хангасан байдаг.
4. Service worker, хэрэв офлайн дэмжлэг эсвэл push хүсвэл.

Дараа нь хэрэглэгчдэд хэрхэн суулгахыг хэл. Android хөтчүүд ихэвчлэн суулгах санууж эсвэл цэсний зүйл санал болгодог; iPhone дээр Share товчлуур, дараа нь "Add to Home Screen". "Энэ аппыг суулгах" гэсэн товч тайлбар эдгээр алхмуудтай хамт маш их тусалдаг.

Офлайн дэмжлэг нь PWA-д хамгийн төвөгтэй хэсэг. Аппын хуудсуудыг кэшлэж, холболтгүйгээр нээгдэх нь энгийн. Харин хэрэглэгчид офлайнаар өгөгдөл өөрчилж, дараа нь синк хийх нь жинхэнэ ажил. Хэрэглэгчдэд үүнийг үнэхээр хэрэгтэй үед л шаардаарай.

Ажилладаг эхний prompt

Манай цэвэрлэгээний багт зориулж өнөөдрийн ажлуудыг харж, дууссаныг тэмдэглэх веб апп бүтээ. Утсанд зориулж эхлэн дизайнлаарай: нэг багана, том товшилтын талбай, гол үйлдлийн товчлуур доод талд тогтмол, зөвхөн хулганаар ажиллах хяналтгүй, утасны болон имэйлийн талбарт зөв гар. Ажил бүр хаягийг (товшвол газрын зураг нээгдэнэ), үйлчлүүлэгчийн утасны дугаарыг (товшвол залгана), шалгах жагсаалт, мөн зураг авч болох "Дууссан гэж тэмдэглэх" товчлуурыг харуулна. Менежерүүд ноутбукаар нэвтэрч ажил хуваарилна; том дэлгэц дээр карт биш хүснэгт харуулна. Manifest, дүрс, standalone харагдацтай суулгах боломжтой PWA болго, мөн аппын хүрээг кэшлэж, дохиогүй байсан ч нээгддэг болго. Өгөгдлийг мэдээллийн санд хадгал.

Бүтээх алхмууд

1. Утасны бүтцийг эхэлж бүтээ, жишээ өгөгдөлтэй, утасны хэмжээтэй урьдчилан харах дэлгэцэд шалга.
2. Жинхэнэ утсан дээр туршаарай — хэрэглэгчид чинь хоёуланд нь байвал хамгийн багадаа нэг iPhone, нэг Android. Эмулятор нь on-screen гар input-г нуух зэрэг зүйлийг олж харахгүй.
3. Гол ажлыг нэг хурууг ашиглан дуусгаж үз. Хэрэв хоёр гар эсвэл zoom хэрэгтэй бол засаарай.
4. Manifest болон дүрсийг нэм, дараа нь хоёр платформ дээр суулгаж дүрс, нэр, splash-ийг шалга.
5. Офлайнаа шийд. "Дохиогүй нээгдэж, тодорхой мессеж харуулна" гэсэнээс эхэл; офлайн засварлалтыг зөвхөн шаардлагатай бол нэм.
6. Хурдыг удаан холболтоор шалга. Хөтөчийн developer tools нь ийм холболтыг дуурайж чадна.
7. Мэдэгдлийг хамгийн сүүлд нэм, хэрэв нэмэх бол — мөн суулгаагүй хэрэглэгчдэд имэйл нөөц төлөвлө.

Түгээмэл алдаанууд

• Зөвхөн том мониторт дизайнлах. Алхам бүрд дэлгэц бүрийг утасны өргөнөөр шалга.
• Хэтэрсэн хүснэгтүүд. Жижиг дэлгэц дээр мөрүүдийг карт болго.
• Жижиг товшилтын талбай ба ойр байрлах холбоосууд.
• Гартай зөрчилдөх маягтууд — буруу input type, гарын ард нуугдсан талбар, "дараагийн" урсгалгүй байх.
• iPhone-ийн push хөтчийн таб дээр ажиллана гэж бодох. Үүнд апп Home Screen-д суулгагдсан байх ёстой.
• Бүтээж чадахгүй App Store апп амлах. Store чухал бол түүнд тусад нь төлөвлө.
• Вебсайтыг боож апп гэж нэрлэх. Apple-ийн App Review Guidelines нь давтагдсан вебсайтаас илүү зүйл санал болгосон апп шаарддаг; нимгэн боолт татгалзуулах эрсдэлтэй.

Хэзээ нативе апп хэрэгтэй вэ

Дараахь тохиолдолд нативе (эсвэл веб апп дараа нь нативе хувилбар) сонго:

• Store-д байх нь үйлчлүүлэгчид таныг олох гол арга бол.
• Та арын байршил, Bluetooth, эрүүл мэндийн өгөгдөл, виджет зэрэг хөтчид найдвартай байдаггүй төхөөрөмжийн боломжуудад тулгуурладаг бол.
• Аппаас урт хугацаанд бүрэн офлайнаар ажиллах шаардлагатай бол.
• Хэрэглэгчид чинь үүнийг хүлээж байвал — зарим үзэгчид store-д байхгүй зүйлээр огт ашиглахгүй.

Store-д нийтлэх нь өөрийн зардал, алхамуудтай. 2026 оны 9-р сарын байдлаар Apple-ийн developer программ жилд АНУ-ын $99, Google Play-ийн developer бүртгэл нэг удаагийн $25 гэж тэдний өөрсдийн вебсайтад заасан байдаг, мөн гаргалт бүр шалгалтаар дамжина. Олон баг бүтээгдэхүүнээ хүмүүс хүсч байгааг батлахын тулд гар утсанд ээлтэй веб аппаар эхэлж, дараа нь нативд хөрөнгө оруулдаг. Хиймэл оюун ухаанаар апп хэрхэн бүтээх вэ гарын авлага энэ эхний шатыг бүхэлд нь тайлбарладаг.

Mythex-ээр бүтээх нь

Mythex веб апп бүтээдэг: апп-аа чат дээр тайлбарлаж, live preview дээр ширээний болон утасны хэмжээний фрэйм дээр шалгана. Docs-д утасны жижиг дэлгэцийн засварт зориулсан гар утсанд ээлтэй prompt байдаг. Бусад функц шиг PWA manifest болон дүрс хүсч болно, дараа нь утас бүрт ажилладаг нийтийн холбоосоор нийтэлнэ. Pro дээр Mythex апп-ийг Android болон iPhone апп болгон боож, Google Play-ийн дотоод туршилт болон TestFlight руу илгээж чадна. Эхлэхийн тулд хиймэл оюун ухаант веб апп builder-ийг үзэх эсвэл апп загваруудыг харж болно. Жишээ хэрэгтэй бол habit tracker апп бүтээх гарын авлагыг уншина уу.

Асуултууд