Jak vytvořit webovou aplikaci přizpůsobenou mobilům

Webová aplikace přizpůsobená mobilům je web, který funguje jako aplikace v telefonu: vejde se na úzkou obrazovku, má velká dotyková tlačítka, načítá se rychle na mobilních datech a dá se přidat na plochu jako progresivní webová aplikace (PWA). Pro většinu nových aplikací je to praktická první verze — jeden kód, jeden odkaz, žádná kontrola v obchodě. Má ale skutečné limity, hlavně u notifikací na iPhonu a hlubokého přístupu k zařízení, a tento průvodce přímo říká, kdy potřebujete nativní aplikaci.

Tři způsoby, jak být „na mobilu“

PWA je responzivní webová aplikace s několika navíc, takže nemusíte volit mezi prvními dvěma. Nejdřív udělejte responzivní verzi, pak ji učiňte instalovatelnou. Podrobnější srovnání najdete v článku nativní vs. progresivní webové aplikace.

Co webové aplikace na telefonech umí a co ne

Prohlížeče dokážou víc, než si mnoho lidí myslí:

• Fotoaparát a nahrávání fotek přes standardní vstupy pro soubory.
• Poloha se souhlasem uživatele.
• Instalace na plochu s ikonou a spuštěním na celou obrazovku.
• Práce offline díky ukládání stránek a dat do mezipaměti pomocí service workeru (skript na pozadí, který prohlížeč spouští pro váš web).
• Push notifikace — s jedním háčkem na iPhonu. Tým WebKit od Applu uvádí, že webové push notifikace přišly na iOS a iPadOS 16.4 pro webové aplikace přidané na plochu. Uživatelé musí aplikaci nejdřív nainstalovat a pak povolit notifikace.

Kde nativní aplikace pořád vede:

• Hluboké funkce zařízení, jako je poloha na pozadí, Bluetooth příslušenství, zdravotní data nebo widgety na ploše — podpora v prohlížeči je omezená nebo se mezi platformami liší.
• Objevování v obchodě. Pokud vás lidé budou v obchodě hledat, musíte tam být.
• Náročná práce offline, například velké datové sady synchronizované na pozadí.
• Výkonná grafika, například náročné hry.

Pokud na žádné z těchto věcí nestojí vaše aplikace, webová aplikace vám pravděpodobně bude stačit.

Navrhování nejdřív pro telefony

Navrhujte nejdřív rozvržení pro telefon a nechte ho na větších obrazovkách růst; opačný postup obvykle vede k přeplněným mobilním obrazovkám.

Rozvržení

• Jeden sloupec na malých obrazovkách. Postranní panely se změní na spodní lištu nebo nabídku.
• Žádné vodorovné posouvání. Široké tabulky se změní na karty nebo se posouvají uvnitř vlastního kontejneru.
• Čitelný text bez zvětšování — základní text kolem 16 px.

Dotek

• Velké plochy pro klepnutí. Běžné minimum je zhruba 44 × 44 pixelů. Mezi nimi nechte mezeru.
• Hlavní akce v dosahu palce, na vysokých telefonech blízko dolního okraje.
• Žádné funkce jen na najetí myší. Bubliny a nabídky, které se objeví po najetí, na dotykových obrazovkách neexistují.
• Správná klávesnice. Pole pro e-mail má vyvolat klávesnici pro e-mail, pole pro telefon číselník. Vyžádejte správné typy vstupů.

Rychlost

• Malé obrázky rozumných velikostí, načítané až když se objeví na obrazovce.
• Méně těžkých knihoven. Každá přidává čas stahování na mobilních datech.
• Kostry obrazovek nebo jasné stavy načítání, aby aplikace nikdy nevypadala jako zamrzlá.

Bezpečné oblasti a adresní řádek

Na moderních telefonech se obsah může dostat pod výřez nebo spodní indikátor, zvlášť v celoobrazovkové nainstalované aplikaci. Vyžádejte si odsazení pro bezpečnou oblast. Dávejte pozor i na rozvržení na plnou výšku, které poskakuje, když se v prohlížeči objeví a zmizí adresní řádek.

Instalovatelnost (PWA)

Aby šla webová aplikace nainstalovat, potřebuje:

1. Manifest webové aplikace — malý soubor s názvem aplikace, krátkým názvem, ikonami, barvou motivu a způsobem otevření (obvykle celá obrazovka, „standalone“).
2. Ikony ve velikostech, které platformy očekávají, včetně ikony vhodné pro zařízení Apple.
3. HTTPS, které každá řádně hostovaná aplikace už má.
4. Service worker, pokud chcete podporu práce offline nebo push.

Pak uživatelům řekněte, jak ji nainstalovat. Android prohlížeče obvykle nabídnou výzvu k instalaci nebo položku v menu; na iPhonu jde o tlačítko Sdílet a potom „Přidat na plochu“. Krátká poznámka „Nainstalujte si tuto aplikaci“ s těmito kroky hodně pomůže.

