Kaip sukurti mobiliesiems pritaikytą žiniatinklio programą

Mobiliesiems pritaikyta žiniatinklio programa – tai svetainė, kuri veikia kaip programėlė telefone: telpa į siaurą ekraną, turi didelius lietimui skirtus elementus, greitai įsikrauna mobiliuoju duomenų ryšiu ir gali būti pridėta į pagrindinį ekraną kaip progresyvioji žiniatinklio programa (PWA). Daugeliui naujų programų tai praktiškas pirmasis variantas – vienas kodas, viena nuoroda, be parduotuvės peržiūros. Tačiau ji turi realių ribų, ypač pranešimų iPhone telefonuose ir įrenginio funkcijų pasiekimo srityje, todėl šis vadovas nuoširdžiai nurodo, kada reikia vietinės programos.

Trys būdai būti „mobiliame“

PWA – tai prisitaikanti žiniatinklio programa su keliais papildymais, todėl nereikia rinktis tarp pirmų dviejų. Pirmiausia kurkite prisitaikančią, o paskui padarykite ją įdiegiamą. Išsamesniam palyginimui žr. vietines ir progresyviąsias žiniatinklio programas.

Ką žiniatinklio programos gali ir ko negali telefonuose

Naršyklės gali daugiau, nei daugelis mano:

• Kamera ir nuotraukų įkėlimas per įprastus failų įvesties laukus.
• Vieta su vartotojo leidimu.
• Įdiegimas į pagrindinį ekraną su piktograma ir paleidimu pilnu ekranu.
• Veikimas neprisijungus talpinant puslapius ir duomenis į podėlį su service worker (fono scenarijumi, kurį naršyklė vykdo jūsų svetainei).
• Pranešimai – su gaudynė iPhone telefonuose. Apple WebKit komanda skelbia, kad žiniatinklio pranešimai atsirado iOS ir iPadOS 16.4 versijose žiniatinklio programoms, pridėtoms į pagrindinį ekraną. Vartotojai pirmiausia turi įdiegti programą, tada leisti pranešimus.

Kur vietinė programa vis dar laimi:

• Giluminės įrenginio funkcijos, pavyzdžiui, fono vietovė, Bluetooth priedai, sveikatos duomenys ir pagrindinio ekrano valdikliai – naršyklėje palaikymas ribotas arba skiriasi pagal platformą.
• Atradimas programų parduotuvėje. Jei žmonės ieškos jūsų parduotuvėje, turite būti joje.
• Sunkus darbas neprisijungus, pavyzdžiui, dideli duomenų rinkiniai, sinchronizuojami fone.
• Grafika, kuriai reikia didelio našumo, pavyzdžiui, reiklūs žaidimai.

Jei nė vienas iš šių dalykų nėra jūsų programos pagrindas, žiniatinklio programa greičiausiai jums tiks.

Projektavimas pirmiausia telefonams

Projektuokite telefono maketą pirmiausia, o didesniems ekranams leiskite jį išsiplėsti; atvirkštinis būdas dažniausiai sukuria ankštus telefono ekranus.

Maketas

• Viena skiltis mažuose ekranuose. Šoninės juostos tampa apatine juosta arba meniu.
• Jokio šoninio slinkimo. Plačios lentelės tampa kortelėmis arba slenka savo konteineryje.
• Skaitomas tekstas be didinimo – pagrindinis tekstas apie 16 px.

Lietimas

• Dideli lietimo plotai. Įprastas minimumas – apie 44 x 44 pikselių. Palikite tarpą tarp jų.
• Pagrindiniai veiksmai nykščio pasiekiamumo zonoje, arti ekrano apačios aukštuose telefonuose.
• Jokių funkcijų, veikiančių tik užvedus pelę. Patarimai ir meniu, atsirandantys užvedus žymeklį, touch ekranuose neegzistuoja.
• Tinkama klaviatūra. El. pašto laukai turėtų atverti el. pašto klaviatūrą, telefono numerio laukai – skaitmenų klaviatūrą. Nurodykite tinkamus įvesties tipus.

