Игры в приложение: как встроить 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 и базы данных для самой игры. Чего в них нет, так это нативной части. В каждой редакции в разделе «Не входит в эту редакцию» указаны нативные приложения или сборки для магазинов, поэтому экран WebView — это работа вашей команды или услуга, которую мы оцениваем отдельно.

Посмотрите шаблоны HTML5-игр

Локально или на сервере: где должны лежать файлы игры

Локально: игра поставляется внутри приложения

Документация Android о загрузке встроенного контента говорит, что веб-контент, скомпилированный в приложение, не требует доступа в интернет и не расходует трафик пользователя. Вы копируете папку game/ в assets приложения и загружаете её оттуда. Цена — размер: игра увеличивает загрузку, а каждое обновление игры означает новый релиз приложения и проверку в магазине.

На сервере: приложение загружает игру с вашего сайта

WebView открывает HTTPS-адрес на вашем домене. Игру можно обновлять без новой сборки приложения, а само приложение остаётся маленьким. Цена — игре нужно соединение, и медленная сеть проявляется как медленная первая загрузка.

Для Apple здесь действует особое правило. Пункт 4.7 Рекомендаций App Review касается HTML5- и JavaScript-мини-игр, которые не встроены в бинарный файл. Среди его условий: приложение не может расширять или открывать нативные API платформы для такого ПО без разрешения Apple, а также должно предоставлять индекс предлагаемого ПО с универсальными ссылками. Прочитайте пункт 4.7 полностью, прежде чем выбрать размещённый вариант для iOS.

• Размер приложения: локальный вариант добавляет вес игры; размещённый почти ничего не добавляет.
• Обновления: локальный требует релиза приложения; размещённый меняется при загрузке файлов.
• Соединение: локальный может запуститься без сети после установки; размещённый требует сеть.
• Проверка: локальные игры проверяются как часть приложения; размещённые игры на iOS подпадают под пункт 4.7.

Настройки WebView для Android, от которых зависит работа игры

Большинство жалоб «белый экран» связаны с тремя настройками по умолчанию. Все три описаны в документации Android Developers.

1. JavaScript выключен. Руководство по WebView говорит, что JavaScript в WebView по умолчанию отключён. Каждой HTML5-игре он нужен, поэтому включите его в WebSettings.
2. Хранилище выключено. Справочник WebSettings указывает, что значение по умолчанию для setDomStorageEnabled — false. Игры, которые хранят прогресс в localStorage, требуют его включения, иначе каждая сессия начинается с нуля.
3. file:// — неверный адрес. Руководство по контенту внутри приложения объясняет, что URL вида file:// являются непрозрачными источниками, которые не могут использовать 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 нет системной кнопки «назад», поэтому экрану игр нужен собственный выход: кнопка закрытия в нативной панели или вызов из игры через обработчик сообщений.

Сохранение прогресса внутри приложения

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

• Адрес входит в сохранение. Хранилище браузера привязано к источнику. Если вы переходите с одной схемы или хоста на другой, например с тестового домена на appassets.androidplatform.net, игроки начинают заново. Выберите адрес один раз.
• Ключ сохранения входит в сохранение. На странице товара Tenguin покупателям сказано не менять ключ сохранения у работающей игры, иначе игроки потеряют прогресс. Многие редакции на TypeScript держат ключ хранилища в brand.ts. Меняйте его намеренно, до запуска, и никогда после.
• Очистка данных приложения очищает игру. Удаление приложения или очистка его хранилища стирает сохранение, как и очистка данных браузера.

Если прогресс должен следовать за пользователем между устройствами, это серверная функция, которой нет ни в одной нашей редакции: во всех из них облачные сохранения или аккаунты указаны как не входящие в комплект. Самая дружелюбная отправная точка — Deepforge: на его странице описаны экспорт и импорт сохранения в меню и небольшой API window.DeepForge, который позволяет странице-хосту приостанавливать и возобновлять игру, читать сохранение и слушать события сохранения.

Посмотрите Deepforge и его API для страницы-хоста

Кнопка «назад», пауза и выход из игры

HTML5-игры обычно состоят из одной страницы. Это важно на Android, где кнопка «назад» проходит по истории WebView. Руководство Android по WebView показывает шаблон: проверить 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 для этого источника. Смена схемы, хоста или ключа хранилища начинает всё заново для всех игроков.

Сколько лицензий нужно для моего приложения?

Одна на каждый конечный продукт. Одно приложение с одной игрой — это одна лицензия; та же игра в приложениях трёх клиентов — три. Одно и то же приложение в Google Play и App Store не требует второй лицензии: лицензированную игру можно публиковать где угодно.

Следующий шаг

Выберите игру, сыграйте в её демо на телефоне, затем прочитайте её список «Не входит в эту редакцию» и главу мануала о сохранениях. Если хотите, чтобы мы встроили экран игр в ваше приложение, пришлите приложение, платформы и понравившуюся игру, и мы ответим с объёмом работ, ценой и сроками.

Посмотрите все шаблоны игр

Запросите расчёт интеграции в приложение