Как собрать PWA: гайд по настройке

Рассказываем про бюджетную и стабильную альтернативу WebView. В статье найдете инструкцию, как настроить PWA — ваш собственный сайт-приложение, которое Google удалить не сможет. 

1. Чем отличаются WebView и PWA
2. Как оформить страницу для скачивания PWA-приложения
3. Что нужно для настройки сайта-приложения PWA
4. Чек-лист перед запуском PWA
5. Вместо вывода: гибридная стратегия PWA + WebView

Чем отличаются WebView и PWA 

Чтобы понять, зачем переходить на PWA с Webview, разберемся, в чем различия этих решений.

WebView — это технология отображения веб-страниц внутри приложения. В арбитраже WebView используют, чтобы разместить в сторе казино-офферы под видом не гемблинг-приложений, а, например, утилит. 

Почему арендовать приложения невыгодно:

• Блокировки Google. Раньше с WebView работали многие арбитражники. Теперь модерация Google жестко проверяет и удаляет прилы. Иногда выживаемость аппок WebView не достигает и нескольких часов.

• Потеря денег. Вы платите фикс за аренду приложения, оплачиваете рекламные показы — и трафик продолжает крутиться, если вы вовремя его не оставили, даже когда приложения уже нет. 
• Потеря клиентов. Приложение в случае блокировки исчезает не только из стора, но зачастую перестает быть активным и на смартфонах юзеров, которые уже успели его скачать. То есть вы не только теряете деньги, потраченные на аренду и рекламу, но и игроков, которые уже были с вами.

Веб-приложение на базе технологии PWA — это сайт, который можно установить на телефон и использовать как мобильное приложение. 

Преимущества PWA:

• Не рискуете приложением и игроками. Самое большое преимущество PWA перед WebView — приложение открывается через браузер, его не надо загружать в стор. Поскольку его нет в сторе, Google его точно не удалит. Даже если заблочат ваш рекламный аккаунт, у тех, кто успел установить приложение, к нему будет доступ.
• Получаете технические бенефиты. Благодаря технологии Service Worker на смартфонах сохраняются все данные. Ваш сайт также может работать без интернета и в случае блокировки домена.
• Экономите деньги. Не надо платить за аренду приложения. Это ваш собственный сайт, оплачиваете только домен и хостинг. 

PWA внедряют не только в серых нишах. Многие известные бренды также успешно адаптировали эту технологию. Благодаря PWA их веб-версии сайтов работают быстро и без сбоев.

Как оформить страницу для скачивания PWA-приложения

Главная сложность — убедить пользователя скачать ваше приложение. Факт, что его нет в гугл-сторе, — преимущество и недостаток. Ведь юзер уверен, что только в официальном магазине можно без риска что-то скачать. Нужно убедить пользователя в том, что это никакой не вирус, все безопасно и официально. 

Лучше всего сделать страницу в стиле Google Play, но без использования официального лого. Дизайн должен быть похожим, но не копировать интерфейс магазина — за такое ваш домен быстро заблокируют. Соблюдайте похожую стилистику и структуру, чтобы вызвать доверие. Ваша задача — не обмануть пользователя, а дать его мозгу привычную картинку, чтобы он расслабился и не искал подвох. Вот как этого добиться:

• Используйте знакомые цвета и шрифты. Оформите страницу в светлых оттенках: белый фон, темно-серый текст и характерный зеленый цвет для кнопок, к которому привыкли пользователи Android.

• Добавьте блок с рейтингом и отзывами. Сделайте блок с указанием количества скачиваний и рейтингом. Скачиваний может быть больше тысячи, а рейтинг, например, 4.9. Ниже добавьте несколько положительных отзывов. Имена и язык должны соответствовать стране, на которую запускаете рекламу.

• Укажите размер файла. Рядом с кнопкой скачивания или названием приложения надо обозначить вес. 

• Сделайте кнопку «Установить» заметной. Она должна быть большой, зеленой и находиться на самом видном месте экрана, чтобы пользователь сразу ее увидел и кликнул.

Что нужно для настройки сайта-приложения PWA

Вот пошаговый план, что делать для запуска такого приложения: 

1. Выберите между базовым и расширенным PWA. Базовый опционал — это быстрая загрузка и работа в автономном режиме. Продвинутый также включает, например, push-уведомления. Например, расширенная версия PWA-казино может оповещать о промо, пушить игроков на возврат.  

2. Создайте скелет сайта (HTML). Это основной файл вашего сайта, который надо отредактировать. Следуйте инструкции: 

• откройте файл сайта index.html. Он должен храниться либо на компьютере, либо в файловом менеджере на хостинге;
• удалите все, что там есть, и вставьте этот готовый шаблон. Мы создали структуру кода под гемблу, вам надо только подставить данные своего приложения (название и слоган своего приложения — у нас это Vegas Planet и «Лучшие слоты 2026 года. Скачай и получи бонус!»). 

