เพิ่มเกมในแอป: รันเกม HTML5 ใน WebView

การเพิ่มเกมในแอปไม่จำเป็นต้องใส่เกมเอนจินเข้าไปในแอป สิ่งที่ต้องใช้คือ WebView ซึ่งเป็นคอมโพเนนต์ที่ Android และ iOS มีให้สำหรับแสดงเนื้อหาเว็บในหน้าจอเนทีฟ คุณนำโฟลเดอร์เกม HTML5 ที่เสร็จแล้วไปไว้ในแพ็กเกจแอป หรือบนเซิร์ฟเวอร์ HTTPS ของคุณเอง ชี้ WebView ไปที่ไฟล์ index.html แล้วแอปของคุณก็จะมีหมวดเกมที่รันด้วยโค้ดเดียวกับเวอร์ชันบนเบราว์เซอร์

คู่มือนี้เขียนสำหรับทีมที่มีแอปอยู่แล้ว (แอปค้าปลีก ธนาคาร แพลตฟอร์มโรงเรียน สโมสร หรือแบรนด์สื่อ) และอยากได้เกมในแอปเป็นฟีเจอร์หนึ่ง ไม่ใช่ออกแอปใหม่ในสโตร์ เนื้อหาครอบคลุมการเลือกระหว่างไฟล์ในเครื่องกับบนเซิร์ฟเวอร์ การตั้งค่า WebView ที่ทำให้เกมพังถ้าตั้งผิด การบันทึกความคืบหน้า ปุ่มย้อนกลับ เทมเพลตของเราตัวไหนเหมาะ และไลเซนส์นับจำนวนแอปอย่างไร รายละเอียดแพลตฟอร์มมาจากเอกสาร Android Developers และ Apple Developer ที่อ่านเมื่อวันที่ 30 ตุลาคม 2026

เพิ่มเกมในแอป: วิธี WebView ทำงานอย่างไร

WebView คือเอนจินเบราว์เซอร์ที่ไม่มีตัวเบราว์เซอร์ครอบอยู่ โค้ดเนทีฟของคุณเป็นผู้สร้าง กำหนดขนาดและการตั้งค่า และบอกว่าจะโหลดอะไร บน Android คลาสนี้ชื่อ WebView ส่วนบน iOS ชื่อ WKWebView เกม HTML5 แยกไม่ออกว่าต่างกันอย่างไร มันเห็นแค่หน้าเว็บ canvas และพื้นที่เก็บข้อมูล เหมือนตอนอยู่ใน Chrome หรือ Safari

นี่คือเหตุผลที่วิธีนี้นิยมใช้ทำเกมในแอป ทีมเกมทำงานด้วย HTML, CSS และ JavaScript ทีมแอปเพิ่มหน้าจอหนึ่งหน้าและการตั้งค่าไม่กี่อย่าง และโฟลเดอร์เกมชุดเดียวกันยังอยู่บนเว็บไซต์ได้ด้วย มีสามส่วนที่ต้องวางแผน:

1. ไฟล์อยู่ที่ไหน: แพ็กไว้ในแอป หรือเสิร์ฟจากเซิร์ฟเวอร์ HTTPS ของคุณ
2. ตั้งค่า WebView อย่างไร: JavaScript พื้นที่เก็บข้อมูล และที่อยู่ที่เกมรันอยู่
3. เกมกับแอปสื่อสารกันอย่างไร: การเปิด หยุดชั่วคราว ปุ่มย้อนกลับ และการปิด

เทมเพลตของเราเข้ากับรูปแบบนี้ เพราะทุกตัวมาพร้อมโฟลเดอร์ game/ ที่มี index.html พร้อมใช้ สร้างมาสำหรับโฮสติ้งแบบสแตติก ตัวเกมไม่ต้องใช้ PHP หรือฐานข้อมูล สิ่งที่ไม่มีในเทมเพลตไหนเลยคือส่วนเนทีฟ ทุกรุ่นระบุแอปเนทีฟหรือบิลด์สำหรับสโตร์ไว้ในรายการ “Not included in this edition” (สิ่งที่ไม่รวมในรุ่นนี้) ดังนั้นหน้าจอ WebView เป็นงานของทีมคุณ หรือเป็นงานที่เราเสนอราคาแยกต่างหาก

ดูเทมเพลตเกม HTML5

ในเครื่องหรือบนเซิร์ฟเวอร์: ไฟล์เกมควรอยู่ที่ไหน

