ऐप में गेम जोड़ें: WebView के अंदर HTML5 गेम कैसे चलाएं

ऐप में गेम जोड़ने के लिए उसके भीतर गेम इंजन की ज़रूरत नहीं होती। ज़रूरत होती है 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 या डेटाबेस की ज़रूरत नहीं। लेकिन इनमें से कोई भी नेटिव हिस्सा शामिल नहीं करता। हर संस्करण नेटिव ऐप या ऐप-स्टोर बिल्ड को "इस संस्करण में शामिल नहीं" की सूची में रखता है, इसलिए WebView वाली स्क्रीन आपकी टीम का काम है, या वह काम जिसे हम अलग से कोट करते हैं।

HTML5 गेम टेम्पलेट देखें

लोकल या होस्ट: गेम की फ़ाइलें कहां रहनी चाहिए

लोकल: गेम ऐप के साथ आता है

Android की गाइड कहती है कि ऐप में कंपाइल किए गए वेब कंटेंट को इंटरनेट एक्सेस की ज़रूरत नहीं होती और वह उपयोगकर्ता का बैंडविड्थ नहीं लेता। आप game/ फ़ोल्डर को ऐप के assets में कॉपी करते हैं और वहीं से लोड करते हैं। कीमत है आकार: गेम डाउनलोड का हिस्सा बन जाता है, और गेम का हर अपडेट स्टोर रिव्यू से गुज़रने वाली नई ऐप रिलीज़ मांगता है।

होस्ट किया हुआ: ऐप गेम को आपके सर्वर से लोड करता है

WebView आपके अपने डोमेन के HTTPS पते को खोलता है। आप नई ऐप बिल्ड के बिना गेम अपडेट कर सकते हैं, और ऐप छोटा रहता है। कीमत यह है कि गेम को कनेक्शन चाहिए, और धीमा नेटवर्क पहली बार लोड होने को धीमा दिखा देता है।

यहां Apple का एक खास नियम है। App Review Guidelines का गाइडलाइन 4.7 उन HTML5 और JavaScript मिनी गेम्स पर लागू होता है जो बाइनरी में एम्बेड नहीं हैं। इसकी शर्तों में से एक यह है कि ऐप उस सॉफ़्टवेयर तक नेटिव प्लेटफ़ॉर्म API को Apple की अनुमति के बिना न बढ़ा सकता है और न उजागर कर सकता है, और उसे universal links के साथ अपने पेश किए गए सॉफ़्टवेयर की एक सूची देनी होगी। iOS के लिए होस्ट किया रास्ता चुनने से पहले 4.7 को पूरा पढ़ें।

• ऐप का आकार: लोकल में गेम का वज़न जुड़ता है; होस्ट में लगभग कुछ नहीं।
• अपडेट: लोकल में ऐप रिलीज़ चाहिए; होस्ट में अपलोड करते ही बदलाव आ जाता है।
• कनेक्शन: लोकल एक बार इंस्टॉल होने के बाद बिना नेटवर्क शुरू हो सकता है; होस्ट को नेटवर्क चाहिए।
• रिव्यू: लोकल गेम ऐप के हिस्से के रूप में रिव्यू होते हैं; iOS पर होस्ट किए गेम गाइडलाइन 4.7 के दायरे में आते हैं।

Android WebView की वे सेटिंग्स जो गेम बनाती या बिगाड़ती हैं

"गेम में सफ़ेद स्क्रीन दिखती है" वाली ज़्यादातर रिपोर्ट तीन डिफ़ॉल्ट से आती हैं। तीनों Android Developers पर दस्तावेज़ित हैं।