Greitis

• Maži vaizdai tinkamo dydžio, įkeliami, kai jie patenka į ekraną.
• Mažiau sunkių bibliotekų. Kiekviena pridės atsisiuntimo laiko mobiliuoju duomenų ryšiu.
• Skeleton ekranai arba aiškios įkėlimo būsenos, kad programa niekada neatrodytų užšalusi.

Saugios zonos ir adreso juosta

Šiuolaikiniuose telefonuose turinys gali atsidurti po išpjova arba pagrindinio ekrano indikatoriumi, ypač pilno ekrano įdiegtoje programoje. Prašykite saugios zonos atitraukimo. Taip pat stebėkite pilno aukščio maketus, kurie šokinėja, kai naršyklės adreso juosta pasirodo ir dingsta.

Padaryti įdiegiamą (PWA)

Kad žiniatinklio programa būtų įdiegiama, jai reikia:

1. Žiniatinklio programos manifesto – mažo failo su programos pavadinimu, trumpu pavadinimu, piktogramomis, temos spalva ir atidarymo būdu (paprastai pilnas ekranas, „standalone“).
2. Piktogramų platformų reikalaujamais dydžiais, įskaitant tinkamą Apple įrenginiams.
3. HTTPS, kurį turi bet kuri tinkamai hostinama programa.
4. Service worker, jei norite veikti neprisijungus arba siųsti pranešimus.

Tada pasakykite vartotojams, kaip įdiegti. Android naršyklės paprastai pasiūlo diegimo raginimą arba meniu punktą; iPhone telefone tai dalijimosi mygtukas, tada „Pridėti į pagrindinį ekraną“. Trumpa pastaba „Įdiegti šią programą“ su tais žingsniais labai padeda.

Veikimas neprisijungus – čia PWA tampa sudėtingesnės. Programos puslapių talpinimas į podėlį, kad ji atsidarytų be ryšio, yra paprastas. Leisti žmonėms keisti duomenis neprisijungus ir vėliau juos sinchronizuoti – tikras darbas. Tai reikalaukite tik tada, kai vartotojams tikrai reikia.

Pirma užklausa, kuri veikia

Sukurkite žiniatinklio programą mūsų valymo komandai, kad jie matytų šiandienos darbus ir pažymėtų juos kaip atliktus. Projektuokite pirmiausia telefonams: viena skiltis, dideli lietimo plotai, pagrindinis veiksmo mygtukas fiksuotas arti apačios, jokių valdiklių, veikiančių tik užvedus žymeklį, jokio šoninio slinkimo ir teisingos klaviatūros telefono bei el. pašto laukams. Kiekvienas darbas rodo adresą (paliesti – atidaryti žemėlapyje), kliento telefoną (paliesti – skambinti), kontrolinį sąrašą ir mygtuką „Pažymėti kaip atliktą“, kuris gali priimti nuotrauką. Vadovai prisijungia nešiojamajame kompiuteryje, kad priskirtų darbus; plačiame ekrane rodykite lentelę vietoj kortelių. Padarykite ją įdiegiama PWA su manifestu, piktogramomis ir atskiru (standalone) rodymu, o programos apvalkalą talpinkite į podėlį, kad ji atsidarytų be signalo. Duomenis saugokite duomenų bazėje.

Kūrimo žingsniai