3. Создайте файл со стилями. Рассказываем, что нужно делать: 

• Откройте блокнот на винде или TextEdit на маке. В меню нажмите Format, затем Make Plain Text, чтобы убрать лишнее форматирование.
• Скопируйте код-шаблон для создания дизайна. Подставьте свои коды цветов и данные по шрифтам.

• Вставьте этот код в блокнот. Убедитесь, что скопировалось все — от первой скобки { до последней }. 
• Сохраните файл. В Блокноте нажмите: «Файл», затем «Сохранить как»… Откроется окно сохранения — выберите ту же самую папку, где уже лежит ваш файл index.html.

Назовите файл style.css. Убедитесь, что в конце не добавилось .txt. Если в окне появилось поле «Тип файла», кликните «Все файлы». Нажмите «Сохранить».

4. Установите сервис-воркер. Он нужен для обеспечения работы сайта в фоновом режиме. Когда пользователь открывает приложение второй раз, данные выгружаются из памяти телефона, а не качаются заново из интернета. Это позволяет сайту быстро открываться даже при плохом интернете. 

Такие инструменты, как Workbox, упрощают процесс внедрения сервис-воркеров. В вашем распоряжении готовые функции, чтобы не приходилось самостоятельно писать код. 

5. Создайте манифест веб-приложения. Речь о JSON-файле, содержащем метаданные о вашем PWA, включая имя, описание, значки и режим отображения. В файле манифеста через обычный текст нужно задать параметры: URL-адрес, ориентация экрана, цвет темы, иконки. Вот несколько инструментов для создания манифеста:

• PWA Builder,
• генератор манифестов веб-приложений,
• превью манифестов веб-приложений,
• валидатор манифестов,
• редактор манифестов PWA.

Создать файл манифеста можно в любом текстовом редакторе, например, в блокноте Windows или в TextEdit на Mac. Создайте новый пустой файл, уберите форматирование. Для этого зажмите сочетание клавиш Command ⌘ + Shift ⇧ + T или же в верхнем меню кликните Format и выберите опцию Make Plain Text.

Система предложит несколько вариантов формата файла. Вам нужно выбрать тот, что с окончанием .json.

Этот запрос может не отобразиться, а файл автоматически сохранится с окончанием .txt. В этом случае надо зайти в Finder, кликнуть по иконке файла блокнота правой кнопкой мыши и выбрать Get Info.

Откроется окно со свойствами файла. Кликните на стрелочку слева в строке Name & Extension и удалите из названия окончание txt. Сохраните новое название нажатием на клавишу Return.

Создайте папку, где будете хранить все файлы для вашего сайта. Назовите ее именем вашего сайта — в нашем случае это Vegas Planet. Перенесите в эту папку файл manifest.json.

Вставьте код. Вот готовый шаблон, который нужно вставить в ваш файл manifest.json. Подставьте данные именно про ваше приложение.

Вставьте свои данные. Замените текст после слов в кавычках на инфу по вашему приложению:

• после "name" — полное название (например, Vegas Planet)
• после "short_name" — короткое название, которое будет отображаться под иконкой на рабочем столе (например, Vegas)
• все, что после "display": "standalone" остается без изменений. Именно эта команда убирает адресную строку браузера и делает сайт похожим на аппку
• строку, которая начинается с "orientation": "portrait" тоже не меняете. Здесь мы указали, чтобы экран фиксировался вертикально и приложение не переворачивалось вместе с поворотом телефона, как обычный сайт. 

Для нашего примера — казино Vegas Planet — код будет выглядеть так.

Подготовьте иконки. Вам нужны две квадратные картинки в формате PNG. Первая должна быть для меню телефона — размером 192х192 пикселей, вторая для экрана загрузки — 512х512 пикселей. Назовите эти файлы icon-192.png и icon-512.png и положите в основную папку вашего сайта. В нашем случае, это папка Vegas Planet, в которой уже лежит manifest.json.

Подключите файл к сайту. Ниже даем инструкцию по настройке фронтенда. В рамках этой настройки вы также подключите манифест к вашему сайту. 

6. Настройте фронтенд вашего приложения. Оно должно открываться на телефоне в мобильном формате, а не как на компьютере. 

Зайдите в папку с вашим сайтом, откройте файл index.html с помощью блокнота на Windows или TextEdit на макбуке. Отобразится код — найдите в нем открывающий тег <head> и закрывающий </head>.

Удалите все, что прописано между тегами, и вставьте код. В нем прописаны настройки для адаптации под iOS и Android:

Вместо Vegas Planet вставляете название вашего приложения. Вместо #1a1a1a код цвета, который хотите использовать для верхней строки браузера. 

7. Добавьте пуш-уведомления через OneSignal. Благодаря технологии PWA вы полностью контролируете взаимодействие с аудиторией. Не нужно платить сторонним сервисам за рассылки и переживать, дойдет ли уведомление.