1. JavaScript बंद है। WebView गाइड कहती है कि WebView में JavaScript डिफ़ॉल्ट रूप से अक्षम है। हर HTML5 गेम को इसकी ज़रूरत होती है, इसलिए WebSettings में इसे चालू करें।
2. स्टोरेज बंद है। WebSettings का संदर्भ कहता है कि setDomStorageEnabled का डिफ़ॉल्ट मान false है। जो गेम प्रगति localStorage में रखते हैं उन्हें यह चालू चाहिए, वरना हर सत्र शून्य से शुरू होगा।
3. file:// गलत पता है। Android की in-app कंटेंट गाइड समझाती है कि file:// URL अपारदर्शी origin हैं जो fetch() या XMLHttpRequest जैसे APIs इस्तेमाल नहीं कर सकते, और वह file-access के उपायों को चालू करने के खिलाफ सलाह देती है। हमारे आइटम पेज गेम की ओर से यही बात कहते हैं: Gridspark और Twirldrop जैसे संस्करण file:// से नहीं चलते।

तीसरे बिंदु का हल AndroidX Webkit लाइब्रेरी का WebViewAssetLoader है। यह आपके ऐप के assets को HTTPS पते के ज़रिए परोसता है, और Android का अपना उदाहरण https://appassets.androidplatform.net/assets/index.html लोड करता है। गेम को यह एक सामान्य वेबसाइट जैसा लगता है, इसलिए ES modules, fetch और स्टोरेज वैसे ही व्यवहार करते हैं जैसे आपके सर्वर पर।

iOS: WKWebView, लोकल फ़ाइलें और डेटा स्टोर

iOS पर कंपोनेंट WKWebView है। Apple लोकल कंटेंट के लिए loadFileURL(_:allowingReadAccessTo:) का दस्तावेज़ देता है: दूसरा तर्क वह फ़ाइल या फ़ोल्डर है जिसे WebKit पढ़ सकता है, और फ़ोल्डर पास करने पर पेज उसके आसपास की फ़ाइलें लोड कर सकता है।

क्योंकि हमारे संस्करण file:// से खोलने को समर्थन नहीं देते, उस रास्ते को सावधानी से टेस्ट करें, या उसे छोड़ दें। Apple WKURLSchemeHandler भी देता है, एक प्रोटोकॉल जो उन resources को लोड करता है जिनकी URL स्कीम WebKit खुद नहीं संभालता, ताकि आपका ऐप गेम फ़ोल्डर को अपनी स्कीम के तहत परोस सके। Capacitor यह आपके लिए करता है: उसकी डिफ़ॉल्ट iOS स्कीम capacitor है।

स्टोरेज WKWebsiteDataStore में रहता है। Apple का पेज कहता है कि डिफ़ॉल्ट स्टोर वेबसाइट का डेटा लगातार डिस्क पर सेव करता है, और नॉन-पर्सिस्टेंट स्टोर डेटा सिर्फ़ मेमोरी में रखता है, जो प्राइवेट ब्राउज़िंग के लिए है। अगर आपकी टीम में कोई नॉन-पर्सिस्टेंट स्टोर सेट करता है, तो ऐप बंद होने पर खिलाड़ी की प्रगति हर बार खो जाएगी।

iOS में सिस्टम का बैक बटन नहीं होता, इसलिए आपकी गेम स्क्रीन को अपना बाहर निकलने का रास्ता चाहिए: आपकी नेटिव बार में एक बंद करने का बटन, या वह बटन जिसे गेम message handler के ज़रिए कॉल करता है।

ऐप के भीतर प्रगति सेव करना

हमारे गेम प्रगति खिलाड़ी के ब्राउज़र स्टोरेज में सेव करते हैं, सर्वर पर नहीं। Solitaire Links और Deepforge अपने पेजों पर साफ़ कहते हैं: प्रगति localStorage में रहती है, बिना अकाउंट और बिना क्लाउड सिंक के। ऐप के भीतर इसके तीन नतीजे हैं।

• पता भी सेव का हिस्सा है। ब्राउज़र स्टोरेज एक origin से जुड़ा होता है। अगर आप एक स्कीम या होस्ट से दूसरे पर जाते हैं, जैसे किसी टेस्ट डोमेन से appassets.androidplatform.net पर, तो खिलाड़ी फिर से शुरू करेंगे। पता एक बार चुनें।
• सेव की की भी सेव का हिस्सा है। Tenguin का आइटम पेज खरीदारों से कहता है कि लाइव गेम पर सेव की को बदले बिना रखें, वरना खिलाड़ियों की प्रगति खो जाएगी। कई TypeScript संस्करण स्टोरेज की brand.ts में रखते हैं। उसे जानबूझकर, लॉन्च से पहले बदलें, उसके बाद कभी नहीं।
• ऐप का डेटा साफ़ करने से गेम भी साफ़ होता है। ऐप को अनइंस्टॉल करने या उसका स्टोरेज साफ़ करने से सेव हट जाता है, ठीक वैसे ही जैसे ब्राउज़र साफ़ करने से होता है।

