Hry do aplikace: jak spustit HTML5 hru ve WebView

Hry do aplikace nepotřebujete herní engine uvnitř ní. Potřebujete WebView: komponentu, kterou Android i iOS nabízejí pro zobrazení webového obsahu v nativní obrazovce. Složku hotové HTML5 hry vložíte do balíčku aplikace nebo na svůj HTTPS server, WebView nasměrujete na její index.html a aplikace dostane sekci her, která běží na stejném kódu jako verze v prohlížeči.

Tenhle průvodce je pro týmy, které už aplikaci mají (retailovou, bankovní, školní platformu, klub nebo mediální značku) a chtějí hry jako funkci, ne jako novou aplikaci v obchodě. Popisuje volbu mezi lokálními a hostovanými soubory, nastavení WebView, která hry rozbijí, když jsou špatně, ukládání postupu, tlačítko zpět, které naše šablony se hodí, a jak licence počítá aplikace. Údaje o platformách vycházejí z dokumentace Android Developers a Apple Developer, přečtené 30. října 2026.

Hry do aplikace: jak funguje cesta přes WebView

WebView je webový engine bez prohlížeče kolem sebe. Váš nativní kód ho vytvoří, určí jeho velikost a nastavení a řekne mu, co má načíst. Na Androidu je to třída WebView, na iOS WKWebView. HTML5 hra žádný rozdíl nepozná: vidí stránku, plátno a úložiště stejně jako v Chrome nebo Safari.

Proto je tahle cesta u her v aplikacích oblíbená. Herní tým pracuje v HTML, CSS a JavaScriptu, tým aplikace přidá jednu obrazovku a pár nastavení a stejná složka hry může žít i na webu. Při plánování jsou tři pohyblivé části:

1. Kde soubory leží: zabalené uvnitř aplikace, nebo servírované z vašeho HTTPS serveru.
2. Jak je WebView nastavený: JavaScript, úložiště, adresa, ze které hra běží.
3. Jak spolu hra a aplikace komunikují: otevření, pozastavení, tlačítko zpět, zavření.

Naše šablony do tohoto schématu sedí, protože každá obsahuje hotovou složku game/ s index.html, připravenou pro statický hosting, bez PHP nebo databáze potřebné pro samotnou hru. Nic z toho ale nezahrnuje nativní část. Každá verze uvádí nativní aplikace nebo buildy pro obchody v sekci „Není součástí této verze“, takže obrazovku WebView dělá váš tým, nebo ji zadáte nám jako samostatnou zakázku po nabídce.

Prohlédněte si HTML5 herní šablony

Lokálně, nebo na serveru: kde mají soubory her být

Lokálně: hra je součástí aplikace

Průvodce Androidu k načítání obsahu v aplikaci říká, že webový obsah zkompilovaný do aplikace nepotřebuje přístup na internet a nečerpá datový objem uživatele. Složku game/ zkopírujete do assets aplikace a načtete ji odtud. Cena je velikost: hra přidá váhu ke stažení a každá aktualizace hry znamená novou verzi aplikace schválenou v obchodě.

Hostované: aplikace načítá hru z vašeho serveru

WebView otevře HTTPS adresu na vaší vlastní doméně. Hru můžete aktualizovat bez nového buildu aplikace a aplikace zůstane malá. Cena je, že hra potřebuje připojení, a pomalá síť se projeví jako pomalé první načtení.

Apple tu má konkrétní pravidlo. Pravidlo 4.7 v App Review Guidelines se týká HTML5 a JavaScriptových mini her, které nejsou vložené do binárního souboru aplikace. Mezi jeho podmínkami je, že aplikace nesmí tomuto softwaru rozšiřovat nebo zpřístupňovat nativní rozhraní platformy bez souhlasu Applu, a musí poskytovat přehled nabízeného softwaru s univerzálními odkazy. Než pro iOS zvolíte hostovanou cestu, přečtěte si pravidlo 4.7 celé.

• Velikost aplikace: lokálně přidává váhu hry; hostovaně téměř nic.
• Aktualizace: lokálně potřebuje vydání aplikace; hostovaně se mění nahráním souborů.
• Připojení: lokálně může po instalaci začít bez sítě; hostovaně ho potřebuje.
• Schválení: lokální hry se posuzují jako součást aplikace; hostované hry na iOS spadají pod pravidlo 4.7.

Nastavení WebView na Androidu, které hru udělá nebo rozbije

Většina hlášení „hra ukazuje bílou obrazovku“ pochází ze tří výchozích hodnot. Všechny tři jsou zdokumentované na Android Developers.

