Добавете игри в приложението си: HTML5 игра в WebView

За да добавите игри в приложението си, не ви трябва игров двигател в него. Трябва ви WebView: компонентът, който Android и iOS предоставят, за да показват уеб съдържание в нативен екран. Поставяте готова папка с HTML5 игра вътре в пакета на приложението или на собствен HTTPS сървър, насочвате WebView към нейния index.html и приложението ви получава секция с игри, която работи със същия код като браузърната версия.

Това ръководство е за екипи, които вече имат приложение (търговско, банка, училищна платформа, клуб или медия) и искат игри в него като функция, а не като ново приложение в магазина. Разглеждаме избора между локални и хоствани файлове, настройките на WebView, които чупят игрите, когато са грешни, запазването на прогреса, бутона назад, кои от нашите шаблони подхождат и как лицензът брои приложенията. Подробностите за платформите идват от документацията на Android Developers и Apple Developer, прочетена на 30 октомври 2026 г.

Добавяне на игри в приложение: как работи маршрутът през WebView

WebView е браузърен двигател без самия браузър. Нативният ви код го създава, решава размера и настройките му и му казва какво да зареди. HTML5 играта не знае разликата: тя вижда страница, платно и хранилище, както би ги видяла в Chrome или Safari.

Затова този маршрут е популярен за игри в приложения. Екипът по играта работи с HTML, CSS и JavaScript, екипът по приложението добавя един екран и няколко настройки, а същата папка с играта може да живее и на уебсайта. Има три подвижни части, които трябва да планирате:

1. Къде живеят файловете: пакетирани в приложението или сервирани от вашия HTTPS сървър.
2. Как е конфигуриран WebView: JavaScript, хранилище, адресът, от който играта се зарежда.
3. Как играта и приложението си говорят: отваряне, пауза, бутонът назад, затваряне.

Нашите шаблони подхождат на тази форма, защото всеки се доставя с готова папка game/ с index.html, създадена за статичен хостинг, без нужда от PHP или база данни за самата игра. Нито един от тях не включва нативната част. Всяко издание изброява нативните приложения или сборките за магазините под „Не е включено в това издание“, така че екранът WebView е работа на вашия екип или услуга, за която даваме отделна оферта.

Разгледайте HTML5 шаблоните за игри

Локално или хоствано: къде трябва да живеят файловете на играта

Локално: играта е вътре в приложението

Ръководството на Android за зареждане на съдържание в приложението казва, че уеб съдържанието, компилирано в приложението, не изисква интернет достъп и не използва трафика на потребителя. Копирате папката game/ в assets на приложението и я зареждате оттам. Цената е размерът: играта добавя тегло към изтеглянето, а всяка актуализация на играта означава ново издание на приложението през проверка от магазина.

Хоствано: приложението зарежда играта от вашия сървър

WebView отваря HTTPS адрес на вашия собствен домейн. Можете да актуализирате играта без нова сборка на приложението, а самото приложение остава малко. Цената е, че играта се нуждае от връзка, а бавната мрежа се показва като бавно първо зареждане.

Apple има специфично правило тук. Точка 4.7 от App Review Guidelines покрива HTML5 и JavaScript мини игрите, които не са вградени в бинарния файл. Сред условията му приложението не може да разширява или излага нативни платформени API към този софтуер без разрешение от Apple, и трябва да предоставя индекс на софтуера, който предлага, с universal links. Прочетете точка 4.7 изцяло, преди да изберете хоствания маршрут за iOS.

• Размер на приложението: локално добавя теглото на играта; хоствано почти нищо.
• Актуализации: локално изисква ново издание на приложението; хоствано се променя, когато качите файловете.
• Връзка: локално може да стартира без мрежа след инсталиране; хоствано изисква такава.
• Преглед: локалните игри се проверяват като част от приложението; хостваните игри на iOS попадат под точка 4.7.

Настройките на Android WebView, които правят или чупят играта

Повечето доклади „играта показва бял екран“ идват от три настройки по подразбиране. И трите са документирани в Android Developers.

1. JavaScript е изключен. Ръководството за WebView казва, че JavaScript е изключен в WebView по подразбиране. Всяка HTML5 игра го изисква, затова го включете в WebSettings.
2. Хранилището е изключено. Справочникът за WebSettings казва, че стойността по подразбиране на setDomStorageEnabled е false. Игрите, които пазят прогреса в localStorage, я изискват включена, иначе всяка сесия започва от нула.
3. file:// е грешният адрес. Ръководството за съдържание в приложението на Android обяснява, че URL адресите file:// са непрозрачни origin-и, които не могат да използват API като fetch() или XMLHttpRequest, и препоръчва да не се включват заобиколните решения за достъп до файлове. Страниците на нашите продукти казват същото от страна на играта: издания като Gridspark и Twirldrop не работят от file://.

Решението за третата точка е WebViewAssetLoader от библиотеката AndroidX Webkit. Той сервира файлове от assets на приложението през HTTPS адрес, а примерът на Android зарежда https://appassets.androidplatform.net/assets/index.html. За играта това изглежда като нормален уебсайт, така че ES модулите, fetch и хранилището се държат така, както на вашия сървър.

iOS: WKWebView, локални файлове и хранилището на данни

На iOS компонентът е WKWebView. Apple документира loadFileURL(_:allowingReadAccessTo:) за локално съдържание: вторият аргумент е файлът или папката, които WebKit може да чете, а подаването на папка позволява на страницата да зарежда файловете около нея.

Тъй като нашите издания не поддържат отваряне от file://, тествайте този път внимателно или го пропуснете. Apple предоставя и WKURLSchemeHandler, протокол за зареждане на ресурси с URL схеми, които WebKit не обработва, така че приложението ви може да сервира папката с играта под своя собствена схема. Capacitor го прави вместо вас: схемата му по подразбиране за iOS е capacitor.

Данните се пазят в WKWebsiteDataStore. Страницата на Apple казва, че хранилището по подразбиране записва уеб данните трайно на диска, а непостоянното хранилище ги пази само в паметта, което е предназначено за частно сърфиране. Ако някой от екипа ви зададе непостоянно хранилище, играчите губят прогреса си при всяко затваряне на приложението.

iOS няма системен бутон назад, така че екранът с игрите ви трябва собствен изход: бутон за затваряне в нативната лента или такъв, който играта извиква през message handler.

Запазване на прогреса в приложението

Нашите игри запазват в браузърното хранилище на играча, а не на сървър. Solitaire Links и Deepforge казват това ясно на страниците си: прогресът се пази в localStorage, без акаунт и без облачна синхронизация. В приложение това има три последствия.

• Адресът е част от запазването. Браузърното хранилище принадлежи на origin. Ако преминете от една схема или хост към друг, например от тестов домейн към 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. Смяната на схема, хост или ключ на хранилището започва всички от нула.

Колко лиценза ми трябват за моето приложение?

Един на краен продукт. Едно приложение с една игра е един лиценз; същата игра в приложения за трима клиенти са три. Същото приложение в Google Play и App Store не изисква втори лиценз: можете да публикувате лицензираната игра където искате.

Следваща стъпка

Изберете игра, изпробвайте демото ѝ на телефон, после прочетете списъка „Не е включено в това издание“ и главата от ръководството за запазванията. Ако предпочитате ние да вградим екрана с игри в приложението ви, изпратете ни приложението, платформите и играта, която харесвате, и ще ви отговорим с обем, цена и срок.

Вижте всички шаблони за игри

Поискайте оферта за интеграция в приложение