अगर प्रगति को उपयोगकर्ता के साथ कई डिवाइसों पर जाना है, तो वह एक सर्वर फ़ीचर है, जो हमारा कोई संस्करण शामिल नहीं करता। हर संस्करण क्लाउड सेव या अकाउंट को शामिल नहीं बताता। सबसे आसान शुरुआत Deepforge है: उसका पेज मेनू में सेव के export और import का वर्णन करता है, और एक छोटा window.DeepForge API जो होस्ट पेज को गेम रोकने, फिर से चलाने, सेव पढ़ने और सेव इवेंट सुनने देता है।

Deepforge और उसका होस्ट-पेज API देखें

बैक बटन, रुकना और गेम से बाहर निकलना

HTML5 गेम आमतौर पर एक ही पेज होते हैं। यह Android पर मायने रखता है, जहां बैक बटन WebView के इतिहास में पीछे जाता है। Android की WebView गाइड पैटर्न दिखाती है: canGoBack() जांचें और goBack() कॉल करें, या सिस्टम को इवेंट संभालने दें; AndroidX के साथ आप वही लॉजिक OnBackPressedDispatcher पर रजिस्टर करते हैं। एक-पेज गेम में इतिहास अक्सर खाली होता है, इसलिए बैक दबाते ही आपकी गेम स्क्रीन बंद हो जाती है, लेवल के बीच में।

तय करें कि बैक को क्या करना चाहिए और उसे लिखें:

• पहला दबाव गेम का पॉज़ मेनू खोलता है; दूसरा दबाव गेम स्क्रीन से बाहर ले जाता है।
• या बैक हमेशा बाहर ले जाता है, गेम सेव करने के बाद। हर संस्करण लोकली सेव करता है, लेकिन जांचें कि वह कब लिखता है: लेवल के अंत में या खेल के दौरान।
• जब ऐप बैकग्राउंड में जाए, तो गेम रोकें। पॉज़ के बिना टाइमर आपके ऐप की दूसरी स्क्रीनों के पीछे भी चलते रहते हैं।

हमारे संस्करण ऐप ब्रिज के साथ नहीं आते। कुछ संस्करण पेज से भीतर आने का रास्ता देते हैं: Gridspark और Ricopop में टैप-से-शुरू स्क्रीन और फ़ुल-स्क्रीन बटन है, जिसे आप कॉन्फ़िग फ़ाइल में चालू या बंद करते हैं, और Deepforge पेज को रोकना और फिर से चलाना देता है। बाकी सब, जैसे लेवल खत्म होने पर नेटिव कोड को संदेश, सोर्स में एक छोटा बदलाव है जिसे आपकी टीम या कोट किया गया काम जोड़ता है।

Gridspark देखें, सादा JavaScript जिसे खेलने के लिए कोई बिल्ड स्टेप नहीं चाहिए

लाइसेंस: एक गेम, एक ऐप, और पहले क्या पूछें

हमारी शर्तें एक स्थायी, गैर-विशेष लाइसेंस देती हैं, ताकि संस्करण एक अंतिम उत्पाद में इस्तेमाल हो सके, आपके लिए या एक क्लाइंट के लिए। गेम सेक्शन वाला आपका ऐप वही अंतिम उत्पाद है। खिलाड़ी उसे बिना शुल्क या विज्ञापन मुद्रीकरण के ज़रिए इस्तेमाल कर सकते हैं। आप कोड, आर्ट और ऑडियो बदल सकते हैं, और व्हाइट लेबल की अनुमति है: आपका ब्रांड हमारे ब्रांड की जगह लेता है।

तीन स्थितियों पर ध्यान से देखना होगा।