1. JavaScript je vypnutý. Průvodce WebView říká, že JavaScript je ve WebView ve výchozím stavu zakázaný. Každá HTML5 hra ho potřebuje, takže ho zapněte v WebSettings.
2. Úložiště je vypnuté. Reference WebSettings uvádí, že výchozí hodnota setDomStorageEnabled je false. Hry, které drží postup v localStorage, ho potřebují zapnuté, jinak každé sezení začíná od nuly.
3. file:// je špatná adresa. Průvodce Androidu k obsahu v aplikaci vysvětluje, že URL file:// jsou neprůhledné původy, které nemohou používat rozhraní jako fetch() nebo XMLHttpRequest, a odrazuje od zapínání obchvatů přístupu k souborům. Naše stránky produktů říkají totéž z pohledu hry: verze jako Gridspark a Twirldrop z file:// neběží.

Řešení pro třetí bod je WebViewAssetLoader z knihovny AndroidX Webkit. Servíruje soubory z assets vaší aplikace přes HTTPS adresu a Androidový vlastní příklad načítá https://appassets.androidplatform.net/assets/index.html. Pro hru to vypadá jako běžný web, takže ES moduly, fetch a úložiště se chovají stejně jako na vašem serveru.

iOS: WKWebView, lokální soubory a datové úložiště

Na iOS je komponenta WKWebView. Apple dokumentuje loadFileURL(_:allowingReadAccessTo:) pro lokální obsah: druhý argument je soubor nebo složka, kterou WebKit smí číst, a předáním složky může stránka načítat soubory kolem sebe.

Protože naše verze neumí otevření z file://, testujte tuto cestu opatrně, nebo ji přeskočte. Apple také nabízí WKURLSchemeHandler, protokol pro načítání zdrojů s URL schématy, která WebKit sám neobsluhuje, takže aplikace může servírovat složku hry pod vlastním schématem. Capacitor to dělá za vás: jeho výchozí schéma na iOS je capacitor.

Úložiště žije v WKWebsiteDataStore. Applová stránka říká, že výchozí úložiště ukládá data webu trvale na disk, a že neperzistentní úložiště drží data jen v paměti, což je určeno pro soukromé prohlížení. Pokud někdo z vašeho týmu nastaví neperzistentní úložiště, hráči ztratí postup pokaždé, když se aplikace zavře.

iOS nemá systémové tlačítko zpět, takže vaše obrazovka her potřebuje vlastní způsob, jak odejít: tlačítko zavřít v nativní liště, nebo tlačítko, které hra volá přes message handler.

Ukládání postupu uvnitř aplikace

Naše hry ukládají do úložiště prohlížeče hráče, ne na server. Solitaire Links a Deepforge to na svých stránkách říkají jasně: postup se drží v localStorage, bez účtu a bez cloudové synchronizace. Uvnitř aplikace z toho plynou tři důsledky.

• Adresa je součástí uložení. Úložiště prohlížeče patří k původu (origin). Přejdete-li z jednoho schématu nebo hostitele na druhý, například z testovací domény na appassets.androidplatform.net, hráči začnou znovu. Adresu zvolte jednou.
• Klíč uložení je součástí uložení. Stránka produktu Tenguin radí kupujícím nechat klíč uložení na živé hře beze změny, jinak hráči přijdou o postup. Několik verzí v TypeScriptu drží klíč úložiště v brand.ts. Měňte ho záměrně, před spuštěním, nikdy potom.
• Smazání dat aplikace smaže hru. Odinstalace nebo vymazání úložiště aplikace odstraní uložení stejně jako vymazání dat prohlížeče.

Pokud má postup následovat uživatele mezi zařízeními, je to funkce serveru, kterou žádná naše verze nezahrnuje. Každá verze uvádí cloudová uložení nebo účty jako nezahrnuté. Deepforge je nejpřívětivější výchozí bod: jeho stránka popisuje export a import uložení v nabídce a malé API window.DeepForge, které hostitelské stránce umožní pozastavit, obnovit, číst uložení a poslouchat události ukládání.

Podívejte se na Deepforge a jeho API pro hostitelskou stránku

Tlačítko zpět, pozastavení a odchod z hry

Hry HTML5 bývají jedna stránka. To je důležité na Androidu, kde tlačítko zpět prochází historií WebView. Průvodce WebView od Androidu ukazuje vzor: zkontrolujte canGoBack() a zavolejte goBack(), nebo nechte událost vyřídit systém; s AndroidX se stejná logika registruje v OnBackPressedDispatcher. Ve hře na jedné stránce bývá historie prázdná, takže zpět zavře vaši obrazovku her hned, uprostřed úrovně.

