Kuidas luua mobiilisõbralik veebirakendus

Mobiilisõbralik veebirakendus on veebileht, mis töötab telefonis nagu rakendus: see mahub kitsale ekraanile, on suurte puutealadega, laadib kiiresti mobiilse andmesideühenduse kaudu ja seda saab lisada avaekraanile progressiivse veebirakendusena (PWA). Enamiku uute rakenduste jaoks on see praktiline esimene versioon — üks koodibaas, üks link, ilma poe ülevaatuseta. Sellel on siiski reaalsed piirangud, eriti iPhone’i teavituste ja seadmete sügavama kasutamise osas, ning see juhend ütleb ausalt, millal vajate natiivset rakendust.

Kolm viisi „mobiilis olemiseks“

PWA on reageeriv veebirakendus mõne lisaga, nii et ei pea valima kahe esimese vahel. Ehitage kõigepealt reageeriv versioon ja tehke see seejärel installitavaks. Põhjalikuma võrdluse leiate natiivsete ja progressiivsete veebirakenduste erinevustest.

Mida veebirakendused telefonides teha saavad ja mida mitte

Brauserid suudavad rohkem, kui paljud arvavad:

• Kaamera ja fotode üleslaadimine standardsete failisisendite kaudu.
• Asukoht kasutaja loal.
• Installimine avaekraanile ikooni ja täisekraanilt käivitamisega.
• Offline-kasutus, lehtede ja andmete vahemällu salvestamisega teenindustöötaja (service worker — taustaskript, mille brauser teie saidi jaoks käivitab) abil.
• Tõuketeavitused — iPhone’is on sellel nüanss. Apple’i WebKit-meeskond ütleb, et veebi tõuketeavitused tulid iOS-i ja iPadOS-i versioonis 16.4 veebirakendustele, mis on lisatud avaekraanile. Kasutajad peavad rakenduse kõigepealt installima ja seejärel teavitused lubama.

Kus natiivne on ikka parem:

• Sügavad seadmefunktsioonid, nagu taustal asukoha jälgimine, Bluetooth-tarvikud, terviseandmed ja avaekraani vidinad — toetus brauseris on piiratud või platvormiti erinev.
• Rakenduste poe avastamine. Kui inimesed otsivad teid poest, peate olema seal.
• Raske offline-töö, näiteks suurte andmekogumite taustsünkroonimine.
• Jõudlustundlik graafika, näiteks nõudlikud mängud.

Kui ükski neist ei ole teie rakenduse keskmes, sobib veebirakendus tõenäoliselt hästi.

Disain telefonide jaoks esimesena

Disainige kõigepealt telefoni paigutus ja laiendage seda suuremate ekraanide jaoks; vastupidine lähenemine tekitab tavaliselt ahtad telefoniekraanid.

Paigutus

• Üks veerg väikestel ekraanidel. Külgribad muutuvad alumiseks ribaks või menüüks.
• Ilma külgsuunalise kerimiseta. Laiad tabelid muutuvad kaartideks või kerivad oma konteineris.
• Loetav tekst ilma suumimiseta — põhitekst umbes 16 px.

Puudutus

• Suured puutealad. Umbes 44 × 44 pikslit on levinud miinimum. Jätke nende vahele ruumi.
• Peamised tegevused pöidla ulatuses, pikkade telefonide puhul ekraani alaosas.
• Ei mingeid ainult hiireliigutusega avanevaid funktsioone. Hiirega ilmuvad tööriistavihjed ja menüüd puuteekraanil ei eksisteeri.
• Õige klaviatuur. E-posti väljad peaksid avama e-posti klaviatuuri, telefoninumbri väljad numbriklaviatuuri. Küsige õigeid sisestustüüpe.

Kiirus

• Väikesed pildid mõistlikes suurustes, laaditud siis, kui need ekraanile tulevad.
• Vähem raskeid teeke. Iga teek lisab allalaadimisaega mobiilsidel.
• Skeletonekraanid või selged laadimisolekud, et rakendus ei tunduks kunagi jäätunud.

Ohutud alad ja aadressiriba

Uusimatel telefonidel võib sisu ulatuda märgi või koduindikaatori alla, eriti täisekraanil installitud rakenduses. Küsige ohutu ala täidet. Jälgige ka täishõivega paigutusi, mis hüppavad brauseri aadressiriba ilmumisel ja kadumisel.

Installitavaks tegemine (PWA)

Installitavuseks vajab veebirakendus:

1. Veebirakenduse manifesti — väikest faili rakenduse nime, lühinime, ikoonide, teemavärvi ja avamisviisiga (tavaliselt täisekraan „standalone“).
2. Ikoone platvormide nõutud suurustes, sealhulgas ühte Apple’i seadmetele sobivat.
3. HTTPS-i, mis igal korralikult hostitud rakendusel juba on.
4. Teenindustöötajat, kui soovite offline-tuge või tõuketeavitusi.

Seejärel öelge kasutajatele, kuidas installida. Androidi brauserid pakuvad tavaliselt installiviipa või menüüelementi; iPhone’is on selleks jagamisnupp ja seejärel „Lisa avaekraanile“. Lühike märkus „Installi see rakendus“ juhistega aitab palju.

