Kako izraditi web aplikaciju prilagođenu mobitelu

Web aplikacija prilagođena mobitelu je web stranica koja radi kao aplikacija na telefonu: stane na uski ekran, ima velike površine za dodir, brzo se učitava na mobilnim podacima i može se dodati na početni zaslon kao progresivna web aplikacija (PWA). Za većinu novih aplikacija to je praktična prva verzija: jedna baza koda, jedna poveznica, bez pregleda u trgovini. Ipak ima stvarna ograničenja, posebno kod obavijesti na iPhoneu i dubokog pristupa uređaju, pa ovaj vodič otvoreno kaže kada vam treba nativna aplikacija.

Tri načina da budete "na mobitelu"

PWA je responzivna web aplikacija s nekoliko dodataka, pa ne morate birati između prva dva. Prvo izradite responzivnu verziju, zatim je učinite instalabilnom. Za dublju usporedbu pogledajte nativne aplikacije i progresivne web aplikacije.

Što web aplikacije mogu, a što ne mogu na mobitelu

Preglednici mogu više nego što mnogi misle:

• Kamera i učitavanje fotografija preko standardnih polja za datoteke.
• Lokacija, uz dopuštenje korisnika.
• Instalacija na početni zaslon s ikonom i pokretanjem preko cijelog ekrana.
• Rad bez veze, predmemoriranjem stranica i podataka pomoću service workera (pozadinske skripte koju preglednik izvršava za vašu stranicu).
• Push obavijesti, uz zamku na iPhoneu. Apple WebKit tim navodi da su web push obavijesti stigle na iOS i iPadOS 16.4 za web aplikacije dodane na početni zaslon. Korisnici prvo moraju instalirati aplikaciju, zatim dopustiti obavijesti.

Gdje i dalje pobjeđuje nativna aplikacija:

• Duboke značajke uređaja, poput lokacije u pozadini, Bluetooth uređaja, zdravstvenih podataka i widgeta na početnom zaslonu. Podrška u pregledniku ograničena je ili se razlikuje po platformi.
• Otkrivanje u App Storeu. Ako vas ljudi traže u trgovini, morate biti u njoj.
• Intenzivan rad bez veze, poput velikih skupova podataka koji se sinkroniziraju u pozadini.
• Grafika osjetljiva na performanse, poput zahtjevnih igara.

Ako nijedno od toga nije važno za vašu aplikaciju, web aplikacija vam vjerojatno će dobro poslužiti.

Dizajn prvo za mobitel

Dizajnirajte raspored za mobitel prvi, pa ga proširite za veće ekrane. Obrnut redoslijed obično proizvodi natrpane zaslone na mobitelu.

Raspored

• Jedan stupac na malim ekranima. Bočne trake postaju donja traka ili izbornik.
• Bez bočnog pomicanja. Široke tablice pretvorite u kartice ili neka se pomiču unutar vlastitog spremnika.
• Čitljiv tekst bez zumiranja, tekst u tijelu otprilike 16 piksela.

Dodir

• Velike površine za dodir. Oko 44 x 44 piksela uobičajen je minimum. Ostavite razmak između njih.
• Glavne radnje unutar dosega palca, pri dnu ekrana na visokim telefonima.
• Bez značajki samo na lebdenje. Opisi i izbornici koji se pojavljuju pri lebdenju mišem ne postoje na ekranima osjetljivim na dodir.
• Prava tipkovnica. Polja za e-poštu trebaju otvoriti tipkovnicu za e-poštu, a polja za telefon brojčanik. Zatražite ispravne vrste unosa.

Brzina

• Male slike razumnih veličina, učitane kada uđu u vidno polje.
• Manje teških biblioteka. Svaka dodaje vrijeme preuzimanja na mobilnim podacima.
• Skeleton zasloni ili jasna stanja učitavanja, da aplikacija nikada ne izgleda zamrznuto.

Sigurna područja i traka adrese

Na modernim telefonima sadržaj može završiti ispod izreza ili donje indikatorske trake, posebno u instaliranoj aplikaciji preko cijelog ekrana. Zatražite razmak za sigurna područja. Pazite i na rasporede pune visine koji skaču dok se traka adrese pojavljuje i nestaje.

Izrada instalabilne aplikacije (PWA)

Da bi se web aplikacija mogla instalirati, potrebno je:

1. Web manifest, malu datoteku s imenom aplikacije, kratkim imenom, ikonama, bojom teme i načinom otvaranja (obično preko cijelog ekrana, "standalone").
2. Ikone u veličinama koje platforme očekuju, uključujući onu prikladnu za Apple uređaje.
3. HTTPS, koji već ima svaka ispravno hostirana aplikacija.
4. Service worker ako želite podršku za rad bez veze ili push.

Zatim recite korisnicima kako da instaliraju aplikaciju. Android preglednici obično nude upit za instalaciju ili stavku u izborniku; na iPhoneu to je gumb Dijeli, pa "Dodaj na početni zaslon". Kratka napomena "Instalirajte ovu aplikaciju" s tim koracima puno pomaže.

