Com crear una aplicació web adaptada al mòbil

Una aplicació web adaptada al mòbil és un lloc web que funciona com una app al telèfon: s'ajusta a la pantalla estreta, té elements tàctils grans, carrega ràpid amb dades mòbils i es pot afegir a la pantalla d'inici com a aplicació web progressiva (PWA). Per a la majoria de noves apps, aquesta és la primera versió pràctica: un sol codi, un sol enllaç, sense revisió de botiga. Tot i així, té límits reals, sobretot pel que fa a les notificacions a l'iPhone i l'accés profund als dispositius, i aquesta guia és clara sobre quan cal una app nativa.

Tres maneres d'estar «al mòbil»

Una PWA és una aplicació web adaptativa amb alguns extres, així que no cal triar entre les dues primeres. Construeix primer l'adaptativa i després fes-la instal·lable. Per a una comparació més detallada, consulta aplicacions web natives vs progressives.

Què poden i què no poden fer les aplicacions web al mòbil

Els navegadors poden fer més del que molta gent suposa:

• Càmera i pujada de fotos, mitjançant els camps de fitxer estàndard.
• Ubicació, amb el permís de l'usuari.
• Instal·lació a la pantalla d'inici amb icona i obertura a pantalla completa.
• Ús sense connexió, guardant pàgines i dades a la memòria cau amb un service worker (un script de fons que el navegador executa per al teu lloc).
• Notificacions push, amb una advertència a l'iPhone. Apple, segons l'equip de WebKit, va introduir les notificacions web a iOS i iPadOS 16.4 per a les aplicacions web afegides a la pantalla d'inici. Els usuaris han d'instal·lar primer l'aplicació i després permetre les notificacions.

On el natiu continua guanyant:

• Funcions profundes del dispositiu, com la ubicació en segon pla, els accessoris Bluetooth, les dades de salut o els widgets de la pantalla d'inici. El suport al navegador és limitat o varia segons la plataforma.
• Descobriment a l'App Store. Si la gent buscarà la teva app a la botiga, has d'estar-hi.
• Treball intensiu sense connexió, com la sincronització en segon pla de grans volums de dades.
• Gràfics crítics per al rendiment, com els jocs exigents.

Si cap d'aquestes coses és central per a la teva app, és probable que una aplicació web et serveixi bé.

Dissenyar primer per als telèfons

Dissenya primer la versió per al telèfon i deixa que s'expandeixi per a pantalles més grans; el contrari sol produir pantalles de telèfon atapeïdes.

Disseny

• Una sola columna a les pantalles petites. Les barres laterals es converteixen en una barra inferior o en un menú.
• Sense desplaçament lateral. Les taules amples es converteixen en targetes o es desplacen dins del seu propi contenidor.
• Text llegible sense haver de fer zoom: el text principal al voltant de 16 px.

Tàctil

• Àrees de toc grans. Al voltant de 44 per 44 píxels és un mínim habitual. Deixa espai entre elles.
• Accions principals a l'abast del polze, a prop de la part inferior de la pantalla en els telèfons alts.
• Sense funcions que només funcionin amb el ratolí. Les descripcions emergents i els menús que apareixen en passar el cursor no existeixen en les pantalles tàctils.
• El teclat adequat. Els camps de correu han d'obrir el teclat de correu, i els de telèfon el teclat numèric. Demana els tipus d'entrada correctes.

Velocitat

• Imatges petites a mides raonables, carregades quan entren a la vista.
• Menys biblioteques pesades. Cada una afegeix temps de descàrrega amb dades mòbils.
• Pantalles d'esquelet o estats de càrrega clars, perquè l'app no sembli bloquejada mai.

Àrees segures i la barra d'adreces

Als telèfons moderns, el contingut pot quedar sota l'entalla o l'indicador d'inici, sobretot en una app instal·lada a pantalla completa. Demana un espaiat de zona segura. Vigila també els dissenys d'alçada completa que salten quan la barra d'adreces del navegador apareix i desapareix.

Fer-la instal·lable (PWA)

Perquè una aplicació web es pugui instal·lar, necessita:

1. Un manifest d'aplicació web: un petit fitxer amb el nom de l'app, el nom curt, les icones, el color del tema i com s'ha d'obrir (normalment a pantalla completa, «standalone»).
2. Icones en les mides que esperen les plataformes, inclosa una adequada per als dispositius Apple.
3. HTTPS, que qualsevol aplicació allotjada correctament ja té.
4. Un service worker si vols suport sense connexió o notificacions push.

Després, explica als usuaris com instal·lar-la. Els navegadors d'Android solen oferir una sol·licitud d'instal·lació o una opció de menú; a l'iPhone és el botó Compartir i després «Afegeix a la pantalla d'inici». Una nota curta «Instal·la aquesta app» amb aquests passos ajuda molt.