Práce offline je místo, kde se PWA komplikují. Uložit stránky aplikace do mezipaměti, aby se otevřela bez připojení, je přímočaré. Umožnit lidem měnit data offline a později je synchronizovat je skutečná práce — žádejte to jen tehdy, když to vaši uživatelé opravdu potřebují.

Prompt, který funguje

Postav webovou aplikaci pro náš úklidový tým, aby viděl dnešní zakázky a označoval je jako hotové. Navrhni nejdřív pro telefony: jeden sloupec, velká dotyková tlačítka, hlavní akční tlačítko pevně u spodního okraje, žádné ovládací prvky jen po najetí, žádné vodorovné posouvání a správné klávesnice pro telefon a e-mail. Každá zakázka ukazuje adresu (klepnutím se otevře v mapách), telefon klienta (klepnutím se zavolá), kontrolní seznam a tlačítko „Označit jako hotovo“, které umí přidat fotku. Manažeři se přihlásí na notebooku a přiřazují zakázky; na širokém displeji ukaž místo karet tabulku. Udělej z toho instalovatelnou PWA s manifestem, ikonami a samostatným zobrazením a ulož do mezipaměti kostru aplikace, aby se otevřela i bez signálu. Data ukládej do databáze.

Postup stavby

1. Nejdřív postavte rozvržení pro telefon na ukázkových datech a zkontrolujte ho v náhledu v rozměru telefonu.
2. Testujte na skutečných telefonech — alespoň jeden iPhone a jeden Android, pokud mají vaši uživatelé obojí. Emulátory minou věci jako klávesnice, která zakrývá pole.
3. Projděte hlavní úkol jedním palcem. Pokud něco vyžaduje dvě ruce nebo zvětšování, opravte to.
4. Přidejte manifest a ikony a pak aplikaci nainstalujte na obě platformy a zkontrolujte ikonu, název a úvodní obrazovku.
5. Rozhodněte o práci offline. Začněte s „otevře se bez signálu a ukáže jasnou zprávu“; úpravy offline přidejte jen tehdy, když jsou potřeba.
6. Ověřte rychlost na pomalém připojení. Vývojářské nástroje prohlížeče umějí pomalé připojení simulovat.
7. Notifikace přidejte nakonec, pokud vůbec — a pro uživatele, kteří aplikaci neinstalují, naplánujte záložní e-mail.

Časté chyby

• Navrhování jen na velkém monitoru. Každou obrazovku průběžně kontrolujte v šířce telefonu.
• Tabulky, které přetékají. Na malých obrazovkách proměňte řádky v karty.
• Malé plochy pro klepnutí a odkazy příliš blízko u sebe.
• Formuláře, které bojují s klávesnicí — špatné typy vstupů, pole zakrytá klávesnicí, chybí tok „další“.
• Předpoklad, že push na iPhonu funguje v záložce prohlížeče. Vyžaduje nainstalovanou aplikaci na ploše.
• Slib aplikace v App Store, kterou nemůžete dodat. Pokud na obchodu záleží, plánujte ho zvlášť.
• Zabalení webu a označení za aplikaci. Zásady App Review od Applu chtějí aplikace, které jdou nad rámec přebaleného webu; tenký obal riskuje zamítnutí.

Kdy potřebujete nativní aplikaci

Jděte nativně (nebo naplánujte nativní verzi po webové aplikaci), když:

• Přítomnost v obchodě je to, jak vás zákazníci najdou.
• Spoléháte na poloha na pozadí, Bluetooth, zdravotní data, widgety nebo jiné funkce zařízení, které prohlížeče nespolehlivě nenabízejí.
• Vaše aplikace musí dlouhou dobu fungovat zcela offline.
• Vaši uživatelé to čekají — některé publikum prostě nepoužije nic, co není v obchodě.

Publikování v obchodech má vlastní náklady a kroky. Podle vlastních stránek Applu stojí vývojářský účet Applu k září 2026 99 USD ročně a vývojářský účet Google Play jednorázově 25 USD, a každé vydání prochází kontrolou. Mnoho týmů proto začíná mobilně přizpůsobenou webovou aplikací, aby ověřilo, že lidé produkt chtějí, a do nativní verze investuje až potom. Jak vytvořit aplikaci s AI pokrývá tuto první fázi od začátku do konce.

Stavba s Mythexem

Mythex staví webové aplikace: popíšete aplikaci v chatu a zkontrolujete ji v živém náhledu na počítači a v rámečku telefonu, který můžete změnit velikost. Dokumentace obsahuje prompt pro mobilní responzivitu pro opravy rozvržení na malých obrazovkách. Manifest PWA a ikony si můžete vyžádat jako jakoukoli jinou funkci a pak publikovat na veřejný odkaz, který funguje na libovolném telefonu. V tarifu Pro může Mythex aplikaci zabalit jako aplikaci pro Android a iPhone, odeslanou do interního testování na Google Play a do TestFlightu. Začít můžete na tvůrci webových aplikací s AI nebo v šablonách aplikací. Jako praktický příklad si přečtěte jak vytvořit aplikaci pro sledování návyků.

Otázky