Żid logħbiet fl-app tiegħek: tħaddem logħba HTML5 f'WebView

Biex iżżid logħbiet fl-app tiegħek, m'għandekx bżonn game engine ġewwa fiha. Għandek bżonn WebView: il-komponent li Android u iOS jipprovdu biex juru kontenut tal-web ġewwa skrin nattiv. Tpoġġi folder ta' logħba HTML5 lesta jew ġewwa l-pakkett tal-app jew fuq is-server HTTPS tiegħek, tindika WebView lejn l-index.html tiegħu, u l-app tiegħek tikseb sezzjoni ta' logħbiet li taħdem bl-istess kodiċi tal-verżjoni tal-browser.

Din il-gwida hija għal timijiet li diġà għandhom app (app tal-bejgħ bl-imnut, bank, pjattaforma tal-iskola, klabb jew brand tal-midja) u jridu logħbiet fl-app bħala funzjoni, mhux app ġdida fil-ħanut. Tkopri l-għażla bejn fajls lokali u ospitati, is-settings tal-WebView li jkissru l-logħbiet meta jkunu ħżiena, iż-żamma tal-progress, il-buttuna back, liema mill-mudelli tagħna jaqblu, u kif il-liċenzja tgħodd l-apps. Id-dettalji tal-pjattaformi ġejjin mid-dokumentazzjoni ta' Android Developers u Apple Developer, mqarija fit-30 ta' Ottubru 2026.

Żid logħbiet mal-app tiegħek: kif jaħdem ir-rotta tal-WebView

WebView huwa engine tal-browser mingħajr il-browser madwaru. Il-kodiċi nattiv tiegħek jiħoloqu, jiddeċiedi d-daqs u s-settings tiegħu, u jgħidlu x'għandu jgħabbi. Fuq Android il-klassi hija WebView; fuq iOS hija WKWebView. Logħba HTML5 ma tafx dik id-differenza: tara paġna, canvas u ħażna, bħalma tara f'Chrome jew Safari.

Għalhekk ir-rotta hija popolari għall-logħbiet fl-app. It-tim tal-logħbiet jaħdem f'HTML, CSS u JavaScript, it-tim tal-app iżid skrin wieħed u ftit settings, u l-istess folder tal-logħba jista' jgħix ukoll fuq il-websajt. Hemm tliet partijiet mobbli li trid tippjana:

1. Fejn jgħixu l-fajls: imqabbda ġewwa l-app, jew servuti mis-server HTTPS tiegħek.
2. Kif hu kkonfigurat il-WebView: JavaScript, ħażna, l-indirizz minn fejn taħdem il-logħba.
3. Kif jitkellmu l-logħba u l-app: il-ftuħ, il-waqfien, il-buttuna back, l-għeluq.

Il-mudelli tagħna jaqblu ma' din il-forma għax kull wieħed jiġi b'folder game/ lest, b'index.html, immaħżen għall-hosting statiku, u l-logħba nnifisha ma teħtieġ l-ebda PHP jew database. Dak li ma jkun fihom xejn huwa l-parti nattiva. Kull edizzjoni telenka l-apps nattivi jew il-buildi tal-ħwienet taħt "Mhux inklużi f'din l-edizzjoni", u għalhekk l-iskrin tal-WebView huwa xogħol it-tim tiegħek, jew xogħol li nikkwotaw separatament.

Ara l-mudelli tal-logħbiet HTML5

Lokali jew ospitat: fejn għandhom jgħixu l-fajls tal-logħba

Lokali: il-logħba tintbagħat ġewwa l-app

Il-gwida ta' Android dwar it-tagħbija ta' kontenut fl-app tgħid li kontenut tal-web imqabbad ġewwa l-app ma jeħtieġx aċċess għall-internet u ma jonqosx mill-bandwidth tal-utent. Tikopja l-folder game/ fl-assets tal-app u tgħabbih minn hemm. Il-prezz huwa d-daqs: il-logħba żżid mad-download, u kull aġġornament tal-logħba jfisser rilaxx ġdid tal-app permezz tar-reviżjoni tal-ħanut.

Ospitat: l-app tgħabbi l-logħba mis-server tiegħek

Il-WebView jiftaħ indirizz HTTPS fuq id-dominju tiegħek stess. Tista' taġġorna l-logħba mingħajr build ġdid tal-app, u l-app tibqa' żgħira. Il-prezz huwa li l-logħba teħtieġ konnessjoni, u network bil-mod jidher bħala tagħbija bil-mod tal-ewwel darba.