• कई ऐप। एक एजेंसी जो एक ही गेम को तीन क्लाइंट ऐप में डालती है, उसे तीन लाइसेंस चाहिए। एक ऑर्डर में कई टेम्पलेट खरीदने पर बंडल छूट मिलती है: 2 पर 5%, 3 पर 10%, 4 पर 15% और 5 या ज़्यादा पर 20%।
• एक ही ऐप के Android और iOS संस्करण। एक लाइसेंस आपको वह गेम जहां चाहें प्रकाशित करने देता है, Google Play और App Store समेत। यह हर अंतिम उत्पाद के लिए एक ही लाइसेंस रहता है।
• दूसरे डेवलपर्स के लिए गेम्स SDK। शर्तें टेम्पलेट या उसके कोड को डेवलपर्स के लिए बने किसी दूसरे उत्पाद में दोबारा वितरित करने से मना करती हैं। गेम मॉड्यूल जो आप दूसरे ऐप बनाने वालों को बेचते हैं, वह इसी तरह का उत्पाद है।

अगर आपका ऐप गेम सेक्शन के लिए शुल्क लेता है या उसके भीतर आइटम बेचता है, तो भी पहले हमसे पूछें। शर्तें मुफ़्त पहुंच और विज्ञापन मुद्रीकरण का नाम लेती हैं, और कई संस्करण असली पैसे की खरीद को शामिल नहीं बताते। iOS पर गाइडलाइन 3.1.1 कहती है कि सुविधाओं या कंटेंट को अनलॉक करने के लिए, जिनमें गेम लेवल भी शामिल हैं, in-app purchase इस्तेमाल होना चाहिए।

कंपनियों के लिए लाइसेंस, इनवॉइस और कोट

अक्सर पूछे जाने वाले प्रश्न

क्या मैं HTML5 गेम को Android या iOS ऐप के अंदर रख सकता हूं?

हां। गेम फ़ोल्डर को WebView (Android पर WebView, iOS पर WKWebView) में लोड करें, या तो ऐप के साथ बंडल करके या अपने HTTPS सर्वर से। JavaScript और स्टोरेज चालू करें, और फ़ाइलें file:// की बजाय HTTPS जैसे पते से परोसें।

क्या ऐप के भीतर गेम ऑफ़लाइन चलते हैं?

सिर्फ़ तभी जब आप फ़ाइलें बंडल करें और संस्करण नेटवर्क से कुछ न लोड करे। हमारे कई संस्करण आर्ट, ऑडियो और फ़ॉन्ट लोकल रखते हैं; Ricopop का पेज कहता है कि उसे कनेक्शन चाहिए। वादा करने से पहले airplane मोड में टेस्ट करें।

क्या मेरे ऐप को अपडेट करने पर खिलाड़ियों की प्रगति खो जाएगी?

नहीं, अगर पता और सेव की वही रहें। सेव उस origin के लिए WebView के स्टोरेज में रहते हैं। स्कीम, होस्ट या स्टोरेज की बदलने पर सभी शून्य से शुरू करते हैं।

मेरे ऐप के लिए कितने लाइसेंस चाहिए?

हर अंतिम उत्पाद के लिए एक। एक गेम वाला एक ऐप एक लाइसेंस है; तीन क्लाइंट के ऐप में वही गेम तीन लाइसेंस है। Google Play और App Store पर एक ही ऐप को दूसरा लाइसेंस नहीं चाहिए: लाइसेंस वाले गेम को आप जहां चाहें प्रकाशित कर सकते हैं।

अगला कदम

एक गेम चुनें, फ़ोन पर उसका डेमो खेलें, फिर उसकी "इस संस्करण में शामिल नहीं" सूची और मैनुअल का सेव वाला अध्याय पढ़ें। अगर आप चाहें कि गेम स्क्रीन हम आपके ऐप में बनाएं, तो हमें ऐप, प्लेटफ़ॉर्म और जो गेम आपको पसंद है भेजें, और हम दायरा, कीमत और समय-सीमा लौटाएंगे।

सभी गेम टेम्पलेट देखें

ऐप इंटीग्रेशन के लिए कोट मांगें