Kako napraviti web aplikaciju prilagođenu telefonu

Web aplikacija prilagođena telefonu je web stranica koja radi kao aplikacija na telefonu: prilagođava se uskom ekranu, ima velika polja za dodir, brzo se učitava na mobilnim podacima i može se dodati na početni ekran kao progresivna web aplikacija (PWA). Za većinu novih aplikacija ovo je praktična prva verzija — jedna baza koda, jedan link, bez pregleda u prodavnici. Ima ipak stvarna ograničenja, posebno kad je riječ o obavještenjima na iPhone-u i dubokom pristupu uređaju, pa ovaj vodič otvoreno kaže kada vam treba nativna aplikacija.

Tri načina da budete „na mobilnom“

PWA je responzivna web aplikacija s nekoliko dodataka, pa ne morate birati između prva dva. Prvo napravite responzivnu, pa je onda učinite instalabilnom. Za dublje poređenje pogledajte nativne aplikacije i progresivne web aplikacije.

Šta web aplikacije mogu, a šta ne mogu na telefonima

Pregledači mogu više nego što mnogi misle:

• Kamera i otpremanje fotografija, preko standardnih polja za datoteke.
• Lokacija, uz dozvolu korisnika.
• Instalacija na početni ekran s ikonom i pokretanjem preko cijelog ekrana.
• Rad van mreže, keširanjem stranica i podataka pomoću service worker-a (pozadinske skripte koju pregledač pokreće za vaš sajt).
• Push obavještenja — uz hvatanje na iPhone-u. Apple-ov WebKit tim kaže da su web push obavještenja stigla na iOS i iPadOS 16.4 za web aplikacije dodate na početni ekran. Korisnici moraju prvo da instaliraju aplikaciju, pa tek onda da dozvole obavještenja.

Gdje nativna aplikacija i dalje pobjeđuje:

• Duboke funkcije uređaja, kao što su lokacija u pozadini, Bluetooth pribor, zdravstveni podaci i vidžeti na početnom ekranu — podrška u pregledaču je ograničena ili varira od platforme do platforme.
• Otkrivanje u App Store-u. Ako će vas ljudi tražiti u prodavnici, morate biti u njoj.
• Intenzivan rad van mreže, kao što su veliki skupovi podataka koji se sinhronizuju u pozadini.
• Grafika osjetljiva na performanse, kao što su zahtjevne igre.

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

Dizajniranje prvo za telefone

Dizajnirajte raspored za telefon prvo, pa ga proširite za veće ekrane; obrnut redoslijed obično daje zbijene ekrane na telefonu.

Raspored

• Jedna kolona na malim ekranima. Bočni meniji postaju donja traka ili meni.
• Bez bočnog skrolovanja. Široke tabele postaju kartice ili se skroluju unutar vlastitog kontejnera.
• Čitljiv tekst bez zumiranja — osnovni tekst oko 16 px.

Dodir

• Velika polja za dodir. Oko 44 × 44 piksela je uobičajen minimum. Ostavite razmak između njih.
• Glavne radnje u dometu palca, pri dnu ekrana na visokim telefonima.
• Bez funkcija koje rade samo pri zadržavanju miša. Tooltip-ovi i meniji koji se pojavljuju pri prelasku mišem ne postoje na ekranima osjetljivim na dodir.
• Pravilna tastatura. Polja za e-mail treba da otvore tastaturu za e-mail, a polja za telefon brojčanik. Tražite ispravne tipove unosa.

Brzina

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

Sigurne zone i adresna traka

Na savremenim telefonima sadržaj može da završi ispod izreza ili donje linije za početak, posebno u instaliranoj aplikaciji preko cijelog ekrana. Tražite razmak za sigurnu zonu. Pazite i na izglede koji zauzimaju cijelu visinu, a koji skaču kad se adresna traka pojavi ili nestane.

Pravljenje instalabilne aplikacije (PWA)

Da bi se web aplikacija mogla instalirati, potrebno je:

1. Web manifest — mali fajl 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 pogodnu za Apple uređaje.
3. HTTPS, koji već ima svaka ispravno hostovana aplikacija.
4. Service worker ako želite podršku za rad van mreže ili push.

Zatim recite korisnicima kako da instaliraju. Android pregledači obično nude instalacioni prompt ili stavku u meniju; na iPhone-u je to dugme Podijeli, pa „Dodaj na početni ekran“. Kratka napomena „Instaliraj ovu aplikaciju“ s tim koracima mnogo pomaže.

Podrška za rad van mreže je mjesto gdje PWA postaju komplikovane. Keširanje stranica aplikacije da se otvori bez veze je jednostavno. Dozvoljavanje da ljudi mijenjaju podatke van mreže i da se oni kasnije sinhronizuju je stvaran posao — tražite to samo ako vaši korisnici zaista trebaju.

