HTML5 igre v aplikaciji: kako igro zaženete v WebView

Da bi v aplikacijo dodali igre, v njej ne potrebujete igralnega pogona. Potrebujete WebView: komponento, ki jo Android in iOS ponujata za prikaz spletne vsebine znotraj nativnega zaslona. Mapo gotove igre HTML5 postavite v paket aplikacije ali na svoj strežnik HTTPS, WebView usmerite na njen index.html in vaša aplikacija dobi razdelek z igrami, ki teče na isti kodi kot spletna različica.

Ta vodnik je namenjen ekipam, ki že imajo aplikacijo (trgovinsko, banko, šolsko platformo, klub ali medijsko blagovno znamko) in želijo igre kot funkcijo, ne kot novo aplikacijo v trgovini. Pokriva izbiro med lokalnimi in gostovanimi datotekami, nastavitve WebView-ja, ki igre pokvarijo, če so napačne, shranjevanje napredka, gumb za nazaj, katere naše predloge ustrezajo in kako licenca šteje aplikacije. Podrobnosti o platformah prihajajo iz dokumentacije Android Developers in Apple Developer, prebrane 30. oktobra 2026.

Igre v aplikaciji: kako deluje pot prek WebView-ja

WebView je brskalnik brez brskalnika okoli sebe. Vaša nativna koda ga ustvari, določi njegovo velikost in nastavitve ter mu pove, kaj naj naloži. Na Androidu je razred WebView, na iOS-u WKWebView. HTML5 igra razlike ne opazi: vidi stran, platno in shrambo, kot bi jih videla v Chromu ali Safariju.

Zato je ta pot priljubljena za igre v aplikaciji. Igralna ekipa dela v HTML-u, CSS-u in JavaScriptu, ekipa za aplikacijo doda en zaslon in nekaj nastavitev, ista mapa z igro pa lahko živi tudi na spletni strani. Načrtovati je treba tri dele:

1. Kje ležijo datoteke: zapakirane v aplikaciji ali postrežene z vašega strežnika HTTPS.
2. Kako je WebView nastavljen: JavaScript, shramba, naslov, iz katerega igra teče.
3. Kako igra in aplikacija komunicirata: odpiranje, pavziranje, gumb za nazaj, zapiranje.

Naše predloge ustrezajo tej obliki, ker vsaka prinaša pripravljeno mapo game/ z datoteko index.html, zgrajeno za statično gostovanje, brez PHP-ja ali baze za samo igro. Nobena ne vključuje nativnega dela. Vsaka izdaja navaja izvorne aplikacije ali gradnje za trgovine pod »Ni vključeno v to izdajo«, zato je zaslon WebView delo vaše ekipe ali storitev, ki jo ponudimo posebej.

Oglejte si predloge HTML5 iger

Lokalno ali gostovano: kje naj bodo datoteke igre

Lokalno: igra je v aplikaciji

Androidov vodnik za nalaganje vsebine v aplikaciji pravi, da spletna vsebina, prevedena v aplikacijo, ne potrebuje dostopa do interneta in ne porablja uporabnikove pasovne širine. Mapo game/ kopirate v sredstva aplikacije in jo naložite od tam. Cena je velikost: igra prišteje k prenosu, vsaka posodobitev igre pa pomeni novo izdajo aplikacije, ki gre skozi pregled v trgovini.

Gostovano: aplikacija naloži igro z vašega strežnika

WebView odpre naslov HTTPS na vaši domeni. Igro lahko posodobite brez nove gradnje aplikacije, aplikacija pa ostane majhna. Cena je, da igra potrebuje povezavo, počasno omrežje pa se pozna kot počasno prvo nalaganje.

Apple tu ima posebno pravilo. Smernica 4.7 iz App Review Guidelines zajema igre HTML5 in JavaScript, ki niso vgrajene v binarno datoteko. Med pogoji je: aplikacija ne sme razširiti ali izpostaviti nativnih platformskih API-jev tej programski opremi brez Applovega dovoljenja, mora pa ponuditi kazalo programske opreme, ki jo ponuja, z univerzalnimi povezavami. Preberite 4.7 v celoti, preden za iOS izberete gostovano pot.

• Velikost aplikacije: lokalno doda težo igre; gostovano skoraj nič.
• Posodobitve: lokalno zahtevajo izdajo aplikacije; gostovano se spremeni, ko naložite datoteke.
• Povezava: lokalno lahko začne brez omrežja, ko je nameščeno; gostovano ga potrebuje.
• Pregled: lokalne igre se pregledajo kot del aplikacije; gostovane igre na iOS-u spadajo pod smernico 4.7.

Nastavitve WebView-ja v Androidu, ki igro naredijo ali pokvarijo

Večina poročil »igra kaže belo stran« izvira iz treh privzetih nastavitev. Vse tri so dokumentirane na Android Developers.