ในเครื่อง: เกมมาพร้อมกับแอป

คู่มือการโหลดเนื้อหาในแอปของ Android ระบุว่าเนื้อหาเว็บที่คอมไพล์รวมในแอปไม่ต้องใช้อินเทอร์เน็ตและไม่กินแบนด์วิดท์ของผู้ใช้ คุณคัดลอกโฟลเดอร์ game/ ไปไว้ใน assets ของแอปแล้วโหลดจากตรงนั้น ราคาที่ต้องจ่ายคือขนาด เกมทำให้ไฟล์ดาวน์โหลดใหญ่ขึ้น และทุกครั้งที่อัปเดตเกมก็ต้องออกแอปเวอร์ชันใหม่ผ่านการรีวิวของสโตร์

บนเซิร์ฟเวอร์: แอปโหลดเกมจากเซิร์ฟเวอร์ของคุณ

WebView เปิดที่อยู่ HTTPS บนโดเมนของคุณเอง คุณอัปเดตเกมได้โดยไม่ต้องบิลด์แอปใหม่ และแอปยังเล็กอยู่ ราคาที่ต้องจ่ายคือเกมต้องใช้การเชื่อมต่อ ถ้าเน็ตช้า การโหลดครั้งแรกก็ช้าตาม

Apple มีกฎเฉพาะเรื่องนี้ ข้อ 4.7 ของ App Review Guidelines ครอบคลุมมินิเกม HTML5 และ JavaScript ที่ไม่ได้ฝังอยู่ในไบนารี เงื่อนไขข้อหนึ่งคือแอปต้องไม่ขยายหรือเปิด API เนทีฟของแพลตฟอร์มให้ซอฟต์แวร์นั้นใช้โดยไม่ได้รับอนุญาตจาก Apple และต้องมีดัชนีของซอฟต์แวร์ที่แอปนำเสนอ พร้อม universal link อ่านข้อ 4.7 ให้ครบก่อนเลือกวิธีโหลดจากเซิร์ฟเวอร์สำหรับ iOS

• ขนาดแอป: แบบในเครื่องเพิ่มน้ำหนักของเกม แบบบนเซิร์ฟเวอร์แทบไม่เพิ่มเลย
• การอัปเดต: แบบในเครื่องต้องออกแอปเวอร์ชันใหม่ แบบบนเซิร์ฟเวอร์เปลี่ยนทันทีที่คุณอัปโหลด
• การเชื่อมต่อ: แบบในเครื่องเปิดได้โดยไม่มีเน็ตหลังติดตั้ง แบบบนเซิร์ฟเวอร์ต้องมีเน็ต
• การรีวิว: เกมในเครื่องถูกรีวิวเป็นส่วนหนึ่งของแอป ส่วนเกมบนเซิร์ฟเวอร์ใน iOS อยู่ภายใต้ข้อ 4.7

การตั้งค่า WebView บน Android ที่ชี้เป็นชี้ตายให้เกม

ปัญหา “เกมขึ้นแต่หน้าจอขาว” ส่วนใหญ่มาจากค่าเริ่มต้นสามอย่าง ทั้งสามอย่างมีเขียนไว้ใน Android Developers

1. JavaScript ปิดอยู่ คู่มือ WebView ระบุว่า JavaScript ถูกปิดใน WebView โดยค่าเริ่มต้น เกม HTML5 ทุกเกมต้องใช้ จึงต้องเปิดใน WebSettings
2. พื้นที่เก็บข้อมูลปิดอยู่ เอกสารอ้างอิง WebSettings ระบุว่าค่าเริ่มต้นของ setDomStorageEnabled คือ false เกมที่เก็บความคืบหน้าใน localStorage ต้องเปิดค่านี้ ไม่อย่างนั้นทุกครั้งที่เล่นจะเริ่มจากศูนย์
3. file:// เป็นที่อยู่ที่ผิด คู่มือเนื้อหาในแอปของ Android อธิบายว่า URL แบบ file:// เป็น opaque origin ที่ใช้ API อย่าง fetch() หรือ XMLHttpRequest ไม่ได้ และแนะนำไม่ให้เปิดวิธีเลี่ยงด้านการเข้าถึงไฟล์ หน้าสินค้าของเราก็บอกเรื่องเดียวกันจากฝั่งเกม: รุ่นอย่าง Gridspark และ Twirldrop รันจาก file:// ไม่ได้