Вы можете настроить push-уведомления, чтобы уведомлять игроков о промо, напоминать о себе и мотивировать заходить в приложение. Для этого зарегистрируйтесь и войдите в свой аккаунт OneSignal.

Добавьте свое приложение в программу. Для этого надо кликнуть New App.

Создайте пуш-сообщение. После добавления приложения появится страница с данными вашей аппки. Чтобы создать рассылку, в правом верхнем углу надо кликнуть New Push.

Выберите аудиторию для отправки пушей. На выбор два варианта: можете выбрать сразу всех подписанных юзеров, либо отобрать каких-то конкретных. 

Введите сообщение, которое будет в пуше. Это должны быть заголовок и короткий текст. В правой части экрана отображается предпросмотр вашего пуша. Убедитесь, что сообщение полностью отображается на экране. Также нужно добавить картинку, которая будет сопровождать ваше сообщение.

Укажите ссылку на контент, в который ведет пуш. Чтобы пользователь после клика на сообщение попал на определенную страницу, нужно добавить ссылку этой страницы в настройках. Для этого надо зайти в раздел Advanced Settings, окно Additional Data. В поле Field 1 введите текстом data и линку на нужную вам страницу промо, игры или чего угодно из приложения.

Настройте время отправки сообщений. Для этого нужно зайти в нижний блок. Там вы можете выбрать немедленную или отложенную отправку к определенному времени: Immediately или Specific Time. После того как определились, кликаете Review and Send. Перед отправкой отобразится предпросмотр сообщения. Если все ок, снова жмите Send. 

Следите за аналитикой по пуш-рассылке. В меню OneSignal есть блок со статистикой. Здесь в реальном времени можно видеть, сколько уже отправлено, сколько открыто, сколько кликов, процент открытия пушей. Тут же отображаются статусы по iOS и Android.

Не стоит запрашивать разрешение на отправку уведомлений сразу же, пользователь рефлекторно может отказаться. Чтобы получить согласие, нужно мотивировать:

• Предложите бонус. Покажите всплывашку как часть дизайна сайта, не системное окно браузера. Напишите: «Хотите узнать о доступных бонусах?», добавьте две кнопки: «Да» и «Нет».
• Запросите разрешение на пуш-уведомления. Только после нажатия на кнопку «Да» активируйте системное окно браузера с вопросом «Разрешить уведомления?».

Вот как настроить вручную запрос на отправку пушей:

1. Отключите автоматический запрос в самом сервисе OneSignal. Для этого зайдите в личный кабинет в раздел Settings, выберите All Browsers, кликните по пункту Permission Prompt Setup. Отключите все автоматические окна (Slide Prompt или Native Prompt), если они включены. Нажмите Save. 
2. Скопируйте и вставьте код с командой показывать всплывающее окно с запросом. Для этого откройте файл вашего сайта index.html и прокрутите вниз код, который в нем сохранен. Вставляйте этот код в самом низу, после всех кнопок и картинок, но строго перед закрывающей скобкой </body>. Тогда окно загрузится поверх сайта.

Подставьте нужный текст вместо предложенного примера. В нашем случае это запрос «Вам доступен бонус!», «Хотите получить +100% к депозиту и 50 фриспинов?» и варианты кнопок ответа: «Забрать» и «Отказаться».

3. Теперь нужно ввести код для оформления уведомлений — CSS-стили. Они прописываются внутри тега <head>.  

4. Введите код для активации кнопок в уведомлениях и отправки запроса на рассылку пушей. В самом низу файла index.html, прямо перед закрывающим тегом </body> вставьте этот код:

Вот так выглядел код нашего сайта до вставки команды для создания запроса на отправку бонуса и уведомлений.

Так выглядит код сайта после того, как мы добавили три скрипта с подробностями про наши уведомления. 

Чек-лист перед запуском PWA

Перед тем как запускать рекламную кампанию и закладывать на нее бюджет, проверьте работоспособность вашего приложения. 

Вместо вывода: гибридная стратегия PWA + WebView

Мы не призываем вас резко бросать аренду приложений и переводить весь трафик с нативных приложений на PWA. Эффективным и безопасным решением в 2026 году будет гибридная стратегия. То есть используйте оба подхода для разных задач.

WebView для тестов. Классические арендные приложения все еще отлично служат для проверки гипотез. Например, если нужно протестировать новый оффер, сразу запускайте рекламу без настройки домена и технички для подготовки PWA.

PWA для проверенных офферов. Как только вы нашли рабочую связку и начали получать стабильный поток клиентов, переводите их в свои PWA-приложения. Если Google устроит очередную зачистку и удалит арендные приложения, вы потеряете тестовый трафик, но не потеряете аудиторию. Активные игроки, установившие PWA, продолжат приносить доход, так как модераторы технически не могут удалить сайт с телефона пользователя