Tambah Permainan dalam Aplikasi: Jalankan Permainan HTML5 di WebView

Untuk tambah permainan dalam aplikasi, anda tidak perlu memasukkan enjin permainan ke dalamnya. Anda perlukan WebView: komponen yang disediakan oleh Android dan iOS untuk memaparkan kandungan web di dalam skrin natif. Anda letakkan folder permainan HTML5 yang siap sama ada di dalam pakej aplikasi atau pada pelayan HTTPS anda sendiri, halakan WebView ke index.html, dan aplikasi anda mendapat ruangan permainan yang berjalan dengan kod yang sama seperti versi pelayar.

Panduan ini untuk pasukan yang sudah ada aplikasi (aplikasi runcit, bank, platform sekolah, kelab atau jenama media) dan mahukan permainan dalam aplikasi sebagai satu ciri, bukan aplikasi baharu di kedai aplikasi. Ia merangkumi pilihan antara fail tempatan dan fail di pelayan, tetapan WebView yang merosakkan permainan jika salah, cara menyimpan kemajuan, butang kembali, templat kami yang sesuai, dan cara lesen mengira aplikasi. Butiran platform diambil daripada dokumentasi Android Developers dan Apple Developer, dibaca pada 30 Oktober 2026.

Tambah permainan dalam aplikasi: cara laluan WebView berfungsi

WebView ialah enjin pelayar tanpa pelayar di sekelilingnya. Kod natif anda yang menciptanya, menentukan saiz dan tetapannya, dan memberitahu apa yang perlu dimuatkan. Di Android kelasnya ialah WebView; di iOS pula WKWebView. Permainan HTML5 tidak tahu bezanya: ia nampak satu halaman, satu canvas dan storan, sama seperti dalam Chrome atau Safari.

Sebab itulah laluan ini popular untuk permainan dalam aplikasi. Pasukan permainan bekerja dengan HTML, CSS dan JavaScript, pasukan aplikasi menambah satu skrin dan beberapa tetapan, dan folder permainan yang sama boleh juga berada di laman web. Ada tiga bahagian yang perlu dirancang:

1. Di mana fail disimpan: dipakej dalam aplikasi, atau dihidangkan dari pelayan HTTPS anda.
2. Cara WebView dikonfigurasi: JavaScript, storan dan alamat tempat permainan berjalan.
3. Cara permainan dan aplikasi berhubung: membuka, menjeda, butang kembali, menutup.

Templat kami sesuai dengan bentuk ini kerana setiap satu datang dengan folder game/ yang siap dengan index.html, dibina untuk pengehosan statik, tanpa memerlukan PHP atau pangkalan data untuk permainan itu sendiri. Yang tiada dalam mana-mana templat ialah bahagian natif. Setiap edisi menyenaraikan aplikasi natif atau binaan kedai aplikasi di bawah “Not included in this edition” (tidak termasuk dalam edisi ini), jadi skrin WebView ialah kerja pasukan anda, atau kerja yang kami sebut harga secara berasingan.

Lihat templat permainan HTML5

Tempatan atau di pelayan: di mana fail permainan patut disimpan

Tempatan: permainan dihantar bersama aplikasi

Panduan Android untuk memuatkan kandungan dalam aplikasi menyatakan kandungan web yang dikompil ke dalam aplikasi tidak memerlukan akses internet dan tidak menggunakan data pengguna. Anda salin folder game/ ke dalam assets aplikasi dan muatkan dari situ. Harganya ialah saiz: permainan menambah saiz muat turun, dan setiap kemas kini permainan bermakna keluaran aplikasi baharu yang perlu melalui semakan kedai.

Di pelayan: aplikasi memuatkan permainan dari pelayan anda

WebView membuka alamat HTTPS pada domain anda sendiri. Anda boleh mengemas kini permainan tanpa binaan aplikasi baharu, dan aplikasi kekal kecil. Harganya ialah permainan memerlukan sambungan, dan rangkaian yang perlahan bermakna muatan pertama juga perlahan.

