Kako napraviti veb aplikaciju prilagođenu telefonu

Veb aplikacija prilagođena telefonu je sajt koji radi kao aplikacija na telefonu: staje u uzak ekran, ima velike dodirne površine, brzo se učitava na mobilnim podacima i može da se doda na početni ekran kao progresivna veb aplikacija (PWA). Za većinu novih aplikacija to je praktična prva verzija — jedna kodna baza, jedan link, bez provere u prodavnici. Ima ipak prava ograničenja, naročito oko obaveštenja na iPhone-u i dubokog pristupa uređaju, a ovaj vodič iskreno kaže kada su vam potrebne nativne aplikacije.

Tri načina da budete „na mobilnom“

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

Šta veb aplikacije mogu i ne mogu na telefonima

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

• Kamera i otpremanje fotografija, preko standardnih ulaza za fajlove.
• Lokacija, uz dozvolu korisnika.
• Instalacija na početni ekran sa ikonicom i pokretanjem preko celog ekrana.
• Rad bez interneta, keširanjem stranica i podataka uz service worker (pozadinsku skriptu koju pregledač pokreće za vaš sajt).
• Push obaveštenja — uz zamku na iPhone-u. Apple-ov WebKit tim kaže da su web push obaveštenja stigla na iOS i iPadOS 16.4 za veb aplikacije dodate na početni ekran. Korisnici moraju prvo da instaliraju aplikaciju, pa da dozvole obaveštenja.

Gde nativne aplikacije i dalje pobeđuju:

• Duboke funkcije uređaja, kao što su lokacija u pozadini, Bluetooth uređaji, zdravstveni podaci i vidžeti na početnom ekranu — podrška u pregledaču je ograničena ili se razlikuje od platforme do platforme.
• Otkrivanje u App Store-u. Ako vas ljudi traže u prodavnici, morate biti tamo.
• Zahtevan rad bez interneta, poput sinhronizacije velikih skupova podataka u pozadini.
• Grafika zahtevna za performanse, poput zahtevnih igara.

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

Dizajn prvo za telefone

Dizajnirajte raspored za telefon prvo i neka se širi za veće ekrane; obrnuto obično daje stisnute ekrane na telefonu.

Raspored

• Jedna kolona na malim ekranima. Bočne trake postaju donja traka ili meni.
• Bez horizontalnog skrolovanja. Široke tabele postaju kartice ili se skroluju unutar sopstvenog kontejnera.
• Čitljiv tekst bez uvećavanja — osnovni tekst otprilike 16px.

Dodir

• Velike dodirne površine. Oko 44 × 44 piksela je uobičajen minimum. Ostavite prostor između njih.
• Glavne radnje dohvatljive palcem, blizu donje ivice ekrana na visokim telefonima.
• Nema funkcija koje rade samo na prelasku mišem. Oblački sa savetima i meniji koji se pojavljuju na hover ne postoje na ekranima osetljivim na dodir.
• Prava tastatura. Polja za e-poštu treba da otvore tastaturu za e-poštu, a polja za telefon brojčanik. Tražite ispravne tipove unosa.

Brzina

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

Bezbedne zone i adresna traka

Na modernim telefonima sadržaj može da završi ispod useka ili donje linije, naročito u instaliranoj aplikaciji preko celog ekrana. Tražite padding za bezbednu zonu. Pazite i na izgled preko cele visine koji skače dok se adresna traka pregledača pojavljuje i nestaje.

Pravljenje instalabilne aplikacije (PWA)

Da bi se veb aplikacija mogla instalirati, potrebno je:

1. Manifest veb aplikacije — mali fajl sa imenom aplikacije, kratkim imenom, ikonicama, bojom teme i načinom otvaranja (obično preko celog ekrana, „standalone“).
2. Ikone u veličinama koje platforme očekuju, uključujući jednu prikladnu za Apple uređaje.
3. HTTPS, koji već ima svaka ispravno hostovana aplikacija.
4. Service worker ako želite podršku za rad bez interneta ili push.

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