Rozhodněte, co má zpět dělat, a zapište to:

• První stisk otevře pauzovací nabídku hry; druhý stisk opustí obrazovku her.
• Nebo zpět vždy odejde, až hra uloží. Každá verze ukládá lokálně, ale zkontrolujte, kdy zapisuje: na konci úrovně, nebo během hry.
• Když aplikace přejde do pozadí, hru pozastavte. Bez pozastavení běží časovače dál za ostatními obrazovkami aplikace.

Naše verze nepřicházejí s mostem do aplikace. Některé nabízejí vstup ze stránky: Gridspark a Ricopop mají obrazovku pro spuštění klepnutím a tlačítko celé obrazovky, které zapínáte nebo vypínáte v konfiguračním souboru, a Deepforge stránce zpřístupňuje pozastavení a obnovení. Cokoli dalšího, například zpráva nativnímu kódu, když úroveň skončí, je malá úprava zdrojového kódu, kterou přidá váš tým nebo zakázka po nabídce.

Podívejte se na Gridspark, čistý JavaScript bez kroku buildu

Licence: jedna hra, jedna aplikace a na co se zeptat napřed

Naše podmínky dávají trvalou, nevýhradní licenci k použití verze v jednom koncovém produktu, pro vás nebo pro jednoho klienta. Vaše aplikace se sekcí her je tímto koncovým produktem. Hráči ji mohou používat zdarma nebo s monetizací reklamou. Kód, grafiku a zvuk můžete měnit a white label je povolen: vaše značka nahrazuje naši.

Tři situace si zaslouží bližší pohled.

• Několik aplikací. Agentura, která dává stejnou hru do tří klientských aplikací, potřebuje tři licence. Koupě více šablon v jedné objednávce dává slevu za balíček: 5 % za dvě, 10 % za tři, 15 % za čtyři a 20 % za pět a více.
• Verze pro Android a iOS téže aplikace. Jedna licence vám dovolí publikovat tuto hru, kde chcete, včetně Google Play a App Store. Zůstává to jedna licence na jeden koncový produkt.
• Herní SDK pro jiné vývojáře. Podmínky zakazují dále šířit šablonu nebo její kód uvnitř jiného produktu určeného pro vývojáře. Herní modul, který prodáváte jiným tvůrcům aplikací, je přesně tento typ produktu.

Pokud vaše aplikace účtuje sekci her nebo v ní prodává položky, zeptejte se nás také předem. Podmínky uvádějí volný přístup a monetizaci reklamou a několik verzí uvádí nákupy za skutečné peníze jako nezahrnuté. Na iOS pravidlo 3.1.1 říká, že odemknutí funkcí nebo obsahu, včetně herních úrovní, musí jít přes nákup v aplikaci.

Licence, faktury a nabídky pro firmy

Často kladené otázky

Můžu dát HTML5 hru do aplikace pro Android nebo iOS?

Ano. Složku hry načtěte ve WebView (WebView na Androidu, WKWebView na iOS), buď přibalenou k aplikaci, nebo z vašeho HTTPS serveru. Zapněte JavaScript a úložiště a soubory servírujte z adresy v HTTPS, ne z file://.

Fungují hry v aplikaci offline?

Jen pokud soubory přibalíte a verze nenačítá nic ze sítě. Několik našich verzí drží grafiku, zvuk a písma lokálně; stránka Ricopop říká, že potřebuje připojení. Než to slíbíte, vyzkoušejte to v letadlovém režimu.

Přijdou hráči o postup, když aktualizuji aplikaci?

Ne, pokud zůstanou stejná adresa a klíč uložení. Uložení žije v úložišti WebView pro daný původ. Změna schématu, hostitele nebo klíče úložiště všechny hráče vrátí na nulu.

Kolik licencí potřebuji pro svou aplikaci?

Jednu na každý koncový produkt. Jedna aplikace s jednou hrou je jedna licence; stejná hra v aplikacích pro tři klienty jsou tři. Stejná aplikace na Google Play i v App Store nepotřebuje druhou licenci: licencovanou hru můžete publikovat, kde chcete.

Další krok

Vyberte hru, vyzkoušejte její demo na telefonu, pak si přečtěte seznam „Není součástí této verze“ a kapitolu o uložení v manuálu. Pokud chcete, abychom sekci her postavili přímo do vaší aplikace, pošlete nám aplikaci, platformy a hru, která se vám líbí, a odpovíme rozsahem, cenou a termínem.

Zobrazit všechny herní šablony

Vyžádat nabídku na integraci do aplikace