1. JavaScript je izklopljen. Vodnik za WebView pravi, da je JavaScript v WebView-ju privzeto onemogočen. Vsaka igra HTML5 ga potrebuje, zato ga v WebSettings omogočite.
2. Shramba je izklopljena. Referenca WebSettings pravi, da je privzeta vrednost setDomStorageEnabled false. Igre, ki napredek hranijo v localStorage, jo potrebujejo vklopljeno, sicer se vsaka seja začne z nič.
3. file:// je napačen naslov. Androidov vodnik za vsebino v aplikaciji pojasnjuje, da so URL-ji file:// neprozorni izvori, ki ne morejo uporabljati API-jev, kot sta fetch() ali XMLHttpRequest, in odsvetuje vklapljanje rešitev za dostop do datotek. Naše strani izdelkov to povedo tudi z igralne strani: izdaje, kot sta Gridspark in Twirldrop, ne delujejo iz file://.

Popravek za tretjo točko je WebViewAssetLoader iz knjižnice AndroidX Webkit. Streže datoteke iz sredstev vaše aplikacije prek naslova HTTPS, Androidov lasten primer pa nalaga https://appassets.androidplatform.net/assets/index.html. Igri se to zdi kot navadna spletna stran, zato se moduli ES, fetch in shramba obnašajo enako kot na vašem strežniku.

iOS: WKWebView, lokalne datoteke in podatkovna shramba

Na iOS-u je komponenta WKWebView. Apple dokumentira loadFileURL(_:allowingReadAccessTo:) za lokalno vsebino: drugi argument je datoteka ali mapa, ki jo WebKit sme brati, mapa pa strani omogoči nalaganje datotek okoli nje.

Ker naše izdaje ne podpirajo odpiranja iz file://, to pot preizkusite previdno ali jo preskočite. Apple ponuja tudi WKURLSchemeHandler, protokol za nalaganje virov z URL shemami, ki jih WebKit sam ne obravnava, zato vaša aplikacija lahko streže mapo igre pod svojo shemo. Capacitor to naredi namesto vas: njegova privzeta shema na iOS-u je capacitor.

Shramba je v WKWebsiteDataStore. Apple na svoji strani pravi, da privzeta shramba podatkov spletnih mest trajno shrani na disk, nepersistentna shramba pa hrani podatke samo v pomnilniku, kar je namenjeno zasebnemu brskanju. Če nekdo v vaši ekipi nastavi nepersistentno shrambo, igralci izgubijo napredek vsakič, ko se aplikacija zapre.

iOS nima sistemskega gumba za nazaj, zato vaš razdelek z igrami potrebuje lasten izhod: gumb za zapiranje v vaši nativni vrstici ali gumb, ki ga igra sproži prek sporočilnega upravljalca.

Shranjevanje napredka v aplikaciji

Naše igre shranjujejo v shrambo brskalnika igralca, ne na strežniku. Solitaire Links in Deepforge to povesta na svojih straneh: napredek je v localStorage, brez računa in sinhronizacije v oblaku. V aplikaciji to pomeni tri stvari.

• Naslov je del shranjevanja. Shramba brskalnika pripada izvoru (origin). Če se preselite z ene sheme ali gostitelja na drugega, na primer iz testne domene na appassets.androidplatform.net, igralci začnejo znova. Naslov izberite enkrat.
• Ključ shranjevanja je del shranjevanja. Stran izdelka Tenguin svetuje kupcem, naj ključ shranjevanja na živi igri ne spreminjajo, sicer igralci izgubijo napredek. Več izdaj TypeScript hrani ključ shranjevanja v brand.ts. Spremenite ga namenoma, pred objavo, nikoli pozneje.
• Brisanje podatkov aplikacije izbriše igro. Odstranitev aplikacije ali brisanje njene shrambe odstrani shranjevanje, tako kot brisanje podatkov brskalnika.

Če mora napredek slediti uporabniku med napravami, je to funkcija strežnika, ki je nobena naša izdaja ne vključuje. Vsaka izdaja navaja shranjevanje v oblaku ali račune kot nevključene. Deepforge je najprijaznejše izhodišče: njegova stran opisuje izvoz in uvoz shranjevanja v meniju ter majhen API window.DeepForge, ki gostiteljski strani omogoča pavziranje, nadaljevanje, branje shranjevanja in poslušanje dogodkov shranjevanja.

Oglejte si Deepforge in njegov API za gostiteljsko stran

Gumb za nazaj, pavziranje in izhod iz igre

HTML5 igre so običajno ena sama stran. To je pomembno na Androidu, kjer gumb za nazaj hodi po zgodovini WebView-ja. Androidov vodnik za WebView kaže vzorec: preverite canGoBack() in pokličite goBack() ali pustite, da to obravnava sistem; z AndroidX registrirate isto logiko pri OnBackPressedDispatcher. Pri igri na eni strani je zgodovina pogosto prazna, zato gumb nazaj takoj zapre vaš razdelek z igrami, sredi stopnje.