Offline-tugi on koht, kus PWA-d muutuvad keeruliseks. Rakenduse lehtede vahemällu salvestamine, et see avaneks ilma ühenduseta, on lihtne. Andmete muutmine offline-režiimis ja nende hiljem sünkroonimine on tõsine töö — küsige seda ainult siis, kui kasutajad seda tõesti vajavad.

Töötav esimene viip

Ehita veebirakendus meie koristusmeeskonnale, et näha tänaseid töid ja märkida need tehtuks. Disainida esmalt telefonile: üks veerg, suured puutealad, peanupp kinnitatud ekraani alaossa, ilma ainult hiireliigutusega juhtelementideta, ilma külgsuunalise kerimiseta ja õiged klaviatuurid telefoni- ja e-posti väljadele. Iga töö näitab aadressi (puudutus avab kaardid), kliendi telefoni (puudutus helistab), kontrollnimekirja ja nupu „Märgi tehtuks“, mis võib lisada foto. Juhid logivad sisse sülearvutiga ja määravad töid; laiemal ekraanil näidake kaartide asemel tabelit. Tehke sellest installitav PWA manifesti, ikoonide ja standalone-kuvaga ning vahemällu salvestatud rakenduse põhi, et see avaneks ilma levita. Salvestage andmed andmebaasi.

Ehitusetapid

1. Ehitage kõigepealt telefoni paigutus näidisandmetega ja kontrollige seda telefonimõõtmetes eelvaates.
2. Testige päris telefonides — vähemalt ühel iPhone’il ja ühel Androidil, kui teie kasutajatel on mõlemad. Emulaatorid jätavad vahele asju, nagu ekraaniklaviatuur, mis katab sisendid.
3. Läbige peamine ülesanne ühe pöidlaga. Kui miski nõuab kahte kätt või suumimist, parandage see.
4. Lisage manifest ja ikoonid, seejärel installige rakendus mõlemale platvormile ja kontrollige ikooni, nime ja käivitusekraani.
5. Otsustage offline-režiimi üle. Alustage „avaneb ilma levita ja näitab selget teadet“; lisage offline-muutmine ainult vajaduse korral.
6. Kontrollige kiirust aeglasel ühendusel. Teie brauseri arendajatööriistad suudavad aeglast ühendust simuleerida.
7. Lisage teavitused viimasena, kui üldse — ja kavandage e-posti varuvariant kasutajatele, kes ei installi.

Levinud vead

• Disain ainult suurel monitoril. Kontrollige iga ekraani telefonilaiuses töö käigus.
• Tabelid, mis ulatuvad üle. Muutke read väikestel ekraanidel kaartideks.
• Väikesed puutealad ja lingid üksteise lähedal.
• Vormid, mis võitlevad klaviatuuriga — valed sisestustüübid, väljad klaviatuuri taga, puudub „järgmine“ voog.
• Eeldus, et iPhone’i tõuketeated töötavad brauseri vahelehel. Need eeldavad, et rakendus on avaekraanile installitud.
• Poerakenduse lubamine, mida te ei saa välja anda. Kui pood on oluline, planeerige see eraldi.
• Veebilehe mähkimine ja nimetamine rakenduseks. Apple’i App Review Guidelines nõuavad rakendusi, mis ulatuvad kaugemale ümberpakitud veebilehest; õhuke ümbris riskib tagasilükkamisega.

Millal vajate natiivset rakendust

Minge natiivseks (või planeerige natiivne versioon pärast veebirakendust), kui:

• Poes olemine on see, kuidas kliendid teid leiavad.
• Sõltute taustal asukohast, Bluetoothist, terviseandmetest, vidinatest või muudest seadmefunktsioonidest, mida brauserid ei paku usaldusväärselt.
• Teie rakendus peab pikka aega töötama täielikult offline-režiimis.
• Teie kasutajad seda eeldavad — mõned publikud ei kasuta lihtsalt midagi, mis ei ole poes.

Poes avaldamisel on omad kulud ja sammud. Septembri 2026 seisuga maksab Apple’i arendajaprogramm 99 USA dollarit aastas ja Google Playi arendajakonto üks kord 25 USA dollarit, nende enda veebilehtede järgi, ning iga väljaanne läbib ülevaatuse. Paljud meeskonnad alustavad mobiilisõbraliku veebirakendusega, et tõestada, et inimesed tahavad toodet, ja investeerivad natiivsesse alles siis, kui nad seda teavad. Kuidas luua rakendus tehisintellektiga käsitleb seda esimest etappi tervikuna.

Ehitamine Mythexiga

Mythex ehitab veebirakendusi: kirjeldate rakendust vestluses ning kontrollite seda reaalajas eelvaates lauaarvutis ja telefonisuuruses raamis, mida saab suurust muuta. Dokumentatsioonis on mobiilireageeriv viip väikeste ekraanide paigutuste parandamiseks. PWA manifesti ja ikoone saate paluda nagu iga muu funktsiooni ning seejärel avaldada avaliku lingi, mis töötab igas telefonis. Pro paketis saab Mythex rakenduse ka mähkida Androidi ja iPhone’i rakenduseks, mis saadetakse Google Playi sisemisele testimisele ja TestFlighti. Alustamiseks vaadake AI veebirakenduste ehitajat või sirvige rakenduste malle. Töötava näite jaoks lugege kuidas luua harjumuste jälgimise rakendust.

Küsimused