Apple għandha regola speċifika hawn. Gwida 4.7 tal-App Review Guidelines tkopri mini logħbiet HTML5 u JavaScript li mhumiex imqabbda fil-binary. Fost il-kundizzjonijiet tagħha, l-app ma tistax testendi jew tesponi APIs nattivi tal-pjattaforma lil dak is-software mingħajr permess ta' Apple, u trid tipprovdi indiċi tas-software li toffri, b'universal links. Aqra 4.7 kollha qabel tagħżel ir-rotta ospitata għal iOS.

• Daqs tal-app: il-lokali żżid il-piż tal-logħba; l-ospitat ma jżid kważi xejn.
• Aġġornamenti: il-lokali jeħtieġ rilaxx tal-app; l-ospitat jinbidel meta tgħabbi l-fajls.
• Konnessjoni: il-lokali jista' jibda mingħajr network ladarba jkun installat; l-ospitat jeħtieġ wieħed.
• Reviżjoni: logħbiet lokali jiġu rivedtu bħala parti mill-app; logħbiet ospitati fuq iOS jaqgħu taħt il-gwida 4.7.

Settings tal-WebView fuq Android li jagħmlu jew jisfaxxaw logħba

Ħafna rapporti ta' "il-logħba turi skrin abjad" joħorġu minn tliet default. It-tlieta huma ddokumentati fuq Android Developers.

1. JavaScript huwa mitfi. Il-gwida tal-WebView tgħid li JavaScript huwa diżattivat fil-WebView b'default. Kull logħba HTML5 teħtieġu, għalhekk iġġibu fuq WebSettings.
2. Il-ħażna hija mitfija. Ir-referenza ta' WebSettings tgħid li l-valur default ta' setDomStorageEnabled huwa false. Logħbiet li jżommu l-progress f'localStorage jeħtieġuh mixgħul, inkella kull sessjoni tibda minn zero.
3. file:// huwa l-indirizz ħażin. Il-gwida ta' Android dwar kontenut fl-app tispjega li l-URLs ta' file:// huma origini opachi li ma jistgħux jużaw APIs bħal fetch() jew XMLHttpRequest, u tirrakkomanda li ma tixgħelx il-workarounds tal-aċċess għall-fajls. Il-paġni tal-oġġetti tagħna jgħidu l-istess mil-lat tal-logħba: edizzjonijiet bħal Gridspark u Twirldrop ma jaħdmux minn file://.

Is-soluzzjoni għat-tielet punt hija WebViewAssetLoader mill-librerija AndroidX Webkit. Dan iservi l-fajls mill-assets tal-app fuq indirizz HTTPS, u l-eżempju uffiċjali ta' Android jgħabbi https://appassets.androidplatform.net/assets/index.html. Għall-logħba, dan jidher bħal websajt normali, għalhekk ES modules, fetch u l-ħażna jimxu kif jimxu fuq is-server tiegħek.

iOS: WKWebView, fajls lokali u d-data store

Fuq iOS il-komponent huwa WKWebView. Apple tiddokumenta loadFileURL(_:allowingReadAccessTo:) għal kontenut lokali: it-tieni argument huwa l-fajl jew il-folder li WebKit jista' jaqra, u jekk tgħaddi folder il-paġna tista' tgħabbi l-fajls ta' madwaru.

Peress li l-edizzjonijiet tagħna ma jappoġġawx il-ftuħ minn file://, ittestja dak il-mogħdija b'attenzjoni, jew aqbżha. Apple tipprovdi wkoll WKURLSchemeHandler, protokoll biex jgħabbi riżorsi b'skemi tal-URL li WebKit ma jimmaniġġjax, u b'hekk l-app tiegħek tista' tservi l-folder tal-logħba taħt l-iskema tagħha stess. Capacitor jagħmel dan għalik: l-iskema default tiegħu fuq iOS hija capacitor.

Il-ħażna tgħix fil-WKWebsiteDataStore. Il-paġna ta' Apple tgħid li l-store default iżomm id-data tal-websajt b'mod persistenti fuq id-disk, u li store mhux persistenti iżomm id-data fil-memorja biss, u dan huwa maħsub għall-browsing privat. Jekk xi ħadd fit-tim tiegħek jagħżel store mhux persistenti, il-plejers jitilfu l-progress tagħhom kull darba li l-app tingħalaq.