Določite, kaj naj naredi gumb nazaj, in to zapišite:

• Prvi pritisk odpre pavzni meni igre; drugi pritisk zapusti razdelek z igrami.
• Ali pa nazaj vedno zapusti, potem ko je igra shranjena. Vse izdaje shranjujejo lokalno, a preverite, kdaj zapišejo: ob koncu stopnje ali med igro.
• Ko gre aplikacija v ozadje, igro pavzirajte. Brez pavze časovniki tečejo za drugimi zasloni vaše aplikacije.

Naše izdaje ne pridejo z mostom do aplikacije. Nekatere ponujajo pot od strani: Gridspark in Ricopop imata zaslon za začetek z dotikom in gumb za celozaslonski način, ki ga v datoteki z nastavitvami vklopite ali izklopite, Deepforge pa gostiteljski strani izpostavi pavzo in nadaljevanje. Vse drugo, na primer sporočilo nativni kodi ob koncu stopnje, je majhna sprememba v izvorni kodi, ki jo doda vaša ekipa ali ponujeno delo.

Oglejte si Gridspark, navaden JavaScript brez koraka gradnje za igranje

Licenca: ena igra, ena aplikacija in kaj vprašati najprej

Naši pogoji dajejo trajno, nekskluzivno licenco za uporabo izdaje v enem končnem izdelku, za vas ali enega naročnika. Vaša aplikacija z razdelkom iger je ta končni izdelek. Igralci lahko do njega dostopajo brezplačno ali z monetizacijo z oglasi. Kodo, grafiko in zvok smete spreminjati, bela označba pa je dovoljena: vaša blagovna znamka nadomesti našo.

Tri situacije zahtevajo natančnejši pogled.

• Več aplikacij. Agencija, ki da isto igro v tri aplikacije strank, potrebuje tri licence. Nakup več predlog v enem naročilu daje popust za paket: 5 % za 2, 10 % za 3, 15 % za 4 in 20 % za 5 ali več.
• Različici aplikacije za Android in iOS. Ena licenca vam omogoča objavo te igre kjerkoli, vključno z Google Play in App Store. Ostane ena licenca na en končni izdelek.
• SDK za igre za druge razvijalce. Pogoji prepovedujejo ponovno razdeljevanje predloge ali njene kode v drugem izdelku za razvijalce. Modul z igrami, ki ga prodajate drugim izdelovalcem aplikacij, je ta vrsta izdelka.

Če vaša aplikacija zaračunava razdelek z igrami ali prodaja predmete v njem, nas tudi tu najprej vprašajte. Pogoji navajajo brezplačen dostop in monetizacijo z oglasi, več izdaj pa navaja nakupe za pravi denar kot nevključene. Na iOS-u smernica 3.1.1 pravi, da morajo odklepanje funkcij ali vsebine, vključno z igralnimi stopnjami, uporabljati nakup znotraj aplikacije.

Licence, računi in ponudbe za podjetja

Pogosta vprašanja

Ali lahko HTML5 igro dam v aplikacijo za Android ali iOS?

Da. Naložite mapo igre v WebView (WebView na Androidu, WKWebView na iOS-u), bodisi zapakirano z aplikacijo bodisi z vašega strežnika HTTPS. Vklopite JavaScript in shrambo ter datoteke postrezite z naslova v slogu HTTPS, ne file://.

Ali igre v aplikaciji delujejo brez povezave?

Samo če zapakirate datoteke in izdaja iz omrežja ne nalaga ničesar. Več naših izdaj ima grafiko, zvok in pisave lokalno; stran Ricopop pravi, da potrebuje povezavo. Preizkusite v letalskem načinu, preden to obljubite.

Ali bodo igralci izgubili napredek, ko posodobim aplikacijo?

Ne, če naslov in ključ shranjevanja ostaneta enaka. Shranjevanja so v shrambi WebView-ja za ta izvor. Če spremenite shemo, gostitelja ali ključ shranjevanja, vsi začnejo z nič.

Koliko licenc potrebujem za svojo aplikacijo?

Eno na končni izdelek. Ena aplikacija z eno igro je ena licenca; ista igra v aplikacijah za tri stranke so tri. Ista aplikacija v Google Play in App Store ne potrebuje druge licence: igro smete objaviti kjerkoli.

Naslednji korak

Izberite igro, zaženite njen demo na telefonu, nato preberite njen seznam »Ni vključeno v to izdajo« in poglavje o shranjevanju v priročniku. Če bi raje, da igralni zaslon v vašo aplikacijo vgradimo mi, nam pošljite aplikacijo, platforme in igro, ki vam je všeč, mi pa vam odgovorimo s obsegom, ceno in rokom.

Oglejte si vse predloge za igre

Zahtevajte ponudbo za vključitev v aplikacijo