Apple ada peraturan khusus di sini. Garis panduan 4.7 dalam App Review Guidelines meliputi permainan mini HTML5 dan JavaScript yang tidak dibenamkan dalam binari. Antara syaratnya, aplikasi tidak boleh melanjutkan atau mendedahkan API platform natif kepada perisian itu tanpa kebenaran Apple, dan mesti menyediakan indeks perisian yang ditawarkannya, dengan universal link. Baca 4.7 sepenuhnya sebelum memilih laluan pelayan untuk iOS.

• Saiz aplikasi: tempatan menambah berat permainan; di pelayan hampir tidak menambah apa-apa.
• Kemas kini: tempatan perlukan keluaran aplikasi; di pelayan berubah sebaik sahaja anda muat naik.
• Sambungan: tempatan boleh bermula tanpa rangkaian selepas dipasang; di pelayan memerlukannya.
• Semakan: permainan tempatan disemak sebagai sebahagian daripada aplikasi; permainan di pelayan pada iOS tertakluk kepada garis panduan 4.7.

Tetapan WebView Android yang menentukan permainan jalan atau rosak

Kebanyakan aduan “permainan hanya tunjuk skrin putih” berpunca daripada tiga tetapan lalai. Ketiga-tiganya didokumenkan di Android Developers.

1. JavaScript dimatikan. Panduan WebView menyatakan JavaScript dimatikan dalam WebView secara lalai. Setiap permainan HTML5 memerlukannya, jadi hidupkannya dalam WebSettings.
2. Storan dimatikan. Rujukan WebSettings menyatakan nilai lalai setDomStorageEnabled ialah false. Permainan yang menyimpan kemajuan dalam localStorage memerlukannya dihidupkan, jika tidak setiap sesi bermula dari kosong.
3. file:// ialah alamat yang salah. Panduan kandungan dalam aplikasi Android menerangkan bahawa URL file:// ialah origin legap (opaque) yang tidak boleh menggunakan API seperti fetch() atau XMLHttpRequest, dan tidak menggalakkan anda menghidupkan jalan pintas akses fail. Halaman item kami menyatakan perkara yang sama dari sisi permainan: edisi seperti Gridspark dan Twirldrop tidak berjalan dari file://.

Penyelesaian untuk perkara ketiga ialah WebViewAssetLoader daripada pustaka AndroidX Webkit. Ia menghidangkan fail dari assets aplikasi melalui alamat HTTPS, dan contoh Android sendiri memuatkan https://appassets.androidplatform.net/assets/index.html. Bagi permainan, itu kelihatan seperti laman web biasa, jadi modul ES, fetch dan storan berfungsi seperti di pelayan anda.

iOS: WKWebView, fail tempatan dan stor data

Di iOS komponennya ialah WKWebView. Apple mendokumenkan loadFileURL(_:allowingReadAccessTo:) untuk kandungan tempatan: argumen kedua ialah fail atau folder yang boleh dibaca oleh WebKit, dan memberikan folder membolehkan halaman memuatkan fail di sekelilingnya.

Oleh sebab edisi kami tidak menyokong pembukaan dari file://, uji laluan ini dengan teliti, atau langkau sahaja. Apple juga menyediakan WKURLSchemeHandler, protokol untuk memuatkan sumber dengan skema URL yang tidak dikendalikan oleh WebKit, supaya aplikasi anda boleh menghidangkan folder permainan di bawah skemanya sendiri. Capacitor melakukannya untuk anda: skema lalainya di iOS ialah capacitor.

Storan berada dalam WKWebsiteDataStore. Halaman Apple menyatakan stor lalai menyimpan data laman web secara kekal ke cakera, dan stor tidak kekal hanya menyimpan data dalam memori, yang bertujuan untuk pelayaran peribadi. Jika seseorang dalam pasukan anda menetapkan stor tidak kekal, pemain akan kehilangan kemajuan setiap kali aplikasi ditutup.