Podrška za rad bez interneta je mesto gde PWA postaju složene. Keširanje stranica aplikacije da se otvori bez veze je jednostavno. Dozvoljavanje da ljudi menjaju podatke bez veze i da se sinhronizuju kasnije je pravi posao — tražite to samo ako korisnicima zaista treba.

Prvi prompt koji radi

Napravi veb aplikaciju za naš tim za čišćenje da vidi današnje poslove i označi ih kao završene. Dizajniraj prvo za telefone: jedna kolona, velike dodirne površine, glavno dugme fiksirano blizu donje ivice, bez kontrola koje rade samo na prelasku mišem, bez horizontalnog skrolovanja i ispravne tastature za polja za telefon i e-poštu. Svaki posao prikazuje adresu (dodir otvara mapu), telefon klijenta (dodir zove), kontrolnu listu i dugme „Označi kao završeno“ koje može da prihvati fotografiju. Menadžeri se prijavljuju na laptopu da dodele poslove; na širokom ekranu prikaži tabelu umesto kartica. Napravi instalabilnu PWA sa 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 probnim podacima i proverite ga u pregledu veličine telefona.
2. Testirajte na pravim telefonima — bar jedan iPhone i jedan Android ako vaši korisnici koriste oba. Emulatori previde stvari poput toga da tastatura na ekranu prekriva polja za unos.
3. Prođite glavni zadatak jednim palcem. Ako nešto zahteva dve ruke ili uvećavanje, popravite to.
4. Dodajte manifest i ikone, pa instalirajte aplikaciju na obe platforme i proverite ikonu, ime i ekran za pokretanje.
5. Odlučite o radu bez interneta. Počnite sa „otvara se bez signala i prikazuje jasnu poruku“; dodajte izmenu podataka bez veze samo ako je potrebno.
6. Proverite brzinu na sporoj vezi. Alatke za programere u pregledaču mogu da simuliraju sporu vezu.
7. Obaveštenja dodajte poslednja, ako uopšte — i predvidite rezervni način preko e-pošte za korisnike koji ne instaliraju aplikaciju.

Česte greške

• Dizajniranje samo na velikom monitoru. Proveravajte svaki ekran u širini telefona dok radite.
• Tabele koje izlaze iz okvira. Na malim ekranima pretvorite redove u kartice.
• Premala dodirna polja i linkovi blizu jedan drugom.
• Obrasci koji se bore sa 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četnom ekranu.
• Obećavanje aplikacije u App Store-u koju ne možete da isporučite. Ako je prodavnica važna, planirajte je zasebno.
• Prepakivanje sajta i nazivanje toga aplikacijom. Appleova pravila za proveru traže aplikacije koje idu dalje od prepakovanog sajta; tanak omotač nosi rizik odbijanja.

Kada su vam potrebne nativne aplikacije

Idite na nativnu aplikaciju (ili planirajte nativnu verziju posle veb aplikacije) kada:

• su vam prodavnice način da vas korisnici pronađu;
• zavisite od lokacije u pozadini, Bluetooth-a, zdravstvenih podataka, vidžeta ili drugih funkcija uređaja koje pregledači ne nude pouzdano;
• aplikacija mora da radi potpuno bez interneta duže vreme;
• 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 Google Play nalog za developere jednokratnih 25 USD, prema njihovim sopstvenim sajtovima, i svako izdanje prolazi proveru. Mnogi timovi počinju sa veb aplikacijom prilagođenom telefonu da bi dokazali 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 veb aplikacije: opišete aplikaciju u chatu i proverite je u živom pregledu na desktopu i u okviru veličine telefona koji možete da promenite. Dokumentacija ima prompt za prilagođavanje telefonu za popravljanje rasporeda na malim ekranima. Možete zatražiti PWA manifest i ikone kao i svaku drugu funkciju, zatim objaviti javni link koji radi na svakom telefonu. U Pro planu Mythex može i da pakuje aplikaciju kao Android i iPhone aplikaciju, koja se šalje na interno testiranje u Google Play i TestFlight. Pogledajte AI alat za veb aplikacije ili razgledajte šablone aplikacija za početak. Za primer koji je urađen do kraja, pročitajte kako napraviti aplikaciju za praćenje navika.

Pitanja