Hry do aplikácie: ako spustiť HTML5 hru vo WebView

Ak chcete do aplikácie pridať hry, nepotrebujete v nej herný engine. Potrebujete WebView: komponent, ktorý Android a iOS poskytujú na zobrazenie webového obsahu v natívnej obrazovke. Priečinok hotovej HTML5 hry dáte buď do balíka aplikácie, alebo na váš vlastný HTTPS server, nasmerujete WebView na jeho index.html a aplikácia dostane sekciu hier, ktorá beží na rovnakom kóde ako verzia v prehliadači.

Tento návod je pre tímy, ktoré už majú aplikáciu (retail, banku, školskú platformu, klub alebo mediálnu značku) a chcú hry v aplikácii ako funkciu, nie ako novú aplikáciu v obchode. Zaoberá sa voľbou medzi lokálnymi a hostovanými súbormi, nastaveniami WebView, ktoré hry rozbijú, keď sú zlé, ukladaním postupu, tlačidlom späť, tým, ktoré z našich šablón sa hodia, a tým, ako licencia počíta aplikácie. Údaje o platformách pochádzajú z dokumentácie Android Developers a Apple Developer, prečítanej 30. októbra 2026.

Hry do aplikácie: ako funguje cesta cez WebView

WebView je webový engine bez prehliadača okolo seba. Váš natívny kód ho vytvorí, rozhodne o jeho veľkosti a nastaveniach a povie mu, čo má načítať. Na Androide je to trieda WebView; na iOS WKWebView. HTML5 hra nerozozná rozdiel: vidí stránku, plátno a úložisko, ako by ich videla v Chrome alebo Safari.

Preto je táto cesta obľúbená pri hrách v aplikácii. Herný tím pracuje v HTML, CSS a JavaScripte, tím aplikácie pridá jednu obrazovku a pár nastavení a ten istý priečinok hry môže žiť aj na webe. Pri plánovaní treba počítať s tromi časťami:

1. Kde sú súbory: zabalené v aplikácii, alebo podávané z vášho HTTPS servera.
2. Ako je WebView nastavený: JavaScript, úložisko, adresa, z ktorej hra beží.
3. Ako hra a aplikácia komunikujú: otvorenie, pozastavenie, tlačidlo späť, zatvorenie.

Naše šablóny do tohto tvaru zapadajú, lebo každá obsahuje hotový priečinok game/ s index.html, pripravený na statický hosting, bez PHP a databázy pre samotnú hru. Žiadna z nich nezahŕňa natívnu časť. Každé vydanie uvádza natívne aplikácie alebo zostavenia pre obchody v časti „Nie je zahrnuté v tomto vydaní“, takže obrazovka WebView je práca vášho tímu alebo služba, ktorú ponúkneme osobitne.

Prezrieť HTML5 herné šablóny

Lokálne alebo hostované: kde majú hry byť

Lokálne: hra je v aplikácii

Sprievodca Androidu k načítaniu obsahu v aplikácii uvádza, že webový obsah skompilovaný do aplikácie nepotrebuje prístup na internet ani nespotrebúva šírku pásma používateľa. Priečinok game/ skopírujete do assets aplikácie a načítate ho odtiaľ. Cenou je veľkosť: hra pridá váhu k stiahnutiu a každá aktualizácia hry znamená nové vydanie aplikácie cez kontrolu obchodu.

Hostované: aplikácia načíta hru z vášho servera

WebView otvorí HTTPS adresu vašej vlastnej domény. Hru môžete aktualizovať bez nového zostavenia aplikácie a aplikácia zostáva malá. Cenou je, že hra potrebuje pripojenie a pomalá sieť sa prejaví pomalým prvým načítaním.

Apple tu má osobitné pravidlo. Guideline 4.7 pravidiel pre kontrolu aplikácií (App Review Guidelines) pokrýva HTML5 a JavaScript mini hry, ktoré nie sú zabalené v binárnom súbore aplikácie. Medzi jeho podmienkami je, že aplikácia nesmie rozširovať ani sprístupňovať natívne platformové API tomuto softvéru bez súhlasu Apple a musí poskytovať index softvéru, ktorý ponúka, s univerzálnymi odkazmi. Pred voľbou hostovanej cesty pre iOS si 4.7 prečítajte celé.

• Veľkosť aplikácie: lokálne pridáva váhu hry; hostované takmer nič.
• Aktualizácie: lokálne potrebujú vydanie aplikácie; hostované sa menia nahratím.
• Pripojenie: lokálne môže začať bez siete po inštalácii; hostované ju potrebuje.
• Kontrola: lokálne hry sa kontrolujú ako súčasť aplikácie; hostované hry na iOS spadajú pod guideline 4.7.

Nastavenia WebView na Androide, ktoré hru urobia alebo zlomia

Väčšina hlásení „hra ukazuje biely obraz“ pochádza z troch predvolených nastavení. Všetky tri sú zdokumentované na Android Developers.