iOS tiada butang kembali sistem, jadi skrin permainan anda perlukan jalan keluar sendiri: butang tutup pada bar natif anda, atau butang yang dipanggil oleh permainan melalui message handler.

Menyimpan kemajuan di dalam aplikasi

Permainan kami menyimpan dalam storan pelayar pemain, bukan di pelayan. Halaman Solitaire Links dan Deepforge menyatakannya dengan jelas: kemajuan disimpan dalam localStorage, tanpa akaun atau penyegerakan awan. Di dalam aplikasi, ini membawa tiga kesan.

• Alamat ialah sebahagian daripada simpanan. Storan pelayar dimiliki oleh satu origin. Jika anda beralih dari satu skema atau hos ke yang lain, contohnya dari domain ujian ke appassets.androidplatform.net, pemain terpaksa bermula semula. Pilih alamat sekali sahaja.
• Kunci simpanan ialah sebahagian daripada simpanan. Halaman item Tenguin meminta pembeli mengekalkan kunci simpanan pada permainan yang sudah dilancarkan, jika tidak pemain kehilangan kemajuan. Beberapa edisi TypeScript menyimpan kunci storan dalam brand.ts. Tukar dengan sengaja, sebelum pelancaran, jangan sekali-kali selepas itu.
• Mengosongkan data aplikasi mengosongkan permainan. Menyahpasang atau mengosongkan storan aplikasi akan memadam simpanan, sama seperti mengosongkan pelayar.

Jika kemajuan perlu mengikut pengguna merentas peranti, itu ciri pelayan yang tiada dalam mana-mana edisi kami. Setiap edisi menyenaraikan simpanan awan atau akaun sebagai tidak termasuk. Deepforge ialah titik permulaan paling mudah: halamannya menerangkan eksport dan import simpanan dalam menu, serta API kecil window.DeepForge yang membolehkan halaman hos menjeda, menyambung semula, membaca simpanan dan mendengar acara simpanan.

Lihat Deepforge dan API halaman hosnya

Butang kembali, menjeda dan keluar dari permainan

Permainan HTML5 biasanya satu halaman sahaja. Ini penting di Android, kerana butang kembali bergerak menerusi sejarah WebView. Panduan WebView Android menunjukkan coraknya: semak canGoBack() dan panggil goBack(), atau biarkan sistem mengendalikan acara itu; dengan AndroidX anda daftarkan logik yang sama pada OnBackPressedDispatcher. Dalam permainan satu halaman, sejarah selalunya kosong, jadi butang kembali terus menutup skrin permainan anda, di tengah-tengah peringkat.

Tentukan apa yang patut dilakukan oleh butang kembali dan tulis dengan jelas:

• Tekanan pertama membuka menu jeda permainan; tekanan kedua keluar dari skrin permainan.
• Atau butang kembali sentiasa keluar, selepas permainan menyimpan. Setiap edisi menyimpan secara tempatan, tetapi semak bila ia menulis: di hujung peringkat atau semasa bermain.
• Apabila aplikasi masuk ke latar belakang, jeda permainan. Tanpa jeda, pemasa terus berjalan di belakang skrin lain aplikasi anda.

Edisi kami tidak disertakan dengan jambatan aplikasi. Yang ditawarkan oleh sesetengahnya ialah laluan masuk dari halaman: Gridspark dan Ricopop ada skrin ketik untuk mula dan butang skrin penuh yang boleh dihidupkan atau dimatikan dalam fail konfigurasi, dan Deepforge mendedahkan jeda dan sambung semula kepada halaman. Selain itu, seperti menghantar mesej kepada kod natif apabila peringkat tamat, ialah perubahan kecil dalam kod sumber yang ditambah oleh pasukan anda atau oleh kami melalui kerja bersebut harga.

Lihat Gridspark, JavaScript biasa tanpa langkah binaan untuk bermain

Lesen: satu permainan, satu aplikasi, dan apa yang perlu ditanya dahulu