iOS m'għandux buttuna back tas-sistema, għalhekk l-iskrin tal-logħbiet tiegħek jeħtieġ triq 'il barra tiegħu: buttuna ta' għeluq fil-bar nattiv tiegħek, jew waħda li l-logħba ssejjaħ permezz ta' message handler.

Iż-żamma tal-progress ġewwa l-app

Il-logħbiet tagħna jinħażnu fil-ħażna tal-browser tal-plejer, mhux fuq server. Solitaire Links u Deepforge jgħidu dan b'mod ċar fuq il-paġni tagħhom: il-progress jinżamm f'localStorage, mingħajr kont u mingħajr sync tal-cloud. Ġewwa app dan għandu tliet konsegwenzi.

• L-indirizz huwa parti mis-save. Il-ħażna tal-browser tappartjeni għal origin. Jekk timxi minn skema jew host għal ieħor, per eżempju minn dominju ta' test għal appassets.androidplatform.net, il-plejers jibdew mill-ġdid. Agħżel l-indirizz darba.
• Iċ-ċavetta tas-save hija parti mis-save. Il-paġna tal-oġġett ta' Tenguin tgħid lill-kompraturi biex iżommu ċ-ċavetta tas-save bla bidla f'logħba ħajja, inkella l-plejers jitilfu l-progress tagħhom. Diversi edizzjonijiet ta' TypeScript iżommu ċ-ċavetta tal-ħażna f'brand.ts. Ibdilha b'intenzjoni, qabel it-tnedija, qatt wara.
• Tneħħija tad-data tal-app tneħħi l-logħba. Il-kanċellazzjoni tal-installazzjoni jew it-tħassir tal-ħażna tal-app jneħħu s-save, bħalma jagħmel it-tħassir tal-browser.

Jekk il-progress irid isegwi lill-utent bejn apparati, dik hija karatteristika ta' server li ebda edizzjoni tagħna ma tinkludi. Kull edizzjoni telenka s-saves tal-cloud jew il-kontijiet bħala mhux inklużi. Deepforge hija l-aktar punt faċli għall-bidu: il-paġna tagħha tiddeskrivi l-esportazzjoni u l-importazzjoni tas-save fil-menu, u window.DeepForge API żgħir li jħalli l-paġna host twaqqaf, tkompli, taqra s-save u tisma' l-avvenimenti tas-save.

Ara Deepforge u l-API tal-paġna host tagħha

Il-buttuna back, il-waqfien u l-ħruġ mill-logħba

Il-logħbiet HTML5 normalment huma paġna waħda. Dan għandu importanza fuq Android, fejn il-buttuna back timxi fl-istorja tal-WebView. Il-gwida tal-WebView ta' Android turi l-mudell: iċċekkja canGoBack() u sejjaħ goBack(), jew ħalli s-sistema timmaniġġja l-avveniment; b'AndroidX tirreġistra l-istess loġika fuq OnBackPressedDispatcher. F'logħba ta' paġna waħda, l-istorja ta' spiss tkun vojta, għalhekk il-back jagħlaq l-iskrin tal-logħbiet tiegħek minnufih, f'nofs livell.

Iddeċiedi x'għandu jagħmel il-back u ikteb dan:

• L-ewwel press jiftaħ il-menu tal-waqfien tal-logħba; it-tieni press iħalli l-iskrin tal-logħbiet.
• Jew il-back dejjem iħalli, wara li l-logħba tkun isalvat. Kull edizzjoni tisalva lokalment, imma iċċekkja meta tikteb: fi tmiem livell jew matul il-logħba.
• Meta l-app tmur fil-background, waqqaf il-logħba. Mingħajr il-waqfien, it-timers jibqgħu jaħdmu wara l-iskrins l-oħra tal-app tiegħek.

L-edizzjonijiet tagħna ma jiġux b'bridge għall-app. Dak li xi wħud joffru hija triq 'il ġewwa mill-paġna: Gridspark u Ricopop għandhom skrin ta' tap biex tibda u buttuna ta' full screen li tixgħelha jew titfiha f'fajl ta' konfigurazzjoni, u Deepforge tesponi pause u resume lill-paġna. Kwalunkwe ħaġa oħra, bħal messaġġ lill-kodiċi nattiv meta jispiċċa livell, hija bidla żgħira fis-sors li t-tim tiegħek jew xogħol ikkwotat iżid.

Ara Gridspark, JavaScript sempliċi mingħajr pass ta' build biex tilgħab

Liċenzja: logħba waħda, app waħda, u x'għandek tistaqsi l-ewwel