Podrška za rad bez veze tu postaje složena. Predmemoriranje stranica aplikacije tako da se otvori bez veze je jednostavno. Omogućiti korisnicima da mijenjaju podatke bez veze i kasnije ih sinkroniziraju stvarno je zahtjevan posao, pa to tražite samo ako ga korisnici zaista trebaju.

Upit koji djeluje

Izradi web aplikaciju za naš tim za čišćenje da vidi današnje poslove i označi ih završenima. Dizajn prvo za mobitel: jedan stupac, velike površine za dodir, glavni gumb za radnju fiksiran blizu dna, bez kontrola koje rade samo na lebdenje, bez bočnog pomicanja i ispravne tipkovnice za polja za telefon i e-poštu. Svaki posao prikazuje adresu (dodirom se otvara u kartama), telefon klijenta (dodirom se poziva), popis zadataka i gumb "Označi završeno" koji može priložiti fotografiju. Voditelji se prijavljuju na računalu da dodijele poslove; na širokom ekranu prikažite tablicu umjesto kartica. Neka bude instalabilna PWA s manifestom, ikonama i standalone prikazom, i predmemorirajte ljusku aplikacije da se otvara bez signala. Podatke spremite u bazu podataka.

Koraci izrade

1. Prvo izradite raspored za mobitel na uzorcima podataka i provjerite ga u pregledu veličine mobitela.
2. Testirajte na pravim mobitelima, barem jednom iPhoneu i jednom Androidu ako vaši korisnici imaju oboje. Emulatori propuštaju stvari poput tipkovnice na ekranu koja prekriva polja.
3. Prođite glavni zadatak jednim palcem. Ako išta zahtijeva obje ruke ili zumiranje, popravite to.
4. Dodajte manifest i ikone, zatim instalirajte aplikaciju na obje platforme i provjerite ikonu, ime i pozdravni zaslon.
5. Odlučite o radu bez veze. Počnite s "otvara se bez signala i prikazuje jasnu poruku"; uređivanje bez veze dodajte samo ako je potrebno.
6. Provjerite brzinu na sporoj vezi. Alati za razvojne programere u pregledniku mogu simulirati sporu vezu.
7. Obavijesti dodajte zadnje, ako uopće, i pripremite alternativu e-poštom za korisnike koji ne instaliraju aplikaciju.

Česte greške

• Dizajniranje samo na velikom monitoru. Provjeravajte svaki ekran u širini mobitela dok radite.
• Tablice koje prelaze rub. Na malim ekranima pretvorite retke u kartice.
• Premala područja za dodir i poveznice blizu jedna drugoj.
• Obrasci koji se bore s tipkovnicom: pogrešne vrste unosa, polja skrivena iza tipkovnice, nema tijeka "dalje".
• Pretpostavka da push na iPhoneu radi u kartici preglednika. Treba instalirana aplikacija na početnom zaslonu.
• Obećavanje aplikacije za App Store koju ne možete isporučiti. Ako je trgovina važna, planirajte je zasebno.
• Omatanje web stranice i zvanje toga aplikacijom. Apple App Review Guidelines traže aplikacije koje nadilaze prepakiranu web stranicu; tanki omot nosi rizik odbijanja.

Kada vam treba nativna aplikacija

Idite na nativnu verziju (ili planirajte nativnu verziju nakon web aplikacije) kada:

• Vas kupci pronalaze preko trgovine.
• Oslanjate se na lokaciju u pozadini, Bluetooth, zdravstvene podatke, widgete ili druge značajke uređaja koje preglednici ne nude pouzdano.
• Vaša aplikacija mora dulje vrijeme raditi potpuno bez veze.
• Vaši korisnici to očekuju. Neke publike jednostavno neće koristiti ništa što nije u trgovini.

Objava u trgovini ima vlastite troškove i korake. Od rujna 2026., prema vlastitim stranicama, Apple razvojni program košta 99 US dolara godišnje, a Google Play razvojni račun jednokratnih 25 US dolara, i svako izdanje prolazi pregled. Mnogi timovi počinju s web aplikacijom prilagođenom mobitelu kako bi dokazali da ljudi žele proizvod, pa tek onda ulažu u nativnu verziju. Kako izraditi aplikaciju uz AI pokriva tu prvu fazu od početka do kraja.

Izrada s Mythexom

Mythex izrađuje web aplikacije: opišete aplikaciju u chatu i provjeravate je u živom pregledu na računalu te u prikazu telefona koji možete mijenjati veličinom. Dokumentacija ima upit za prilagodbu mobitelu za popravljanje rasporeda na malim ekranima. Manifest PWA i ikone možete zatražiti kao svaku drugu značajku, zatim objaviti na javnu poveznicu koja radi na bilo kojem telefonu. U Pro planu Mythex može i omotati aplikaciju kao Android i iPhone aplikaciju, poslanu na interno testiranje u Google Playu i na TestFlight. Za početak pogledajte AI graditelj web aplikacija ili pregledajte predloške aplikacija. Kao primjer rada pročitajte kako izraditi aplikaciju za praćenje navika.

Pitanja