Terma kami memberikan lesen kekal dan tidak eksklusif untuk menggunakan edisi itu dalam satu produk akhir, untuk anda atau untuk seorang pelanggan. Aplikasi anda bersama ruangan permainannya ialah produk akhir itu. Pemain boleh mengaksesnya secara percuma atau melalui pengewangan iklan. Anda boleh mengubah kod, grafik dan audio, dan white label dibenarkan: jenama anda menggantikan jenama kami.

Tiga situasi perlu diteliti dengan lebih dekat.

• Beberapa aplikasi. Agensi yang memasukkan permainan yang sama ke dalam tiga aplikasi pelanggan memerlukan tiga lesen. Membeli beberapa templat dalam satu pesanan memberi diskaun pakej: 5% untuk 2, 10% untuk 3, 15% untuk 4 dan 20% untuk 5 atau lebih.
• Versi Android dan iOS bagi aplikasi yang sama. Satu lesen membolehkan anda menerbitkan permainan itu di mana-mana sahaja yang anda mahu, termasuk Google Play dan App Store. Ia kekal satu lesen bagi setiap produk akhir.
• SDK permainan untuk pembangun lain. Terma melarang pengedaran semula templat atau kodnya di dalam produk lain yang ditujukan kepada pembangun. Modul permainan yang anda jual kepada pembuat aplikasi lain ialah produk jenis itu.

Jika aplikasi anda mengenakan bayaran untuk ruangan permainan atau menjual item di dalamnya, tanya kami dahulu juga. Terma menyebut akses percuma dan pengewangan iklan, dan beberapa edisi menyenaraikan pembelian dengan wang sebenar sebagai tidak termasuk. Di iOS, garis panduan 3.1.1 menyatakan bahawa membuka ciri atau kandungan, termasuk peringkat permainan, mesti menggunakan pembelian dalam aplikasi.

Lesen, invois dan sebut harga untuk syarikat

Soalan lazim

Bolehkah saya letak permainan HTML5 di dalam aplikasi Android atau iOS?

Boleh. Muatkan folder permainan dalam WebView (WebView di Android, WKWebView di iOS), sama ada dipakej bersama aplikasi atau dari pelayan HTTPS anda. Hidupkan JavaScript dan storan, dan hidangkan fail dari alamat gaya HTTPS, bukan file://.

Adakah permainan berfungsi secara luar talian di dalam aplikasi?

Hanya jika anda memakejkan fail dan edisi itu tidak memuatkan apa-apa dari rangkaian. Beberapa edisi kami menyimpan grafik, audio dan fon secara tempatan; halaman Ricopop menyatakan ia memerlukan sambungan. Uji dalam mod kapal terbang sebelum anda berjanji.

Adakah pemain akan kehilangan kemajuan apabila saya mengemas kini aplikasi?

Tidak, jika alamat dan kunci simpanan kekal sama. Simpanan berada dalam storan WebView bagi origin itu. Menukar skema, hos atau kunci storan menyebabkan semua orang bermula dari kosong.

Berapa banyak lesen yang aplikasi saya perlukan?

Satu bagi setiap produk akhir. Satu aplikasi dengan satu permainan ialah satu lesen; permainan yang sama dalam aplikasi untuk tiga pelanggan ialah tiga lesen. Aplikasi yang sama di Google Play dan App Store tidak memerlukan lesen kedua: anda boleh menerbitkan permainan berlesen itu di mana-mana sahaja yang anda mahu.

Langkah seterusnya

Pilih satu permainan, main demonya pada telefon, kemudian baca senarai “Not included in this edition” (tidak termasuk dalam edisi ini) dan bab tentang simpanan dalam manualnya. Jika anda lebih suka kami membina skrin permainan dalam aplikasi anda, hantarkan kepada kami butiran aplikasi, platform dan permainan yang anda suka, dan kami akan membalas dengan skop, harga dan tempoh masa.

Lihat semua templat permainan

Minta sebut harga untuk integrasi aplikasi