ทางแก้ข้อสามคือ WebViewAssetLoader จากไลบรารี AndroidX Webkit มันเสิร์ฟไฟล์จาก assets ของแอปผ่านที่อยู่ HTTPS และตัวอย่างของ Android เองโหลด https://appassets.androidplatform.net/assets/index.html สำหรับเกม นี่ดูเหมือนเว็บไซต์ปกติ ES module, fetch และพื้นที่เก็บข้อมูลจึงทำงานเหมือนบนเซิร์ฟเวอร์ของคุณ

iOS: WKWebView ไฟล์ในเครื่อง และที่เก็บข้อมูล

บน iOS คอมโพเนนต์นี้คือ WKWebView Apple อธิบาย loadFileURL(_:allowingReadAccessTo:) สำหรับเนื้อหาในเครื่อง: อาร์กิวเมนต์ตัวที่สองคือไฟล์หรือโฟลเดอร์ที่ WebKit อ่านได้ และถ้าส่งโฟลเดอร์เข้าไป หน้าเว็บจะโหลดไฟล์รอบ ๆ ได้

เนื่องจากรุ่นของเราไม่รองรับการเปิดจาก file:// ให้ทดสอบเส้นทางนี้อย่างละเอียด หรือข้ามไปเลย Apple ยังมี WKURLSchemeHandler ซึ่งเป็นโปรโตคอลสำหรับโหลดทรัพยากรด้วย URL scheme ที่ WebKit ไม่รองรับ แอปของคุณจึงเสิร์ฟโฟลเดอร์เกมภายใต้ scheme ของตัวเองได้ Capacitor จัดการเรื่องนี้ให้ โดย scheme เริ่มต้นบน iOS คือ capacitor

ข้อมูลเก็บอยู่ใน WKWebsiteDataStore หน้าของ Apple ระบุว่าที่เก็บเริ่มต้นบันทึกข้อมูลเว็บไซต์ลงดิสก์แบบถาวร ส่วนที่เก็บแบบไม่ถาวรเก็บข้อมูลไว้ในหน่วยความจำเท่านั้น ซึ่งมีไว้สำหรับการท่องเว็บแบบส่วนตัว ถ้ามีคนในทีมตั้งที่เก็บแบบไม่ถาวร ผู้เล่นจะเสียความคืบหน้าทุกครั้งที่ปิดแอป

iOS ไม่มีปุ่มย้อนกลับของระบบ หน้าจอเกมจึงต้องมีทางออกของตัวเอง: ปุ่มปิดบนแถบเนทีฟ หรือปุ่มที่เกมเรียกผ่าน message handler

การบันทึกความคืบหน้าภายในแอป

เกมของเราเซฟในพื้นที่เก็บข้อมูลเบราว์เซอร์ของผู้เล่น ไม่ใช่บนเซิร์ฟเวอร์ หน้า Solitaire Links และ Deepforge เขียนไว้ชัดเจนว่าความคืบหน้าเก็บใน localStorage ไม่มีบัญชีหรือการซิงก์คลาวด์ เมื่ออยู่ในแอปจึงมีผลตามมาสามข้อ

• ที่อยู่เป็นส่วนหนึ่งของเซฟ พื้นที่เก็บข้อมูลเบราว์เซอร์ผูกกับ origin ถ้าย้ายจาก scheme หรือโฮสต์หนึ่งไปอีกอัน เช่นจากโดเมนทดสอบไปเป็น appassets.androidplatform.net ผู้เล่นต้องเริ่มใหม่ เลือกที่อยู่ครั้งเดียวแล้วใช้ไปเลย
• คีย์เซฟเป็นส่วนหนึ่งของเซฟ หน้าสินค้า Tenguin บอกผู้ซื้อให้คงคีย์เซฟไว้ในเกมที่เปิดใช้งานแล้ว ไม่อย่างนั้นผู้เล่นจะเสียความคืบหน้า หลายรุ่นที่เป็น TypeScript เก็บคีย์ไว้ใน brand.ts ถ้าจะเปลี่ยนให้เปลี่ยนโดยตั้งใจก่อนเปิดตัว ห้ามเปลี่ยนหลังจากนั้น
• ล้างข้อมูลแอปก็คือล้างเกม การถอนการติดตั้งหรือล้างพื้นที่เก็บข้อมูลของแอปจะลบเซฟ เหมือนกับการล้างข้อมูลเบราว์เซอร์