Il-kundizzjonijiet tagħna jagħtu liċenzja perpetwa u mhux esklussiva biex tuża l-edizzjoni f'prodott finali wieħed, għalik jew għal kljent wieħed. L-app tiegħek b'sezzjoni tal-logħbiet hija dak il-prodott finali. Il-plejers jistgħu jaċċessawha b'xejn jew permezz ta' monetizzazzjoni bir-reklami. Tista' tibdel il-kodiċi, l-arti u l-awdjo, u white label huwa permess: il-marka tiegħek tieħu post tagħna.

Tliet sitwazzjonijiet jeħtieġu ħarsa aktar mill-qrib.

• Ħafna apps. Aġenzija li tpoġġi l-istess logħba f'tliet apps ta' klijenti teħtieġ tliet liċenzji. Ix-xiri ta' diversi mudelli f'ordni wieħed jagħti skont tal-pakkett: 5% għal tnejn, 10% għal tlieta, 15% għal erba' u 20% għal ħamsa jew aktar.
• Verżjonijiet Android u iOS tal-istess app. Liċenzja waħda tħallik tippubblika dik il-logħba fejn trid, inkluż Google Play u App Store. Tibqa' liċenzja waħda għal kull prodott finali.
• SDK tal-logħbiet għal żviluppaturi oħra. Il-kundizzjonijiet jipprojbixxu li tiddistribwixxi mill-ġdid il-mudell jew il-kodiċi tiegħu ġewwa prodott ieħor immirat lejn żviluppaturi. Modulu tal-logħbiet li tbigħ lil żviluppaturi oħra tal-app huwa dan it-tip ta' prodott.

Jekk l-app tiegħek tieħu flus għas-sezzjoni tal-logħbiet jew tbigħ oġġetti ġewwa fiha, staqsina wkoll qabel. Il-kundizzjonijiet isemmu aċċess b'xejn u monetizzazzjoni bir-reklami, u diversi edizzjonijiet jelenkaw xiri b'flus veri bħala mhux inkluż. Fuq iOS, il-gwida 3.1.1 tgħid li l-iftuħ ta' karatteristiċi jew kontenut, inklużi livelli tal-logħba, irid jgħaddi mill-in-app purchase.

Liċenzji, fatturi u kwotazzjonijiet għall-kumpaniji

Mistoqsijiet frekwenti

Nista' npoġġi logħba HTML5 ġewwa app Android jew iOS?

Iva. Tgħabbi l-folder tal-logħba f'WebView (WebView fuq Android, WKWebView fuq iOS), sew ibbundlat mal-app jew mis-server HTTPS tiegħek. Ixgħel JavaScript u l-ħażna, u servi l-fajls minn indirizz bi stil HTTPS minflok file://.

Il-logħbiet jaħdmu offline ġewwa l-app?

Biss jekk tibbundla l-fajls u l-edizzjoni ma tgħabbi xejn min-network. Diversi mill-edizzjonijiet tagħna jżommu l-arti, l-awdjo u l-fonts lokali; il-paġna ta' Ricopop tgħid li teħtieġ konnessjoni. Ittestja fl-airplane mode qabel ma tiddikjarah.

Il-plejers jitilfu l-progress meta naġġorna l-app?

Le, jekk l-indirizz u ċ-ċavetta tas-save jibqgħu l-istess. Is-saves jgħixu fil-ħażna tal-WebView għal dak l-origin. Jekk tibdel l-iskema, il-host jew iċ-ċavetta tal-ħażna, kulħadd jibda minn zero.

Kemm liċenzji għandi bżonn għall-app tiegħi?

Waħda għal kull prodott finali. App waħda b'logħba waħda hija liċenzja waħda; l-istess logħba f'apps għal tliet klijenti hija tlieta. L-istess app fuq Google Play u App Store ma teħtieġ it-tieni liċenzja: tista' tippubblika l-logħba liċenzjata fejn trid.

Pass li jmiss

Agħżel logħba, ilgħab id-demo tagħha fuq telefon, imbagħad aqra l-lista tagħha "Mhux inklużi f'din l-edizzjoni" u l-kapitolu tal-manwal dwar is-saves. Jekk tippreferi li nibnu l-iskrin tal-logħbiet fl-app tiegħek, ibgħatilna l-app, il-pjattaformi u l-logħba li togħġbok, u nirrispondulek bil-kamp ta' xogħol, il-prezz u l-ħin.

Ara l-mudelli kollha tal-logħbiet

Itlob kwotazzjoni għall-integrazzjoni fl-app