Ako vytvoriť webovú aplikáciu prispôsobenú na mobil

Webová aplikácia prispôsobená na mobil je web, ktorý funguje ako aplikácia na telefóne: zmestí sa na úzku obrazovku, má veľké plochy na dotyk, načítava sa rýchlo na mobilných dátach a dá sa pridať na domovskú obrazovku ako progresívna webová aplikácia (PWA). Pre väčšinu nových aplikácií je to praktická prvá verzia — jeden kód, jeden odkaz, žiadne schvaľovanie v obchode. Má však reálne limity, najmä pri notifikáciách na iPhone a pri hlbokom prístupe k zariadeniu, a tento sprievodca je otvorený v tom, kedy potrebujete natívnu aplikáciu.

Tri spôsoby, ako byť „na mobile“

PWA je responzívna webová aplikácia s niekoľkými doplnkami, takže nemusíte voliť medzi prvými dvoma. Najprv urobte responzívnu verziu, potom ju sprístupnite na inštaláciu. Podrobnejšie porovnanie nájdete v článku natívne verzus progresívne webové aplikácie.

Čo webové aplikácie dokážu a nedokážu na telefónoch

Prehliadače dokážu viac, než si mnohí myslia:

• Fotoaparát a nahrávanie fotiek cez štandardné vstupy pre súbory.
• Poloha so súhlasom používateľa.
• Inštalácia na domovskú obrazovku s ikonou a spustením na celú obrazovku.
• Používanie offline ukladaním stránok a dát do pamäte cez service worker (skript na pozadí, ktorý prehliadač spúšťa pre váš web).
• Push notifikácie — s háčikom na iPhone. Tím WebKit od Apple uvádza, že webové push notifikácie prišli na iOS a iPadOS 16.4 pre webové aplikácie pridané na domovskú obrazovku. Používatelia musia najprv aplikáciu nainštalovať a potom povoliť notifikácie.

Kde natívne riešenie stále vyhráva:

• Hlboké funkcie zariadenia ako poloha na pozadí, Bluetooth príslušenstvo, zdravotné údaje a widgety na domovskej obrazovke — podpora v prehliadači je obmedzená alebo sa líši podľa platformy.
• Objavovanie v App Store. Ak ľudia budú v obchode hľadať vás, musíte tam byť.
• Náročná práca offline, napríklad synchronizácia veľkých dát na pozadí.
• Grafika náročná na výkon, napríklad zložité hry.

Ak nič z toho nie je pre vašu aplikáciu ústredné, webová aplikácia vám bude pravdepodobne vyhovovať.

Navrhovanie najprv pre telefóny

Navrhnite rozloženie pre telefón najprv a na väčšie obrazovky ho rozširujte; opačný postup zvyčajne vytvára stiesnené obrazovky na telefónoch.

Rozloženie

• Jeden stĺpec na malých obrazovkách. Bočné panely sa zmenia na spodnú lištu alebo ponuku.
• Žiadne horizontálne posúvanie. Široké tabuľky sa zmenia na karty alebo sa posúvajú vo vlastnom kontajneri.
• Čitateľný text bez priblíženia — základný text okolo 16 px.

Dotyk

• Veľké plochy na klepnutie. Ako minimum sa bežne berie okolo 44 × 44 pixelov. Medzi nimi nechajte medzeru.
• Hlavné akcie v dosahu palca, na vysokých telefónoch blízko spodného okraja obrazovky.
• Žiadne funkcie, ktoré fungujú len na hover. Tooltipy a ponuky, ktoré sa objavia pri prejdení myšou, na dotykových obrazovkách neexistujú.
• Správna klávesnica. Polia pre e-mail majú vyvolať klávesnicu pre e-mail, polia pre telefón číselnú klávesnicu. Vyžiadajte správne typy vstupov.

Rýchlosť

• Malé obrázky vo vhodných veľkostiach, načítané až vtedy, keď sa dostanú do zobrazenia.
• Menej ťažkých knižníc. Každá pridáva čas sťahovania na mobilných dátach.
• Kostry obrazoviek alebo jasné stavy načítavania, aby aplikácia nikdy nevyzerala zamrznutá.

Bezpečné oblasti a adresný riadok

Na moderných telefónoch sa môže obsah dostať pod výrez alebo spodnú indikáciu, najmä v celoobrazovkovej nainštalovanej aplikácii. Vyžiadajte si odsadenie pre bezpečné oblasti. Dávajte pozor aj na rozloženia s plnou výškou, ktoré poskakujú, keď sa v prehliadači objaví a zmizne adresný riadok.

Vytvorenie inštalovateľnej aplikácie (PWA)

Aby bola webová aplikácia inštalovateľná, potrebuje:

1. Webový manifest — malý súbor s názvom aplikácie, krátkym názvom, ikonami, farbou témy a spôsobom otvorenia (zvyčajne na celú obrazovku, „standalone“).
2. Ikony vo veľkostiach, ktoré platformy očakávajú, vrátane ikony vhodnej pre zariadenia Apple.
3. HTTPS, ktoré už má každá správne hostovaná aplikácia.
4. Service worker, ak chcete podporu offline alebo push.

Potom používateľom vysvetlite, ako aplikáciu nainštalovať. Android prehliadače zvyčajne ponúknu výzvu na inštaláciu alebo položku v ponuke; na iPhone je to tlačidlo Zdieľať a potom „Pridať na domovskú obrazovku“. Krátka poznámka „Nainštalujte si túto aplikáciu“ s týmito krokmi veľmi pomáha.