ถ้าความคืบหน้าต้องตามผู้ใช้ข้ามอุปกรณ์ นั่นคือฟีเจอร์ฝั่งเซิร์ฟเวอร์ที่ไม่มีในรุ่นไหนของเราเลย ทุกรุ่นระบุว่าเซฟบนคลาวด์หรือบัญชีผู้ใช้ไม่รวมอยู่ Deepforge เป็นจุดเริ่มต้นที่ง่ายที่สุด หน้าของมันอธิบายการส่งออกและนำเข้าเซฟในเมนู และ API ขนาดเล็ก window.DeepForge ที่ให้หน้าโฮสต์หยุดเกม เล่นต่อ อ่านเซฟ และรับฟังอีเวนต์การเซฟได้

ดู Deepforge และ API สำหรับหน้าโฮสต์

ปุ่มย้อนกลับ การหยุดชั่วคราว และการออกจากเกม

เกม HTML5 มักเป็นหน้าเดียว เรื่องนี้สำคัญบน Android ที่ปุ่มย้อนกลับจะถอยไปตามประวัติของ WebView คู่มือ WebView ของ Android แสดงรูปแบบไว้: ตรวจ canGoBack() แล้วเรียก goBack() หรือปล่อยให้ระบบจัดการอีเวนต์ ถ้าใช้ AndroidX ให้ลงทะเบียนตรรกะเดียวกันกับ OnBackPressedDispatcher ในเกมหน้าเดียว ประวัติมักว่างเปล่า ปุ่มย้อนกลับจึงปิดหน้าจอเกมทันทีกลางด่าน

ตัดสินใจว่าปุ่มย้อนกลับควรทำอะไร แล้วเขียนไว้ให้ชัด:

• กดครั้งแรกเปิดเมนูหยุดเกม กดครั้งที่สองออกจากหน้าจอเกม
• หรือให้ปุ่มย้อนกลับออกเสมอ หลังจากเกมเซฟแล้ว ทุกรุ่นเซฟในเครื่อง แต่ต้องเช็กว่าเซฟตอนไหน: ตอนจบด่านหรือระหว่างเล่น
• เมื่อแอปไปอยู่เบื้องหลัง ให้หยุดเกมไว้ ถ้าไม่หยุด ตัวจับเวลาจะเดินต่อไปหลังหน้าจออื่นของแอป

รุ่นของเราไม่มีบริดจ์เชื่อมกับแอปมาให้ สิ่งที่บางรุ่นมีคือช่องทางจากฝั่งหน้าเว็บ: Gridspark และ Ricopop มีหน้าจอแตะเพื่อเริ่มและปุ่มเต็มจอที่เปิดหรือปิดได้ในไฟล์คอนฟิก ส่วน Deepforge เปิดคำสั่งหยุดและเล่นต่อให้หน้าเว็บเรียกใช้ อย่างอื่นนอกจากนี้ เช่นการส่งข้อความไปยังโค้ดเนทีฟเมื่อจบด่าน เป็นการแก้ซอร์สโค้ดเล็กน้อยที่ทีมของคุณเพิ่มเองหรือให้เราทำตามใบเสนอราคา

ดู Gridspark: JavaScript ล้วน เล่นได้โดยไม่ต้องบิลด์

ไลเซนส์: หนึ่งเกม หนึ่งแอป และสิ่งที่ควรถามก่อน

ข้อตกลงของเราให้ไลเซนส์แบบถาวรและไม่ผูกขาดสำหรับใช้รุ่นนั้นในผลิตภัณฑ์ปลายทางหนึ่งชิ้น สำหรับคุณเองหรือลูกค้าหนึ่งราย แอปของคุณพร้อมหมวดเกมคือผลิตภัณฑ์ปลายทางนั้น ผู้เล่นเข้าถึงได้ฟรีหรือผ่านการหารายได้จากโฆษณา คุณแก้ไขโค้ด ภาพ และเสียงได้ และทำ white label ได้ คือใช้แบรนด์ของคุณแทนแบรนด์ของเรา

มีสามกรณีที่ต้องดูให้ละเอียดขึ้น

