Uygulamanıza Oyun Ekleme: HTML5 Oyunu WebView İçinde Çalıştırın

Uygulamanıza oyun eklemek için içine bir oyun motoru koymanız gerekmez. Gereken şey bir WebView: Android ve iOS'un, web içeriğini yerel bir ekranın içinde göstermek için sunduğu bileşen. Hazır bir HTML5 oyun klasörünü ya uygulama paketinin içine ya da kendi HTTPS sunucunuza koyarsınız, WebView'u o klasördeki index.html dosyasına yönlendirirsiniz ve uygulamanız, tarayıcı sürümüyle aynı kodla çalışan bir oyunlar bölümüne kavuşur.

Bu rehber, zaten bir uygulaması olan (perakende uygulaması, banka, okul platformu, kulüp ya da medya markası) ve mağazaya yeni bir uygulama çıkarmak yerine uygulama içi oyunları bir özellik olarak eklemek isteyen ekipler için. Yerel ve sunucudaki dosyalar arasındaki seçimi, yanlış ayarlandığında oyunları bozan WebView ayarlarını, ilerlemenin kaydedilmesini, geri tuşunu, şablonlarımızdan hangilerinin uygun olduğunu ve lisansın uygulamaları nasıl saydığını anlatıyor. Platform ayrıntıları, 30 Ekim 2026'da okunan Android Developers ve Apple Developer belgelerinden alındı.

Uygulamanıza oyun ekleme: WebView yolu nasıl işler

WebView, etrafında tarayıcı olmayan bir tarayıcı motorudur. Yerel kodunuz onu oluşturur, boyutuna ve ayarlarına karar verir ve neyi yükleyeceğini söyler. Android'de sınıfın adı WebView, iOS'ta WKWebView. HTML5 oyunu farkı anlamaz: Chrome veya Safari'de olduğu gibi bir sayfa, bir canvas ve depolama alanı görür.

Bu yol uygulama içi oyunlar için bu yüzden sık tercih edilir. Oyun ekibi HTML, CSS ve JavaScript ile çalışır, uygulama ekibi bir ekran ve birkaç ayar ekler, aynı oyun klasörü web sitesinde de yayında kalabilir. Planlanması gereken üç parça var:

1. Dosyaların yeri: uygulamanın içinde paketli mi, yoksa HTTPS sunucunuzdan mı geliyor.
2. WebView'un yapılandırması: JavaScript, depolama ve oyunun çalıştığı adres.
3. Oyun ile uygulamanın iletişimi: açılış, duraklatma, geri tuşu, kapanış.

Şablonlarımız bu yapıya uyar, çünkü her biri statik barındırma için hazırlanmış, index.html içeren hazır bir game/ klasörüyle gelir; oyunun kendisi için PHP ya da veritabanı gerekmez. Hiçbirinde bulunmayan şey ise yerel kısımdır. Her sürüm, yerel uygulamaları veya mağaza derlemelerini “Not included in this edition” (bu sürüme dahil olmayanlar) listesinde gösterir; yani WebView ekranı ya sizin ekibinizin işidir ya da ayrıca fiyat verdiğimiz bir iştir.

HTML5 oyun şablonlarına göz atın

Yerel mi, sunucuda mı: oyun dosyaları nerede durmalı

Yerel: oyun uygulamanın içinde gelir

Android'in uygulama içi içerik yükleme rehberine göre uygulamaya derlenen web içeriği internet erişimi istemez ve kullanıcının veri kotasını harcamaz. game/ klasörünü uygulamanın assets klasörüne kopyalar ve oradan yüklersiniz. Bedeli boyuttur: oyun indirme boyutunu büyütür ve her oyun güncellemesi, mağaza incelemesinden geçen yeni bir uygulama sürümü demektir.

Sunucuda: uygulama oyunu sizin sunucunuzdan yükler

WebView kendi alan adınızdaki bir HTTPS adresini açar. Oyunu yeni bir uygulama derlemesi olmadan güncelleyebilirsiniz ve uygulama küçük kalır. Bedeli, oyunun bağlantıya ihtiyaç duymasıdır; yavaş bir ağ, yavaş bir ilk yükleme olarak kendini gösterir.

