Cum construiești o aplicație web adaptată telefonului

O aplicație web adaptată telefonului este un site care funcționează ca o aplicație pe telefon: se potrivește ecranului îngust, are butoane mari pentru atingere, se încarcă rapid pe date mobile și poate fi adăugată pe ecranul de start ca aplicație web progresivă (PWA). Pentru majoritatea aplicațiilor noi, aceasta este versiunea practică de început — o singură bază de cod, un singur link, fără verificare în magazin. Are totuși limite reale, mai ales în privința notificărilor pe iPhone și a accesului profund la dispozitiv, iar acest ghid este direct în privința momentului în care ai nevoie de o aplicație nativă.

Trei moduri de a fi „pe mobil”

O PWA este o aplicație web responsive cu câteva extra, deci nu trebuie să alegi între primele două. Construiește mai întâi responsive, apoi fă-o instalabilă. Pentru o comparație mai detaliată, vezi aplicații web native vs. progresive.

Ce pot și ce nu pot aplicațiile web pe telefon

Browserele pot mai mult decât cred mulți oameni:

• Cameră și încărcarea fotografiilor, prin câmpuri standard de fișiere.
• Locație, cu permisiunea utilizatorului.
• Instalare pe ecranul de start cu o pictogramă și lansare pe tot ecranul.
• Utilizare offline, prin memorarea în cache a paginilor și datelor cu un service worker (un script de fundal pe care browserul îl rulează pentru site-ul tău).
• Notificări push — cu o captură pe iPhone. Echipa WebKit de la Apple spune că notificările web au ajuns pe iOS și iPadOS 16.4 pentru aplicațiile web adăugate pe ecranul de start. Utilizatorii trebuie să instaleze mai întâi aplicația, apoi să permită notificările.

Unde nativul încă învinge:

• Funcții profunde ale dispozitivului, precum localizarea în fundal, accesoriile Bluetooth, datele de sănătate sau widgeturile de pe ecranul de start — suportul din browser este limitat sau variază între platforme.
• Descoperirea în App Store. Dacă oamenii vor căuta aplicația în magazin, trebuie să fii acolo.
• Lucru offline intens, cum ar fi seturi mari de date sincronizate în fundal.
• Grafică sensibilă la performanță, cum ar fi jocurile solicitante.

Dacă niciuna dintre acestea nu este centrală pentru aplicația ta, o aplicație web îți va fi probabil de folos.

Design gândit mai întâi pentru telefon

Proiectează mai întâi layoutul pentru telefon și lasă-l să se extindă pentru ecrane mai mari; invers, rezultatul este de obicei ecrane de telefon înghesuite.

Layout

• O singură coloană pe ecrane mici. Barele laterale devin o bară de jos sau un meniu.
• Fără derulare laterală. Tabelele late devin carduri sau derulează în propriul lor container.
• Text lizibil fără zoom — textul principal în jur de 16 px.

Atingere

• Zone mari de atingere. În jur de 44 pe 44 de pixeli este un minim obișnuit. Lasă spațiu între ele.
• Acțiunile principale la îndemâna degetului mare, aproape de partea de jos a ecranului, pe telefoanele înalte.
• Fără funcții care există doar la hover. Tooltipurile și meniurile care apar la trecerea cursorului nu există pe ecranele tactile.
• Tastatura potrivită. Câmpurile de e-mail ar trebui să deschidă tastatura pentru e-mail, cele de telefon tastatura numerică. Cere tipurile corecte de input.

Viteză

• Imagini mici, la dimensiuni rezonabile, încărcate pe măsură ce intră în ecran.
• Mai puține biblioteci grele. Fiecare adaugă timp de descărcare pe date mobile.
• Ecrane schelet sau stări clare de încărcare, ca aplicația să nu pară niciodată blocată.

Zone sigure și bara de adrese

Pe telefoanele moderne, conținutul poate ajunge sub decupajul ecranului sau sub indicatorul de pe bara de jos, mai ales într-o aplicație instalată pe tot ecranul. Cere padding pentru zonele sigure. Urmărește și layouturile de înălțime completă care sar atunci când bara de adrese a browserului apare și dispare.

Face instalabilă (PWA)

Ca să fie instalabilă, o aplicație web are nevoie de:

1. Un manifest de aplicație web — un fișier mic cu numele aplicației, numele scurt, pictogramele, culoarea temei și modul de deschidere (de obicei pe tot ecranul, „standalone”).
2. Pictograme în dimensiunile așteptate de platforme, inclusiv una potrivită pentru dispozitivele Apple.
3. HTTPS, pe care orice site găzduit corect îl are deja.
4. Un service worker dacă vrei suport offline sau push.

Apoi spune utilizatorilor cum să instaleze. Browserele Android oferă de obicei un prompt de instalare sau un element de meniu; pe iPhone se folosește butonul Partajare, apoi „Adaugă pe ecranul de start”. O scurtă notă „Instalează această aplicație” cu acești pași ajută mult.