1. Pirmiausia sukurkite telefono maketą su pavyzdiniais duomenimis ir patikrinkite jį telefono dydžio peržiūroje.
2. Testuokite tikruose telefonuose – bent vieną iPhone ir vieną Android, jei jūsų vartotojai naudoja abu. Emuliatoriai praleidžia tokius dalykus kaip ekrano klaviatūra, dengianti įvesties laukus.
3. Atlikite pagrindinį veiksmą vienu nykščiu. Jei kažkam reikia abiejų rankų ar didinimo, ištaisykite.
4. Pridėkite manifestą ir piktogramas, tada įdiekite programą abiejose platformose ir patikrinkite piktogramą, pavadinimą ir pradinį ekraną.
5. Nuspręskite dėl veikimo neprisijungus. Pradėkite nuo „atsidaro be signalo ir rodo aiškų pranešimą“; pridėkite redagavimą neprisijungus tik jei reikia.
6. Patikrinkite greitį lėtame ryšyje. Jūsų naršyklės kūrėjo įrankiai gali tai imituoti.
7. Pranešimus pridėkite paskutinius, jei apskritai – ir numatykite el. laiško alternatyvą vartotojams, kurie neįdiegia programos.

Dažnos klaidos

• Projektavimas tik dideliam monitoriui. Tikrinkite kiekvieną ekraną telefono plotyje kaip dirbate.
• Lentelės, kurios išeina už ribų. Mažuose ekranuose eilutes paverskite kortelėmis.
• Maži lietimo plotai ir arti vienas kito esančios nuorodos.
• Formos, kovojančios su klaviatūra – netinkami įvesties tipai, laukai paslėpti už klaviatūros, nėra „kitas“ eigos.
• Manymas, kad iPhone pranešimai veikia naršyklės skirtuke. Jiems reikia programos, įdiegtos į pagrindinį ekraną.
• Pažadėti App Store programą, kurios negalite pateikti. Jei parduotuvė svarbi, planuokite ją atskirai.
• Perpakuoti svetainę ir vadinti ją programa. Apple App Review Guidelines reikalauja programų, kurios peržengia perpakuotos svetainės ribas; plona apvalkalo programa rizikuoja būti atmesta.

Kada reikia vietinės programos

Pereikite prie vietinės (arba numatykite vietinę versiją po žiniatinklio programos), kai:

• Parduotuvėje esantis buvimas yra tai, kaip klientai jus ras.
• Jums reikia fono vietovės, Bluetooth, sveikatos duomenų, valdiklių ar kitų įrenginio funkcijų, kurių naršyklės nepatikimai siūlo.
• Jūsų programa turi visiškai veikti neprisijungus ilgą laiką.
• Jūsų vartotojai to tikisi – kai kurios auditorijos tiesiog nenaudos nieko, ko nėra parduotuvėje.

Publikavimas parduotuvėse turi savų kaštų ir žingsnių. Nuo 2026 m. rugsėjo Apple kūrėjo programa kainuoja 99 JAV dolerius per metus, o Google Play kūrėjo paskyra – vienkartinį 25 JAV dolerių mokestį, pagal jų pačių svetaines, ir kiekvienas leidimas praeina peržiūrą. Daugelis komandų pradeda nuo mobiliesiems pritaikytos žiniatinklio programos, kad įrodytų, jog žmonės nori produkto, o vietinę versiją kuria, kai jau žino. Kaip sukurti programą su DI apima tą pirmą etapą nuo pradžios iki pabaigos.

Kūrimas su Mythex

Mythex kuria žiniatinklio programas: aprašote programą pokalbyje ir tikrinate ją tiesioginėje peržiūroje darbalaukyje bei telefono dydžio rėmelyje, kurį galima keisti. Dokumentuose yra mobiliesiems prisitaikančio dizaino užklausa, skirta mažų ekranų maketams taisyti. Kaip ir bet kurią kitą funkciją, galite paprašyti PWA manifesto ir piktogramų, tada publikuoti viešą nuorodą, kuri veikia bet kuriame telefone. Pro plane Mythex taip pat gali įpakuoti programą kaip Android ir iPhone programą, siunčiamą į Google Play vidinį testavimą ir TestFlight. Pradėti galite nuo DI žiniatinklio programų kūrėjo arba naršykite programų šablonus. Kaip darbo pavyzdį skaitykite kaip sukurti įpročių sekimo programą.

Klausimai