Podpora offline je miesto, kde sa PWA komplikujú. Uloženie stránok aplikácie tak, aby sa otvorila bez pripojenia, je jednoduché. Umožniť ľuďom meniť dáta offline a neskôr ich synchronizovať je skutočná práca — žiadajte ju, iba ak ju vaši používatelia naozaj potrebujú.

Prvý prompt, ktorý funguje

Vytvor webovú aplikáciu pre náš tím upratovateľov, aby videli dnešné úlohy a mohli ich označiť ako hotové. Navrhni najprv pre telefóny: jeden stĺpec, veľké plochy na klepnutie, hlavné tlačidlo akcie pevne pri spodnom okraji, žiadne ovládanie fungujúce len na hover, žiadne horizontálne posúvanie a správne klávesnice pre polia telefónu a e-mailu. Každá úloha ukazuje adresu (klepnutím sa otvorí v mapách), telefón klienta (klepnutím sa zavolá), kontrolný zoznam a tlačidlo „Označiť ako hotové“, ktoré dokáže pridať fotku. Manažéri sa prihlásia na notebooku, aby priraďovali úlohy; na širokej obrazovke zobraz tabuľku namiesto kariet. Urob z toho inštalovateľné PWA s manifestom, ikonami a režimom standalone a ulož štruktúru aplikácie do vyrovnávacej pamäte, aby sa otvorila aj bez signálu. Dáta ukladaj do databázy.

Kroky stavby

1. Najprv postavte rozloženie pre telefón na ukážkových dátach a skontrolujte ho v náhľade vo veľkosti telefónu.
2. Testujte na skutočných telefónoch — aspoň jeden iPhone a jeden Android, ak majú vaši používatelia oboje. Emulátory niečo prehliadnu, napríklad to, že klávesnica na obrazovke zakrýva vstupy.
3. Prejdite hlavnú úlohu jedným palcom. Ak niečo vyžaduje obe ruky alebo priblíženie, opravte to.
4. Pridajte manifest a ikony, potom aplikáciu nainštalujte na obe platformy a skontrolujte ikonu, názov a úvodnú obrazovku.
5. Rozhodnite o režime offline. Začnite s „otvorí sa bez signálu a zobrazí jasnú správu“; úpravy offline pridajte, iba ak sú potrebné.
6. Skontrolujte rýchlosť na pomalom pripojení. Vývojárske nástroje prehliadača ho dokážu simulovať.
7. Notifikácie pridajte nakoniec, ak vôbec — a pre používateľov, ktorí aplikáciu neinštalujú, si naplánujte náhradu e-mailom.

Časté chyby

• Navrhovanie iba na veľkom monitore. Kontrolujte každú obrazovku na šírke telefónu, ako pokračujete.
• Tabuľky, ktoré pretekajú. Na malých obrazovkách premeňte riadky na karty.
• Malé plochy na klepnutie a odkazy príliš blízko seba.
• Formuláre, ktoré bojujú s klávesnicou — nesprávne typy vstupov, polia zakryté klávesnicou, žiadny tok „ďalej“.
• Predpoklad, že push na iPhone funguje v karte prehliadača. Vyžaduje, aby bola aplikácia nainštalovaná na domovskú obrazovku.
• Sľubovať aplikáciu v App Store, ktorú nemôžete dodať. Ak na obchode záleží, naplánujte ju samostatne.
• Obaliť web a volať ho aplikáciou. Pravidlá Apple App Review žiadajú aplikácie, ktoré presahujú prebalený web; tenký obal riskuje zamietnutie.

Kedy potrebujete natívnu aplikáciu

Prejdite na natívnu verziu (alebo naplánujte natívnu verziu po webovej aplikácii), keď:

• Vás zákazníci nájdu práve cez obchod.
• Spoliehate sa na polohu na pozadí, Bluetooth, zdravotné údaje, widgety alebo iné funkcie zariadenia, ktoré prehliadače nespoľahlivo neponúkajú.
• Vaša aplikácia musí dlhší čas fungovať úplne offline.
• Vaši používatelia to očakávajú — niektoré publikum jednoducho nebude používať nič, čo nie je v obchode.

Publikovanie v obchodoch má vlastné náklady a kroky. Od septembra 2026 podľa vlastných stránok Apple stojí jej vývojársky program 99 USD ročne a účet Google Play jednorazovo 25 USD a každé vydanie prechádza schválením. Mnohé tímy začínajú s webovou aplikáciou prispôsobenou na mobil, aby overili, že ľudia chcú produkt, a až potom investujú do natívnej verzie. Ako vytvoriť aplikáciu pomocou AI pokrýva túto prvú fázu od začiatku do konca.

Vytvorenie s Mythex

Mythex vytvára webové aplikácie: aplikáciu opíšete v chate a skontrolujete ju v živom náhľade na počítači a v rámčeku s veľkosťou telefónu, ktorý môžete zmeniť. Dokumentácia obsahuje prompt pre responzívny dizajn pre mobil na opravu rozložení na malých obrazovkách. Manifest PWA a ikony si môžete pýtať ako každú inú funkciu a potom publikovať na verejný odkaz, ktorý funguje na ľubovoľnom telefóne. V pláne Pro môže Mythex obaliť aplikáciu ako aplikáciu pre Android a iPhone, odoslanú na interné testovanie v Google Play a na TestFlight. Na začiatok pozrite tvorcu webových aplikácií s AI alebo prehliadnite šablóny aplikácií. Praktický príklad nájdete v článku ako vytvoriť aplikáciu na sledovanie zvykov.

Otázky