Apple'ın burada özel bir kuralı var. App Review Guidelines'ın 4.7 maddesi, uygulama dosyasına gömülü olmayan HTML5 ve JavaScript mini oyunlarını kapsar. Şartlarından biri, uygulamanın Apple'ın izni olmadan yerel platform API'lerini bu yazılıma açmaması veya genişletmemesidir; ayrıca sunduğu yazılımların universal link'li bir dizinini sağlaması gerekir. iOS için sunucu yolunu seçmeden önce 4.7'yi baştan sona okuyun.

• Uygulama boyutu: yerel yol oyunun ağırlığını ekler; sunucu yolu neredeyse hiçbir şey eklemez.
• Güncellemeler: yerel yol yeni bir uygulama sürümü ister; sunucu yolunda dosyayı yüklediğiniz anda değişir.
• Bağlantı: yerel oyun kurulumdan sonra ağ olmadan açılabilir; sunucudaki oyun bağlantı ister.
• İnceleme: yerel oyunlar uygulamanın parçası olarak incelenir; iOS'ta sunucudaki oyunlar 4.7 maddesine tabidir.

Bir oyunu çalıştıran ya da bozan Android WebView ayarları

“Oyun beyaz ekran gösteriyor” şikâyetlerinin çoğu üç varsayılan ayardan gelir. Üçü de Android Developers'ta belgelenmiştir.

1. JavaScript kapalı. WebView rehberi, WebView'da JavaScript'in varsayılan olarak kapalı olduğunu söyler. Her HTML5 oyunu ona ihtiyaç duyar; WebSettings içinde açın.
2. Depolama kapalı. WebSettings referansına göre setDomStorageEnabled'ın varsayılan değeri false. İlerlemeyi localStorage'da tutan oyunlarda açık olmalı, yoksa her oturum sıfırdan başlar.
3. file:// yanlış adres. Android'in uygulama içi içerik rehberi, file:// URL'lerinin fetch() veya XMLHttpRequest gibi API'leri kullanamayan opak origin'ler olduğunu açıklar ve dosya erişimi geçici çözümlerinin açılmamasını önerir. Ürün sayfalarımız da oyun tarafından aynı şeyi söyler: Gridspark ve Twirldrop gibi sürümler file:// üzerinden çalışmaz.

Üçüncü maddenin çözümü, AndroidX Webkit kütüphanesindeki WebViewAssetLoader. Uygulamanızın assets dosyalarını bir HTTPS adresi üzerinden sunar; Android'in kendi örneği https://appassets.androidplatform.net/assets/index.html adresini yükler. Oyun için bu normal bir web sitesi gibi görünür, böylece ES modülleri, fetch ve depolama sunucunuzdaki gibi çalışır.

iOS: WKWebView, yerel dosyalar ve veri deposu

iOS'ta bileşenin adı WKWebView. Apple, yerel içerik için loadFileURL(_:allowingReadAccessTo:) yöntemini belgeler: ikinci argüman, WebKit'in okuyabileceği dosya veya klasördür; bir klasör verirseniz sayfa çevresindeki dosyaları da yükleyebilir.

Sürümlerimiz file:// üzerinden açılmayı desteklemediği için bu yolu dikkatle test edin ya da hiç kullanmayın. Apple ayrıca WebKit'in tanımadığı URL şemalarıyla kaynak yüklemek için WKURLSchemeHandler protokolünü sunar; böylece uygulamanız oyun klasörünü kendi şeması altında sunabilir. Capacitor bunu sizin yerinize yapar: iOS'taki varsayılan şeması capacitor.

Depolama WKWebsiteDataStore içinde durur. Apple'ın sayfasına göre varsayılan depo web sitesi verilerini kalıcı olarak diske yazar; kalıcı olmayan depo ise verileri yalnızca bellekte tutar ve gizli gezinme için tasarlanmıştır. Ekibinizden biri kalıcı olmayan bir depo ayarlarsa oyuncular uygulama her kapandığında ilerlemelerini kaybeder.