1. JavaScript je vypnutý. Sprievodca WebView uvádza, že JavaScript je vo WebView štandardne vypnutý. Každá HTML5 hra ho potrebuje, takže ho zapnite v WebSettings.
2. Úložisko je vypnuté. Referencia WebSettings uvádza, že predvolená hodnota setDomStorageEnabled je false. Hry, ktoré držia postup v localStorage, ho potrebujú zapnuté, inak každá relácia začne od nuly.
3. file:// je zlá adresa. Sprievodca obsahom v aplikácii od Androidu vysvetľuje, že adresy file:// sú nepriehľadné originy, ktoré nemôžu používať API ako fetch() alebo XMLHttpRequest, a odporúča nezapínať obchádzky prístupu k súborom. Naše stránky produktov hovoria to isté z pohľadu hry: vydania ako Gridspark a Twirldrop nebežia z file://.

Opravou tretieho bodu je WebViewAssetLoader z knižnice AndroidX Webkit. Podáva súbory z assets vašej aplikácie cez HTTPS adresu a Androidov vlastný príklad načíta https://appassets.androidplatform.net/assets/index.html. Pre hru to vyzerá ako bežná webová stránka, takže ES moduly, fetch a úložisko fungujú tak, ako na vašom serveri.

iOS: WKWebView, lokálne súbory a dátové úložisko

Na iOS je komponent WKWebView. Apple dokumentuje loadFileURL(_:allowingReadAccessTo:) pre lokálny obsah: druhý argument je súbor alebo priečinok, ktorý WebKit smie čítať, a keď odovzdáte priečinok, stránka môže načítať súbory v ňom.

Keďže naše vydania nepodporujú otvorenie z file://, otestujte túto cestu starostlivo, alebo ju vynechajte. Apple tiež poskytuje WKURLSchemeHandler, protokol na načítanie zdrojov so schémami URL, ktoré WebKit nespracúva, takže vaša aplikácia môže podávať priečinok hry pod vlastnou schémou. Capacitor to robí za vás: jeho predvolená schéma pre iOS je capacitor.

Úložisko žije vo WKWebsiteDataStore. Stránka Apple uvádza, že predvolené úložisko ukladá webové dáta trvalo na disk, a že nepersistentné úložisko drží dáta iba v pamäti, čo je určené na súkromné prehliadanie. Ak niekto z tímu nastaví nepersistentné úložisko, hráči pri každom zatvorení aplikácie prídu o postup.

iOS nemá systémové tlačidlo späť, takže herná obrazovka potrebuje vlastný spôsob odchodu: tlačidlo zavrieť vo vašej natívnej lište alebo také, ktoré hra volá cez message handler.

Ukladanie postupu v aplikácii

Naše hry ukladajú v úložisku prehliadača hráča, nie na server. Solitaire Links a Deepforge to hovoria otvorene na svojich stránkach: postup sa drží v localStorage, bez účtu a bez cloudovej synchronizácie. V aplikácii to má tri dôsledky.

• Adresa je súčasťou uloženia. Úložisko prehliadača patrí k originu. Ak prejdete z jednej schémy alebo hostiteľa na inú, napríklad z testovacej domény na appassets.androidplatform.net, hráči začnú znova. Adresu zvoľte raz.
• Kľúč uloženia je súčasťou uloženia. Stránka produktu Tenguin hovorí kupujúcim, aby na živej hre nemenili kľúč uloženia, inak hráči prídu o postup. Viaceré vydania v TypeScripte držia kľúč úložiska v brand.ts. Meňte ho zámerne, pred spustením, nikdy po ňom.
• Vymazanie dát aplikácie vymaže hru. Odinštalovanie alebo vymazanie úložiska aplikácie odstráni uloženie, rovnako ako vymazanie údajov prehliadača.

Ak má postup nasledovať používateľa medzi zariadeniami, je to serverová funkcia, ktorú žiadne z našich vydaní neobsahuje. Každé vydanie uvádza cloudové ukladanie alebo účty ako nezahrnuté. Deepforge je najpríjemnejší štart: jeho stránka popisuje export a import uloženia v menu a malé rozhranie window.DeepForge API, ktoré hostiteľská stránka používa na pozastavenie, obnovenie, čítanie uloženia a počúvanie udalostí ukladania.

Pozrite si Deepforge a jeho API pre hostiteľskú stránku

Tlačidlo späť, pozastavenie a odchod z hry

HTML5 hry sú zvyčajne jedna stránka. To je dôležité na Androide, kde tlačidlo späť prechádza históriou WebView. Sprievodca WebView od Androidu ukazuje vzor: skontrolujte canGoBack() a zavolajte goBack(), alebo nechajte udalosť spracovať systémom; s AndroidX zaregistrujete rovnakú logiku v OnBackPressedDispatcher. V jednostránkovej hre je história často prázdna, takže späť zatvorí vašu obrazovku hier hneď, uprostred levelu.