• หลายแอป เอเจนซีที่ใส่เกมเดียวกันในแอปของลูกค้าสามราย ต้องใช้สามไลเซนส์ การซื้อหลายเทมเพลตในคำสั่งซื้อเดียวได้ส่วนลดแบบบันเดิล: 5% สำหรับ 2 ชิ้น 10% สำหรับ 3 ชิ้น 15% สำหรับ 4 ชิ้น และ 20% สำหรับ 5 ชิ้นขึ้นไป
• แอปเดียวกันทั้งเวอร์ชัน Android และ iOS ไลเซนส์เดียวให้คุณเผยแพร่เกมนั้นได้ทุกที่ที่ต้องการ รวมถึง Google Play และ App Store ยังคงเป็นหนึ่งไลเซนส์ต่อหนึ่งผลิตภัณฑ์ปลายทาง
• SDK เกมสำหรับนักพัฒนาคนอื่น ข้อตกลงห้ามแจกจ่ายเทมเพลตหรือโค้ดซ้ำภายในผลิตภัณฑ์อื่นที่ทำมาสำหรับนักพัฒนา โมดูลเกมที่คุณขายให้ผู้สร้างแอปรายอื่นก็คือผลิตภัณฑ์ประเภทนั้น

ถ้าแอปของคุณเก็บเงินค่าหมวดเกมหรือขายไอเทมข้างใน ก็ถามเราก่อนเช่นกัน ข้อตกลงระบุถึงการเข้าถึงฟรีและการหารายได้จากโฆษณา และหลายรุ่นระบุว่าการซื้อด้วยเงินจริงไม่รวมอยู่ บน iOS ข้อ 3.1.1 กำหนดว่าการปลดล็อกฟีเจอร์หรือเนื้อหา รวมถึงด่านในเกม ต้องใช้การซื้อภายในแอป

ไลเซนส์ ใบแจ้งหนี้ และใบเสนอราคาสำหรับบริษัท

คำถามที่พบบ่อย

ใส่เกม HTML5 ในแอป Android หรือ iOS ได้ไหม

ได้ โหลดโฟลเดอร์เกมใน WebView (WebView บน Android, WKWebView บน iOS) จะแพ็กรวมกับแอปหรือโหลดจากเซิร์ฟเวอร์ HTTPS ของคุณก็ได้ เปิด JavaScript และพื้นที่เก็บข้อมูล และเสิร์ฟไฟล์จากที่อยู่แบบ HTTPS แทน file://

เกมเล่นออฟไลน์ในแอปได้ไหม

ได้เฉพาะเมื่อคุณแพ็กไฟล์ไว้ในแอปและรุ่นนั้นไม่โหลดอะไรจากเน็ตเลย หลายรุ่นของเราเก็บภาพ เสียง และฟอนต์ไว้ในเครื่อง ส่วนหน้า Ricopop ระบุว่าต้องใช้การเชื่อมต่อ ทดสอบในโหมดเครื่องบินก่อนสัญญากับใคร

ผู้เล่นจะเสียความคืบหน้าเมื่ออัปเดตแอปไหม

ไม่เสีย ถ้าที่อยู่และคีย์เซฟยังเหมือนเดิม เซฟอยู่ในพื้นที่เก็บข้อมูลของ WebView สำหรับ origin นั้น การเปลี่ยน scheme โฮสต์ หรือคีย์จะทำให้ทุกคนเริ่มจากศูนย์

แอปของฉันต้องใช้กี่ไลเซนส์

หนึ่งไลเซนส์ต่อผลิตภัณฑ์ปลายทาง แอปเดียวที่มีเกมเดียวคือหนึ่งไลเซนส์ เกมเดียวกันในแอปของลูกค้าสามรายคือสามไลเซนส์ แอปเดียวกันบน Google Play และ App Store ไม่ต้องซื้อไลเซนส์ที่สอง คุณเผยแพร่เกมที่ได้ไลเซนส์ได้ทุกที่ที่ต้องการ

ขั้นตอนถัดไป

เลือกเกม ลองเล่นเดโมบนมือถือ แล้วอ่านรายการ “Not included in this edition” (สิ่งที่ไม่รวมในรุ่นนี้) และบทเรื่องการเซฟในคู่มือของเกม ถ้าอยากให้เราสร้างหน้าจอเกมในแอปให้ ส่งรายละเอียดแอป แพลตฟอร์ม และเกมที่คุณชอบมาให้เรา แล้วเราจะตอบกลับพร้อมขอบเขตงาน ราคา และระยะเวลา

ดูเทมเพลตเกมทั้งหมด

ขอใบเสนอราคาสำหรับการเชื่อมเกมเข้าแอป