El suport sense connexió és on les PWA es compliquen. Guardar a la memòria cau les pàgines de l'app perquè s'obri sense connexió és senzill. Deixar que la gent canviï dades sense connexió i les sincronitzi després és feina real: demana-ho només si els teus usuaris ho necessiten de debò.

Un primer prompt que funciona

Crea una aplicació web perquè el nostre equip de neteja vegi les feines d'avui i les marqui com a fetes. Dissenya primer per als telèfons: una sola columna, àrees de toc grans, el botó d'acció principal fixat a prop de la part inferior, sense controls que només funcionin amb el cursor, sense desplaçament lateral i amb el teclat correcte per als camps de telèfon i de correu. Cada feina mostra l'adreça (en tocar, obre el mapa), el telèfon del client (en tocar, truca), una llista de comprovació i un botó «Marca com a completada» que pot fer una foto. Els responsables inicien sessió en un ordinador portàtil per assignar feines; en una pantalla ampla, mostra una taula en lloc de targetes. Fes-la una PWA instal·lable amb manifest, icones i visualització standalone, i guarda a la memòria cau la base de l'app perquè s'obri sense cobertura. Desa les dades en una base de dades.

Passos de construcció

1. Construeix primer el disseny per al telèfon, amb dades de mostra, i revisa'l en una vista prèvia de mida de telèfon.
2. Prova-la en telèfons reals: almenys un iPhone i un Android si els teus usuaris en tenen de tots dos. Els emuladors no detecten coses com el teclat en pantalla que tapa els camps.
3. Fes la tasca principal amb un sol polze. Si alguna cosa necessita dues mans o fer zoom, corregeix-la.
4. Afegeix el manifest i les icones i instal·la-la a les dues plataformes per revisar la icona, el nom i la pantalla de càrrega.
5. Decideix sobre el mode sense connexió. Comença amb «s'obre sense cobertura i mostra un missatge clar»; afegeix l'edició sense connexió només si cal.
6. Comprova la velocitat amb una connexió lenta. Les eines de desenvolupador del navegador poden simular-la.
7. Afegeix les notificacions al final, si és que les afegeixes, i preveu una alternativa per correu per als usuaris que no instal·lin l'app.

Errors habituals

• Dissenyar només en un monitor gran. Revisa cada pantalla a l'amplada del telèfon mentre avances.
• Taules que es desbordin. Converteix les files en targetes a les pantalles petites.
• Àrees de toc petites i enllaços molt junts.
• Formularis que lluiten contra el teclat: tipus d'entrada incorrectes, camps amagats darrere el teclat, sense flux de «següent».
• Suposar que les notificacions push de l'iPhone funcionen en una pestanya del navegador. Cal que l'app estigui instal·lada a la pantalla d'inici.
• Prometre una app de l'App Store que no pots publicar. Si la botiga és important, planifica-la per separat.
• Empaquetar un lloc web i dir que és una app. Les directrius de revisió d'apps d'Apple demanen apps que vagin més enllà d'un lloc web reempaquetat; un embolcall fi corre el risc de ser rebutjat.

Quan cal una app nativa

Vés cap al natiu (o planifica una versió nativa després de l'aplicació web) quan:

• La presència a la botiga és com et trobaran els clients.
• Depens de la ubicació en segon pla, del Bluetooth, de les dades de salut, dels widgets o d'altres funcions del dispositiu que els navegadors no ofereixen de manera fiable.
• La teva app ha de funcionar completament sense connexió durant llargs períodes.
• Els teus usuaris ho esperen: alguns públics simplement no utilitzaran res que no estigui a la botiga.

Publicar a la botiga té els seus propis costos i passos. A setembre de 2026, el programa de desenvolupador d'Apple costa 99 US$ a l'any i un compte de desenvolupador de Google Play un pagament únic de 25 US$, segons els seus propis llocs, i cada versió passa per revisió. Molts equips comencen amb una aplicació web adaptada al mòbil per demostrar que la gent vol el producte, i després inverteixen en el natiu quan ja ho saben. Com crear una app amb IA cobreix aquesta primera etapa de principi a fi.

Construir-ho amb Mythex

Mythex construeix aplicacions web: descrius l'app al xat i la revises a la vista prèvia en directe a l'escriptori i en un marc de mida de telèfon que pots redimensionar. La documentació té un prompt per a l'adaptació al mòbil per corregir els dissenys de pantalla petita. Pots demanar un manifest de PWA i icones com qualsevol altra funció, i després publicar-la en un enllaç públic que funcioni a qualsevol telèfon. Al pla Pro, Mythex també pot empaquetar l'app com a app d'Android i iPhone, enviada a les proves internes de Google Play i a TestFlight. Consulta el constructor d'aplicacions web amb IA o explora les plantilles d'apps per començar. Per a un exemple pràctic, llegeix com crear una app de seguiment d'hàbits.

Preguntes