iOS'ta sistem geri tuşu yoktur, bu yüzden oyunlar ekranınızın kendi çıkış yolu olmalı: yerel çubuğunuzda bir kapatma düğmesi ya da oyunun bir message handler üzerinden çağırdığı bir düğme.

Uygulama içinde ilerlemeyi kaydetmek

Oyunlarımız ilerlemeyi bir sunucuda değil, oyuncunun tarayıcı depolamasında saklar. Solitaire Links ve Deepforge sayfaları bunu açıkça yazar: ilerleme localStorage'da tutulur, hesap veya bulut eşitleme yoktur. Bir uygulamanın içinde bunun üç sonucu var.

• Adres kaydın bir parçasıdır. Tarayıcı depolaması bir origin'e aittir. Bir şemadan veya host'tan diğerine geçerseniz, örneğin bir test alan adından appassets.androidplatform.net'e, oyuncular baştan başlar. Adresi bir kez seçin.
• Kayıt anahtarı kaydın bir parçasıdır. Tenguin ürün sayfası, yayındaki bir oyunda kayıt anahtarının değiştirilmemesini, aksi halde oyuncuların ilerlemelerini kaybedeceğini söyler. Birkaç TypeScript sürümü depolama anahtarını brand.ts içinde tutar. Değiştirecekseniz bilerek ve yayından önce değiştirin, asla sonra değil.
• Uygulama verilerini silmek oyunu da siler. Uygulamayı kaldırmak veya depolamasını temizlemek, tıpkı tarayıcıyı temizlemek gibi kaydı yok eder.

İlerlemenin kullanıcıyla birlikte cihazdan cihaza taşınması gerekiyorsa bu, sürümlerimizin hiçbirinde olmayan bir sunucu özelliğidir. Her sürüm bulut kayıtlarını veya hesapları dahil olmayanlar arasında listeler. En kolay başlangıç noktası Deepforge: sayfası, menüde kaydı dışa ve içe aktarmayı ve ana sayfanın oyunu duraklatmasına, sürdürmesine, kaydı okumasına ve kayıt olaylarını dinlemesine izin veren küçük bir window.DeepForge API'sini anlatıyor.

Deepforge'u ve ana sayfa API'sini görün

Geri tuşu, duraklatma ve oyundan çıkış

HTML5 oyunları genellikle tek bir sayfadır. Bu, geri tuşunun WebView'un geçmişinde geri gittiği Android'de önemlidir. Android'in WebView rehberi kalıbı gösterir: canGoBack() ile kontrol edip goBack() çağırın ya da olayı sisteme bırakın; AndroidX ile aynı mantığı OnBackPressedDispatcher'a kaydedersiniz. Tek sayfalık bir oyunda geçmiş çoğu zaman boştur, bu yüzden geri tuşu oyunlar ekranınızı bir bölümün ortasında anında kapatır.

Geri tuşunun ne yapacağına karar verin ve bunu yazıya geçirin:

• İlk basış oyunun duraklatma menüsünü açar; ikinci basış oyunlar ekranından çıkar.
• Ya da geri tuşu, oyun kaydettikten sonra her zaman çıkar. Her sürüm yerelde kaydeder, ama ne zaman yazdığını kontrol edin: bölüm sonunda mı, oyun sırasında mı.
• Uygulama arka plana geçtiğinde oyunu duraklatın. Duraklatma olmazsa zamanlayıcılar uygulamanızın diğer ekranlarının arkasında çalışmaya devam eder.

Sürümlerimiz bir uygulama köprüsüyle gelmez. Bazılarının sunduğu şey sayfa tarafından bir giriş noktasıdır: Gridspark ve Ricopop'ta bir yapılandırma dosyasından açıp kapatabileceğiniz dokunarak başlatma ekranı ve tam ekran düğmesi var; Deepforge ise duraklatma ve sürdürmeyi sayfaya açar. Bunun dışındaki her şey, örneğin bir bölüm bittiğinde yerel koda mesaj göndermek, kaynak kodda küçük bir değişikliktir; bunu ekibiniz ya da fiyatlandırılmış bir iş olarak biz ekleriz.

Gridspark'ı görün: sade JavaScript, oynamak için derleme gerekmez

