Dodavanje igara u aplikaciju: HTML5 igra u WebView-u

Za dodavanje igara u aplikaciju ne treba vam igrački motor unutar nje. Treba vam WebView: komponenta koju Android i iOS nude za prikaz web-sadržaja unutar nativnog ekrana. Mapu gotove HTML5 igre stavite ili u paket aplikacije ili na vlastiti HTTPS poslužitelj, usmjerite WebView na njezin index.html, i vaša aplikacija dobiva odjeljak s igrama koji radi na istom kodu kao verzija za preglednik.

Ovaj vodič je za timove koji već imaju aplikaciju (trgovačku, banku, školsku platformu, klub ili medijski brend) i žele igre u aplikaciji kao značajku, a ne novu aplikaciju u trgovini. Obrađujemo izbor između lokalnih i hostiranih datoteka, postavke WebView-a koje kvare igre kad su pogrešne, spremanje napretka, tipku natrag, koji se naši predlošci uklapaju i kako licenca broji aplikacije. Podatke o platformama preuzeli smo iz dokumentacije Android Developers i Apple Developer, pročitane 30. listopada 2026.

Dodavanje igara u aplikaciju: kako radi put preko WebView-a

WebView je motor preglednika bez samog preglednika oko sebe. Vaš nativni kod ga stvara, određuje mu veličinu i postavke te mu kaže što da učita. Na Androidu je klasa WebView, na iOS-u WKWebView. HTML5 igra ne zna razliku: vidi stranicu, platno (canvas) i pohranu, kao što bi ih vidjela u Chromeu ili Safariju.

Zato je ovaj put popularan za igre u aplikaciji. Tim za igre radi u HTML-u, CSS-u i JavaScriptu, tim za aplikaciju dodaje jedan ekran i nekoliko postavki, a ista mapa igre može živjeti i na web-stranici. Treba planirati tri pokretna dijela:

1. Gdje datoteke žive: spakirane unutar aplikacije ili posluživane s vašeg HTTPS poslužitelja.
2. Kako je WebView konfiguriran: JavaScript, pohrana, adresa s koje igra radi.
3. Kako igra i aplikacija međusobno komuniciraju: otvaranje, pauziranje, tipka natrag, zatvaranje.

Naši predlošci odgovaraju tom obliku jer svaki dolazi s gotovom mapom game/ i datotekom index.html, pripremljenom za statički hosting, bez PHP-a ili baze podataka za samu igru. Ono što nijedan ne uključuje je nativni dio. Svako izdanje navodi nativne aplikacije ili verzije za trgovine pod „Nije uključeno u ovo izdanje“, pa je WebView ekran posao vašeg tima ili posao za koji dajemo ponudu zasebno.

Pregledajte HTML5 predloške igara

Lokalno ili hostirano: gdje bi datoteke igre trebale biti

Lokalno: igra je spakirana unutar aplikacije

Androidov vodič za učitavanje sadržaja unutar aplikacije navodi da web-sadržaj spakiran u aplikaciju ne treba pristup internetu i ne troši korisnikov prijenos podataka. Mapu game/ kopirate u assets aplikacije i učitavate je odande. Cijena je veličina: igra se dodaje preuzimanju, a svaka nadogradnja igre znači novo izdanje aplikacije kroz pregled trgovine.

Hostirano: aplikacija učitava igru s vašeg poslužitelja

WebView otvara HTTPS adresu na vašoj domeni. Igru možete mijenjati bez novog izdanja aplikacije, a aplikacija ostaje mala. Cijena je to što igra treba vezu, a spora mreža pokazuje se kao spor prvi ulazak.

Apple ovdje ima posebno pravilo. Smjernica 4.7 iz App Review Guidelines odnosi se na HTML5 i JavaScript mini-igre koje nisu ugrađene u binarnu datoteku. Među njezinim uvjetima je da aplikacija ne smije proširivati ni izlagati nativne API-je platforme tom softveru bez Appleova dopuštenja te mora pružiti popis softvera koji nudi, s univerzalnim poveznicama. Pročitajte smjernicu 4.7 u cijelosti prije nego odaberete hostirani put za iOS.

• Veličina aplikacije: lokalno dodaje težinu igre; hostirano gotovo ništa.
• Nadogradnje: lokalno traži izdanje aplikacije; hostirano se mijenja kad prenesete datoteke.
• Veza: lokalno može krenuti bez mreže nakon instalacije; hostirano je treba.
• Pregled: lokalne igre pregledava se kao dio aplikacije; hostirane igre na iOS-u podliježu smjernici 4.7.

Postavke Android WebView-a koje određuju hoće li igra raditi

Većina prijava „igra prikazuje bijeli ekran“ dolazi od tri zadane postavke. Sve tri su dokumentirane na Android Developers.