Prompt koji radi

Napravi web aplikaciju za naš tim za čišćenje da vidi današnje poslove i označi ih završenima. Dizajn prvo za telefone: jedna kolona, velika polja za dodir, glavno dugme za radnju fiksirano pri dnu, bez kontrola koje rade samo pri zadržavanju miša, bez bočnog skrolovanja i ispravne tastature za polja za telefon i e-mail. Svaki posao prikazuje adresu (dodir otvara mape), telefon klijenta (dodir zove), kontrolnu listu i dugme „Označi završeno“ koje može da uslika fotografiju. Menadžeri se prijavljuju na laptopu da dodijele poslove; na širokom ekranu prikaži tabelu umjesto kartica. Napravi instalabilan PWA s manifestom, ikonama i standalone prikazom, i keširaj školjku aplikacije da se otvara bez signala. Podatke čuvaj u bazi.

Koraci izrade

1. Prvo napravite raspored za telefon na uzorku podataka i provjerite ga u pregledu veličine telefona.
2. Testirajte na pravim telefonima — bar jednom iPhone-u i jednom Android uređaju ako vaši korisnici imaju oba. Emulatori propuštaju stvari, kao što je tastatura na ekranu koja prekriva polja.
3. Prođite glavni zadatak jednim palcem. Ako nešto traži obje ruke ili zumiranje, popravite to.
4. Dodajte manifest i ikone, pa instalirajte na obje platforme i provjerite ikonu, ime i uvodni ekran.
5. Odlučite o radu van mreže. Počnite s „otvara se bez signala i prikazuje jasnu poruku“; dodajte uređivanje van mreže samo ako zaista treba.
6. Provjerite brzinu na sporoj vezi. Alati za programere u pregledaču mogu da simuliraju sporu vezu.
7. Notifikacije dodajte na kraju, ako uopšte — i planirajte e-mail za korisnike koji ne instaliraju.

Česte greške

• Dizajniranje samo na velikom monitoru. Provjeravajte svaki ekran na širini telefona dok radite.
• Tabele koje izlaze van okvira. Pretvorite redove u kartice na malim ekranima.
• Mala polja za dodir i linkovi jedan uz drugi.
• Obrasci koji se bore s tastaturom — pogrešni tipovi unosa, polja sakrivena iza tastature, nema toka „dalje“.
• Pretpostavka da push na iPhone-u radi u kartici pregledača. Potrebno je da aplikacija bude instalirana na početni ekran.
• Obećavanje aplikacije za App Store koju ne možete isporučiti. Ako je prodavnica bitna, planirajte je zasebno.
• Umotavanje sajta i nazivanje aplikacijom. Appleova pravila za pregled aplikacija traže aplikacije koje idu dalje od ponovo upakovane web stranice; tanak omotač nosi rizik odbijanja.

Kada vam treba nativna aplikacija

Pređite na nativnu (ili planirajte nativnu verziju nakon web aplikacije) kada:

• Prisustvo u prodavnici je način na koji će vas kupci naći.
• Oslanjate se na lokaciju u pozadini, Bluetooth, zdravstvene podatke, vidžete ili druge funkcije uređaja koje pregledači ne nude pouzdano.
• Vaša aplikacija mora da radi potpuno van mreže duže vrijeme.
• Vaši korisnici to očekuju — neke publike jednostavno neće koristiti ništa što nije u prodavnici.

Objavljivanje u prodavnici ima svoje troškove i korake. Od septembra 2026, Appleov program za developere košta 99 USD godišnje, a račun za Google Play jednokratnih 25 USD, prema njihovim vlastitim sajtovima, a svako izdanje prolazi pregled. Mnogi timovi počinju s web aplikacijom prilagođenom telefonu da dokažu da ljudi žele proizvod, pa tek onda ulažu u nativnu. Kako napraviti aplikaciju uz AI pokriva tu prvu fazu od početka do kraja.

Izrada uz Mythex

Mythex pravi web aplikacije: opišete aplikaciju u chatu i provjeravate je u živom pregledu na desktopu i u okviru veličine telefona koji možete mijenjati. Dokumentacija ima prompt za responzivnost za popravku rasporeda na malim ekranima. Možete tražiti PWA manifest i ikone kao i svaku drugu funkciju, zatim objaviti javni link koji radi na bilo kom telefonu. Na Pro planu Mythex može i da pretvori aplikaciju u Android i iPhone aplikaciju, poslatu na interno testiranje u Google Play i TestFlight. Za početak pogledajte AI builder web aplikacija ili pregledajte šablone aplikacija. Za primjer u praksi, pročitajte kako napraviti aplikaciju za praćenje navika.

Pitanja