Rozhodnite, čo má späť robiť, a zapíšte si to:

• Prvé stlačenie otvorí pauzové menu hry; druhé stlačenie opustí obrazovku hier.
• Alebo späť vždy odíde, až potom, čo hra uloží. Každé vydanie ukladá lokálne, ale overte, kedy zapisuje: na konci levelu alebo počas hry.
• Keď aplikácia ide na pozadie, pozastavte hru. Bez pozastavenia bežia časovače na pozadí ostatných obrazoviek vašej aplikácie.

Naše vydania nemajú aplikačný most. Niektoré však ponúkajú cestu zvonka zo stránky: Gridspark a Ricopop majú obrazovku spustenia dotykom a tlačidlo na celú obrazovku, ktoré zapnete alebo vypnete v konfiguračnom súbore, a Deepforge sprístupňuje stránke pozastavenie a obnovenie. Čokoľvek iné, napríklad správa natívnemu kódu, keď level skončí, je malá úprava zdrojového kódu, ktorú pridá váš tím alebo osobitná zákazka.

Pozrite si Gridspark, čistý JavaScript bez kroku zostavenia

Licencia: jedna hra, jedna aplikácia a čo sa najprv opýtať

Naše podmienky udeľujú trvalú, nevýhradnú licenciu na použitie vydania v jednom koncovom produkte, pre vás alebo pre jedného klienta. Vaša aplikácia so sekciou hier je tým koncovým produktom. Hráči ju môžu používať zadarmo alebo cez monetizáciu reklamou. Kód, grafiku a zvuk môžete upravovať a white label je povolený: vaša značka nahradí našu.

Tri situácie si vyžadujú bližší pohľad.

• Viac aplikácií. Agentúra, ktorá dá tú istú hru do troch klientských aplikácií, potrebuje tri licencie. Kúpa viacerých šablón v jednej objednávke dáva zľavu za balík: 5 % pri dvoch, 10 % pri troch, 15 % pri štyroch a 20 % pri piatich alebo viac.
• Verzie pre Android a iOS tej istej aplikácie. Jedna licencia vám umožní zverejniť tú hru kdekoľvek chcete, vrátane Google Play a App Store. Zostáva to jedna licencia na jeden koncový produkt.
• SDK hier pre iných vývojárov. Podmienky zakazujú ďalej šíriť šablónu alebo jej kód v inom produkte určenom pre vývojárov. Modul hier, ktorý predávate iným tvorcom aplikácií, je presne taký produkt.

Ak vaša aplikácia účtuje sekciu hier alebo v nej predáva položky, opýtajte sa nás najprv aj na to. Podmienky uvádzajú bezplatný prístup a monetizáciu reklamou a viaceré vydania uvádzajú nákupy za skutočné peniaze ako nezahrnuté. Na iOS guideline 3.1.1 hovorí, že odomknutie funkcií alebo obsahu vrátane herných levelov musí ísť cez nákup v aplikácii.

Licencie, faktúry a cenové ponuky pre firmy

Často kladené otázky

Môžem dať HTML5 hru do aplikácie pre Android alebo iOS?

Áno. Načítajte priečinok hry vo WebView (WebView na Androide, WKWebView na iOS), buď zabalený s aplikáciou, alebo z vášho HTTPS servera. Zapnite JavaScript a úložisko a podávajte súbory z adresy v štýle HTTPS, nie z file://.

Fungujú hry v aplikácii offline?

Len ak zabalíte súbory a vydanie nenačítava nič zo siete. Viaceré naše vydania držia grafiku, zvuk a fonty lokálne; stránka Ricopop uvádza, že potrebuje pripojenie. Pred sľubom to otestujte v režime v lietadle.

Stratia hráči postup, keď aktualizujem aplikáciu?

Nie, ak zostanú adresa a kľúč uloženia rovnaké. Uloženia žijú v úložisku WebView pre daný origin. Zmena schémy, hostiteľa alebo kľúča úložiska spustí všetkých od nuly.

Koľko licencií potrebujem pre svoju aplikáciu?

Jednu na jeden koncový produkt. Jedna aplikácia s jednou hrou je jedna licencia; tá istá hra v aplikáciách pre tri klientov sú tri. Tá istá aplikácia na Google Play aj App Store nepotrebuje druhú licenciu: licencovanú hru môžete zverejniť kdekoľvek chcete.

Ďalší krok

Vyberte hru, vyskúšajte jej demo na telefóne a potom si prečítajte jej zoznam „Nie je zahrnuté v tomto vydaní“ a kapitolu návodu o uloženiach. Ak chcete, aby sme obrazovku hier postavili do vašej aplikácie, pošlite nám aplikáciu, platformy a hru, ktorá sa vám páči, a odpovieme rozsahom, cenou a termínom.

Pozrieť všetky herné šablóny

Vyžiadať cenovú ponuku na integráciu do aplikácie