1. JavaScript je isključen. Vodič za WebView kaže da je JavaScript u WebView-u zadano onemogućen. Svaka HTML5 igra ga treba, pa ga uključite u WebSettings.
2. Pohrana je isključena. Referenca WebSettings kaže da je zadana vrijednost za setDomStorageEnabled false. Igrama koje čuvaju napredak u localStorageu treba uključena pohrana, inače svaka sesija kreće od nule.
3. file:// je pogrešna adresa. Androidov vodič za sadržaj unutar aplikacije objašnjava da su URL-ovi file:// neprozirni izvori koji ne mogu koristiti API-je poput fetch() ili XMLHttpRequest, i preporučuje da se ne uključuju zaobilazna rješenja za pristup datotekama. Naše stranice proizvoda kažu isto s gledišta igre: izdanja poput Gridspark i Twirldrop ne rade iz file://.

Rješenje za treću točku je WebViewAssetLoader iz AndroidX Webkit biblioteke. Poslužuje datoteke iz assets vaše aplikacije preko HTTPS adrese, a Androidov vlastiti primjer učitava https://appassets.androidplatform.net/assets/index.html. Igri to izgleda kao obična web-stranica, pa se ES moduli, fetch i pohrana ponašaju kao na vašem poslužitelju.

iOS: WKWebView, lokalne datoteke i spremište podataka

Na iOS-u je komponenta WKWebView. Apple dokumentira loadFileURL(_:allowingReadAccessTo:) za lokalni sadržaj: drugi argument je datoteka ili mapa koju WebKit smije čitati, a prosljeđivanje mape omogućuje stranici da učita datoteke oko nje.

Budući da naša izdanja ne podržavaju otvaranje iz file://, taj put testirajte pažljivo ili ga preskočite. Apple također nudi WKURLSchemeHandler, protokol za učitavanje resursa s URL shemama koje WebKit ne obrađuje, pa vaša aplikacija može poslužiti mapu igre pod vlastitom shemom. Capacitor to radi umjesto vas: njegova zadana iOS shema je capacitor.

Pohrana živi u WKWebsiteDataStore. Appleova stranica kaže da zadano spremište trajno sprema podatke web-stranica na disk, a da nepostojano spremište drži podatke samo u memoriji, što je namijenjeno privatnom pregledavanju. Ako netko u timu postavi nepostojano spremište, igrači gube napredak svaki put kad se aplikacija zatvori.

iOS nema sistemsku tipku natrag, pa vaš ekran igara treba vlastiti izlaz: gumb za zatvaranje u vašoj nativnoj traci ili onaj koji igra poziva kroz message handler.

Spremanje napretka unutar aplikacije

Naše igre spremaju u pohranu preglednika igrača, a ne na poslužitelj. Solitaire Links i Deepforge to jasno kažu na svojim stranicama: napredak se čuva u localStorageu, bez računa i sinkronizacije u oblaku. Unutar aplikacije to ima tri posljedice.

• Adresa je dio spremanja. Pohrana preglednika pripada izvoru (origin). Ako prijeđete s jedne sheme ili hosta na drugu, na primjer s testne domene na appassets.androidplatform.net, igrači počinju ispočetka. Adresu odredite jednom.
• Ključ spremanja je dio spremanja. Stranica proizvoda za Tenguin upućuje kupce da ključ spremanja na živoj igri ostave nepromijenjen, inače igrači gube napredak. Nekoliko TypeScript izdanja drži ključ pohrane u brand.ts. Mijenjajte ga namjerno, prije objave, nikad poslije.
• Brisanje podataka aplikacije briše igru. Deinstalacija ili brisanje pohrane aplikacije uklanja spremanje, baš kao što to čini brisanje podataka preglednika.

Ako napredak mora pratiti korisnika na različitim uređajima, to je značajka poslužitelja koju nijedno naše izdanje ne uključuje. Svako izdanje navodi spremanja u oblaku ili račune kao nisu uključena. Deepforge je najprijateljskija polazna točka: njegova stranica opisuje izvoz i uvoz spremanja iz izbornika te malo sučelje window.DeepForge API, koje domaćinskoj stranici omogućuje pauziranje, nastavak, čitanje spremanja i slušanje događaja spremanja.

Pogledajte Deepforge i njegov API za domaćinsku stranicu

Tipka natrag, pauziranje i izlazak iz igre

HTML5 igre su obično jedna stranica. To je važno na Androidu, gdje tipka natrag prolazi kroz povijest WebView-a. Androidov vodič za WebView pokazuje obrazac: provjerite canGoBack() i pozovite goBack(), ili prepustite događaj sustavu; s AndroidX-om istu logiku registrirate na OnBackPressedDispatcher. U igri s jednom stranicom povijest je često prazna, pa tipka natrag odmah zatvara vaš ekran igara, usred razine.