Suportul offline este locul unde PWA-urile devin complicate. Memorarea în cache a paginilor aplicației, ca să se deschidă fără conexiune, este simplă. Lăsarea oamenilor să modifice date offline și să le sincronizeze mai târziu este muncă reală — cere-o doar dacă utilizatorii tăi chiar au nevoie.

Un prim prompt care funcționează

Construiește o aplicație web pentru echipa noastră de curățenie, ca să vadă joburile zilei și să le marcheze ca terminate. Proiectează întâi pentru telefon: o singură coloană, zone mari de atingere, butonul principal de acțiune fixat aproape de partea de jos, fără controale care apar doar la hover, fără derulare laterală și tastaturi corecte pentru câmpurile de telefon și e-mail. Fiecare job afișează adresa (atinge pentru a deschide în hărți), telefonul clientului (atinge pentru a apela), o listă de verificare și un buton „Marchează ca terminat” care poate face o fotografie. Managerii se autentifică pe laptop ca să atribuie joburile; pe un ecran larg, afișează un tabel în loc de carduri. Fă-o un PWA instalabil, cu manifest, pictograme și afișare standalone, și memorează în cache scheletul aplicației, ca să se deschidă fără semnal. Salvează datele într-o bază de date.

Pașii de construcție

1. Construiește mai întâi layoutul pentru telefon, cu date de probă, și verifică-l într-o previzualizare de dimensiunea unui telefon.
2. Testează pe telefoane reale — cel puțin un iPhone și un Android, dacă utilizatorii tăi au ambele. Emulatoarele ratează lucruri precum tastatura de pe ecran care acoperă câmpurile.
3. Parcurge sarcina principală cu un deget. Dacă ceva cere ambele mâini sau zoom, repară-l.
4. Adaugă manifestul și pictogramele, apoi instalează aplicația pe ambele platforme și verifică pictograma, numele și ecranul de pornire.
5. Decide despre offline. Începe cu „se deschide fără semnal și afișează un mesaj clar”; adaugă editare offline doar dacă este necesară.
6. Verifică viteza pe o conexiune lentă. Instrumentele de dezvoltator ale browserului pot simula una.
7. Adaugă notificările la final, dacă le adaugi — și planifică o alternativă prin e-mail pentru utilizatorii care nu instalează aplicația.

Greșeli frecvente

• Proiectarea doar pe un monitor mare. Verifică fiecare ecran la lățimea unui telefon pe măsură ce lucrezi.
• Tabele care depășesc ecranul. Transformă rândurile în carduri pe ecrane mici.
• Zone de atingere mici și linkuri apropiate.
• Formulare care se luptă cu tastatura — tipuri greșite de input, câmpuri ascunse în spatele tastaturii, fără un flux de tip „următorul”.
• Presupunerea că notificările push pe iPhone funcționează în tabul browserului. Au nevoie de aplicația instalată pe ecranul de start.
• Promisiunea unei aplicații pentru App Store pe care nu o poți livra. Dacă magazinul contează, planifică-l separat.
• Împachetarea unui site web și numirea lui aplicație. Ghidurile App Review ale Apple cer aplicații care depășesc un site reambalat; un container subțire riscă respingerea.

Când ai nevoie de o aplicație nativă

Treci la nativ (sau planifică o versiune nativă după aplicația web) când:

• Prezența în magazin este modul prin care clienții te vor găsi.
• Te bazezi pe localizare în fundal, Bluetooth, date de sănătate, widgeturi sau alte funcții ale dispozitivului pe care browserele nu le oferă sigur.
• Aplicația ta trebuie să funcționeze complet offline perioade lungi.
• Utilizatorii tăi o așteaptă — unele audiențe pur și simplu nu vor folosi nimic care nu este în magazin.

Publicarea în magazin are costurile și pașii ei. Începând cu septembrie 2026, programul de dezvoltator Apple costă 99 USD pe an, iar un cont de dezvoltator Google Play 25 USD o singură dată, potrivit propriilor site-uri, iar fiecare lansare trece prin verificare. Multe echipe încep cu o aplicație web adaptată telefonului pentru a dovedi că oamenii vor produsul, apoi investesc în nativ după ce știu asta. Cum construiești o aplicație cu AI acoperă de la cap la coadă această primă etapă.

Construirea cu Mythex

Mythex construiește aplicații web: descrii aplicația în chat și o verifici în previzualizarea live pe desktop și într-un cadru de dimensiunea unui telefon pe care îl poți redimensiona. Documentația are un prompt pentru responsive pe mobil pentru corectarea layouturilor pe ecrane mici. Poți cere un manifest PWA și pictograme ca orice altă funcție, apoi publici într-un link public care funcționează pe orice telefon. În planul Pro, Mythex poate împacheta și aplicația ca aplicație Android și iPhone, trimisă la testarea internă Google Play și la TestFlight. Vezi constructorul de aplicații web cu AI sau răsfoiește șabloanele de aplicații ca să începi. Pentru un exemplu concret, citește cum construiești o aplicație de urmărire a obiceiurilor.

Întrebări