Lisans: bir oyun, bir uygulama ve önce sorulması gerekenler

Koşullarımız, sürümü sizin için ya da tek bir müşteriniz için tek bir son üründe kullanmak üzere süresiz ve münhasır olmayan bir lisans verir. Oyunlar bölümüyle birlikte uygulamanız o son üründür. Oyuncular ona ücretsiz ya da reklamla para kazanılan bir model üzerinden erişebilir. Kodu, görselleri ve sesleri değiştirebilirsiniz; white label serbesttir: sizin markanız bizimkinin yerini alır.

Üç durum daha yakından bakmayı gerektirir.

• Birden fazla uygulama. Aynı oyunu üç müşteri uygulamasına koyan bir ajansın üç lisansa ihtiyacı vardır. Tek siparişte birkaç şablon almak paket indirimi sağlar: 2 şablonda %5, 3'te %10, 4'te %15, 5 ve üzerinde %20.
• Aynı uygulamanın Android ve iOS sürümleri. Tek lisansla o oyunu Google Play ve App Store dahil istediğiniz her yerde yayınlayabilirsiniz. Lisans yine son ürün başına birdir.
• Başka geliştiricilere yönelik bir oyun SDK'sı. Koşullar, şablonun veya kodunun geliştiricilere yönelik başka bir ürünün içinde yeniden dağıtılmasını yasaklar. Diğer uygulama yapımcılarına sattığınız bir oyun modülü tam olarak bu tür bir üründür.

Uygulamanız oyunlar bölümü için ücret alıyor ya da içinde ürün satıyorsa da önce bize sorun. Koşullar ücretsiz erişimi ve reklamla para kazanmayı adıyla anar; birkaç sürüm de gerçek parayla satın almayı dahil olmayanlar arasında listeler. iOS'ta 3.1.1 maddesi, oyun bölümleri dahil özelliklerin veya içeriğin kilidini açmanın uygulama içi satın alma ile yapılması gerektiğini söyler.

Şirketler için lisans, fatura ve fiyat teklifi

Sıkça sorulan sorular

Bir HTML5 oyununu Android veya iOS uygulamasının içine koyabilir miyim?

Evet. Oyun klasörünü bir WebView'da yükleyin (Android'de WebView, iOS'ta WKWebView); ister uygulamayla birlikte paketleyin, ister HTTPS sunucunuzdan açın. JavaScript'i ve depolamayı açın, dosyaları file:// yerine HTTPS tarzı bir adresten sunun.

Oyunlar uygulama içinde çevrimdışı çalışır mı?

Yalnızca dosyaları pakete koyarsanız ve sürüm ağdan hiçbir şey yüklemiyorsa. Sürümlerimizin birçoğu görselleri, sesleri ve fontları yerelde tutar; Ricopop'un sayfası ise bağlantı gerektiğini söyler. Söz vermeden önce uçak modunda test edin.

Uygulamayı güncellediğimde oyuncular ilerlemelerini kaybeder mi?

Adres ve kayıt anahtarı aynı kaldığı sürece hayır. Kayıtlar, WebView'un o origin için ayırdığı depolamada durur. Şemayı, host'u veya depolama anahtarını değiştirmek herkesi sıfırdan başlatır.

Uygulamam için kaç lisans gerekir?

Son ürün başına bir. Tek oyunlu tek bir uygulama bir lisanstır; aynı oyun üç müşterinin uygulamasında üç lisanstır. Aynı uygulamanın Google Play ve App Store'daki sürümleri ikinci bir lisans gerektirmez: lisanslı oyunu istediğiniz her yerde yayınlayabilirsiniz.

Sonraki adım

Bir oyun seçin, demosunu telefonda oynayın, ardından “Not included in this edition” (bu sürüme dahil olmayanlar) listesini ve kılavuzundaki kayıtlarla ilgili bölümü okuyun. Oyunlar ekranını uygulamanıza bizim kurmamızı tercih ederseniz uygulamayı, platformları ve beğendiğiniz oyunu bize gönderin; kapsam, fiyat ve süreyle dönüş yapalım.

Tüm oyun şablonlarını görün

Uygulama entegrasyonu için teklif isteyin