Odlučite što tipka natrag treba raditi i zapišite to:

• Prvi pritisak otvara izbornik pauze igre; drugi pritisak napušta ekran igara.
• Ili tipka natrag uvijek izlazi, nakon što igra spremi. Svako izdanje sprema lokalno, ali provjerite kada zapisuje: na kraju razine ili tijekom igre.
• Kad aplikacija ode u pozadinu, pauzirajte igru. Bez pauze tajmeri nastavljaju raditi iza ostalih ekrana vaše aplikacije.

Naša izdanja ne dolaze s mostom za aplikaciju. Neka nude ulaz iz stranice: Gridspark i Ricopop imaju ekran za pokretanje dodirom i gumb za cijeli ekran koji uključujete ili isključujete u konfiguracijskoj datoteci, a Deepforge stranici izlaže pauziranje i nastavak. Sve ostalo, poput poruke nativnom kodu kad razina završi, mala je izmjena u izvornom kodu koju dodaje vaš tim ili zasebni posao za koji dajemo ponudu.

Pogledajte Gridspark, običan JavaScript bez koraka izgradnje za igranje

Licenca: jedna igra, jedna aplikacija i što prvo pitati

Naši uvjeti daju doživotnu, nekskluzivnu licencu za korištenje izdanja u jednom krajnjem proizvodu, za vas ili za jednog klijenta. Vaša aplikacija s odjeljkom igara je taj krajnji proizvod. Igrači mogu pristupiti besplatno ili uz monetizaciju putem oglasa. Smijete mijenjati kod, grafiku i zvuk, a white label je dopušten: vaš brend zamjenjuje naš.

Tri situacije traže pomniji pogled.

• Više aplikacija. Agencija koja istu igru stavlja u tri klijentske aplikacije treba tri licence. Kupnja više predložaka u jednoj narudžbi daje popust za skup: 5 % za 2, 10 % za 3, 15 % za 4 i 20 % za 5 ili više.
• Android i iOS verzije iste aplikacije. Jedna licenca dopušta objavu te igre gdje želite, uključujući Google Play i App Store. Ostaje jedna licenca po krajnjem proizvodu.
• SDK za igre za druge programere. Uvjeti zabranjuju ponovnu distribuciju predloška ili njegovog koda unutar drugog proizvoda namijenjenog programerima. Modul za igre koji prodajete drugim izrađivačima aplikacija upravo je takav proizvod.

Ako vaša aplikacija naplaćuje odjeljak igara ili prodaje predmete unutar njega, i to prvo pitajte nas. Uvjeti navode besplatan pristup i monetizaciju oglasima, a nekoliko izdanja navodi kupnje za pravi novac kao nisu uključene. Na iOS-u smjernica 3.1.1 kaže da se otključavanje značajki ili sadržaja, uključujući razine igre, mora obavljati putem kupnje unutar aplikacije.

Licence, računi i ponude za tvrtke

Često postavljana pitanja

Mogu li HTML5 igru staviti u Android ili iOS aplikaciju?

Da. Učitajte mapu igre u WebView (WebView na Androidu, WKWebView na iOS-u), bilo spakiranu uz aplikaciju ili s vašeg HTTPS poslužitelja. Uključite JavaScript i pohranu te datoteke poslužujte s adrese u HTTPS stilu, a ne s file://.

Rade li igre bez veze unutar aplikacije?

Samo ako spakirate datoteke i izdanje ne učitava ništa s mreže. Nekoliko naših izdanja drži grafiku, zvuk i fontove lokalno; stranica za Ricopop kaže da treba vezu. Provjerite u načinu rada u avionu prije nego to obećate.

Hoće li igrači izgubiti napredak kad nadogradim aplikaciju?

Neće, ako ostanu ista adresa i isti ključ spremanja. Spremanja žive u pohrani WebView-a za taj izvor. Promjena sheme, hosta ili ključa pohrane svakoga vraća na nulu.

Koliko licenci treba za moju aplikaciju?

Jednu po krajnjem proizvodu. Jedna aplikacija s jednom igrom je jedna licenca; ista igra u aplikacijama za tri klijenta su tri. Ista aplikacija na Google Playu i App Storeu ne traži drugu licencu: licenciranu igru smijete objaviti gdje želite.

Sljedeći korak

Odaberite igru, odigrajte njezin demo na telefonu, zatim pročitajte popis „Nije uključeno u ovo izdanje“ i poglavlje priručnika o spremanjima. Ako radije želite da mi izgradimo ekran igara u vašu aplikaciju, pošaljite nam aplikaciju, platforme i igru koja vam se sviđa, a mi ćemo odgovoriti s opsegom, cijenom i rokom.

Pogledajte sve predloške igara

Zatražite ponudu za integraciju u aplikaciju