Конструкторы PWA: как собрать прогрессивное приложение самому

Продолжаем цикл статей про Progressive Web Applications (PWA). Сегодня разбираемся как создать своё PWA-приложение, а также изучаем популярные конструкторы.
Конструкторы PWA: как собрать прогрессивное приложение самому

Залив на PWA-приложения остается одним из самых популярных способов работы с iGaming-офферами, даже несмотря на временные послабления в Google Play осенью 2024 года. Простая воронка для пользователя, возможность оформлять фейк-стор агрессивными гембловыми крео и отсутствие модерации официального магазина приложений — всё это несомненные плюсы такого подхода. Но одно дело понимать что такое PWA-прилы и другое — уметь собирать их самостоятельно.

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

Основы прогрессивного веб-приложения

PWA-приложения «мимикрируют» под нативные приложения, оставаясь при этом веб страницей — это примерно как разница между традиционными и In-Page пушами. Данный вид прилок пользуется особой популярностью в iGaming и крипте, но подойдут и другим вертикалям, в зависимости от особенностей оффера.

У понятия PWA нет чётких границ, но для того, чтобы приложение претендовало на это звание, оно должно быть мультиплатформенным, работать без подключения к сети, выглядеть как привычное приложение, поддерживать пуш-уведомления, использовать HTTPS и иметь возможность установки.

«Установка» PWA сводится к добавлению страницы в закладки на домашний экран или в программу запуска. Прогрессивные веб-приложения вбирают в себя всё лучшее из мира нативных приложений, но работают на основе веб-протоколов. Подробнее читайте в статье «PWA на пальцах: как лить трафик и с какими проблемами можно столкнуться».

Способы получить собственное PWA

Обзавестись прогрессивным веб-приложением для арбитража трафика можно несколькими способами:

  • Разработка в штате — если у команды есть собственный отдел разработки, то это, вероятно, лучший вариант. Если отдела нет, инфраструктуру придется создавать с нуля, что очень дорого и не всегда оправданно.
  • Аренда PWA — специализированные сервисы предоставляют такие приложения пачками, а значит есть из чего выбрать. Кроме того, за счет специализации качество также на высоте. Проблема здесь в том, что аренда требует дополнительных затрат: вы оплачиваете каждую установку по определенному тарифу. Кроме того, нужные ГЕО могут быть недоступны, так как медиабаинговый отдел разработчиков приметил эти территории для себя.
  • Заказ у фрилансеров или в сервисах — как и в случае с арендой у специализированных поставщиков, придётся заплатить, но зато приложение останется у вас навсегда и будет максимально гибким в плане таргетинга. PWA можно заказать в специализированных рекламных агентствах. Обычно цены стартуют от 5 000 ₽, но в среднем на разработку придётся потратить 10 000 ₽. Впрочем, всё зависит от функционала PWA, мастерства веб-программиста и продолжительности сотрудничества.
  • Получить доступ в партнёрской программе — в ряде ПП существуют собственные отделы разработки, но нужно понимать, что за качество и доступность придётся платить ограничением в выборе прил.
  • Самостоятельная разработка — прилу всегда можно сделать самому: вручную, если вы ладите с разработкой, или с помощью конструктора.

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

Создание прогрессивного веб-приложения самостоятельно

Важно понимать, что создавать PWA без опыта работы с HTML или JavaScript проблематично. Именно поэтому мы предполагаем, что у вас уже имеется готовый HTML сайт, использующий протокол HTTPS. Если это не так — лучше сперва изучить основы веб-разработки с нуля.

Интерфейс генератора манифеста PWA
Интерфейс генератора манифеста PWA (подробности ниже)

1. Иконка. Начинаем с дизайна иконки, которую будут видеть пользователи. Лучше придумать цепляющий логотип, потому что название всё равно будет написано снизу иконки. Как правило, иконки приложений отличаются насыщенными цветами, даже если они расположены на белом фоне.

2. Манифест (Web App Manifest). Данный JSON-файл необходимо расписать и включить в HTML сайта, чтобы веб-браузер понимал что именно необходимо кэшировать, чтобы PWA выглядело как обычное приложение. В данном файле указываются название, иконка, разрешение, цвета и другие характеристики. Вот пример манифеста:

{
  "name": "Space Explorer",
  "short_name": "SpaceEx",
  "description": "Discover and explore planets, stars, and galaxies in the vast universe!",
  "start_url": "/home",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#1f1f1f",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "orientation": "portrait",
  "scope": "/",
  "categories": ["education", "games", "entertainment"],
  "related_applications": [],
  "prefer_related_applications": false
}

В сети существует множество специализированных генераторов PWA манифестов: например Progressier или Web App Manifest Generator.

3. Service worker. Часть прогрессивного веб-приложения, отвечающая за работу оффлайн. Как правило, пишется на JavaScript, который работает отдельно от сайта в фоновом режиме и позволяет контролировать сетевые запросы, а также кэширование ресурсов из браузера. Не забудьте прописать ссылку на готовый файл в HTML вебсайта.

4. Размещение (deploy). Когда приложение собрано, его необходимо загрузить на сервер, к примеру на Firebase для Chrome или Netlify. В случае с последним, необходимо:

  • Создать аккаунт
  • Нажать «New site from Git»
  • Выбрать Git провайдера из предложенных: GitHub, GitLab, Bitbucket
  • Выбрать репозиторий с данными (собственно сайт)
  • Нажать «Deploy site»

По умолчанию Netlify генерирует случайные домены, что можно изменить в настройках аккаунта на хостинге.

5. Тестирование. Последним ходом необходимо протестировать PWA, например через Google Lighthouse. Данный инструмент оценит производительность приложения по шкале от 1 до 100, подсветит ключевые метрики и поможет определиться со стратегией оптимизации.

Создание в конструкторе PWA

Если с разработкой вы не ладите, то самый простой способ — использование конструкторов. Это онлайн-сервисы, где вы буквально собираете приложение как конструктор: выбираете и меняете все его элементы, не создавая их вручную. На рынке есть несколько подобных решений. Самые известные:

  • ZM apps,
  • Pwa.bot,
  • Pwa.Group.

Ключевое преимущество сервисов перед ручной разработкой в том, что все этапы (создание иконки, манифест и тд) собраны на одном экране. А кроме того, вы можете изменять фейк-стор как вашей душе угодно: добавлять отзывы, скриншоты, менять описание, и даже настраивать рейтинг.

Интерфейс конструктора от ZM apps в бегунками оценок. Справа – итоговая страница приложения
Интерфейс конструктора от ZM apps с бегунками оценок. Справа – итоговая страница приложения

Расскажем о сервисах подробнее.

ZM apps

Конструктор PWA и приложений в целом от ZM Apps
Конструктор PWA и приложений в целом от ZM Apps

В конструктор от ZM Apps интегрированы нейросети для генерации текстов приложения, включая описание, комментарии и теги. Есть даже возможность автоперевода кнопок и описания под целевой язык аудитории. Вы также можете настроить визуальные элементы приложения, включая цвет кнопки «скачать».

Интерфейс конструктора от ZM apps
Интерфейс конструктора от ZM Apps

Важно и то, что в конструкторах PWA присутствует удобный UI, что упрощает предпросмотр прилки. Следовательно, меньше риск ошибиться, особенно если вы не сторонник копаться в коде вручную. Конструктор позволяет самому определить рейтинг приложения и сгенерировать комментарии за пару секунд. А ещё можно посмотреть превью установки от лица пользователя, чтобы лучше понимать путь пользователя до конверсии.

Здесь же вы можете настроить поток, пиксель, пуш-уведомления. Регистрация и авторизация в сервисе происходит через Telegram.

Pwa.bot

Конструкторы PWA: как собрать прогрессивное приложение самому
Конструктор от Pwa.bot

Pwa.bot поддерживает 40+ языков, импортирует данные из Google Play и App Store, а также автоматически генерирует описания и дизайн через встроенный ChatGPT.

Среди ключевых возможностей Pwa.bot — интеграция с Facebook Pixel и Conversions API, что позволяет точно отслеживать события и без проблем оптимизировать рекламные кампании, даже если вы новичок.

Особого внимания заслуживает возможность импорта информации из сторов: названия, описания, иконки и медиа автоматически подтягиваются и хранятся на быстрой CDN (сеть доставки контента) от Cloudflare. Это значительно упрощает запуск приложения в любом ГЕО.

Конструктор также предлагает продвинутую аналитику с данными в режиме реального времени. Благодаря BigQuery даже огромные массивы данных обрабатываются мгновенно, а система фильтров позволяет легко управлять отчетами. Оплата идёт исключительно за установки, поэтому начать работу с данным сервисом могут арбитражники любого уровня.

Pwa.Group

Конструкторы PWA: как собрать прогрессивное приложение самому
Интерфейс конструктора от Pwa.Group

Pwa.Group делают ставку на простоту и скорость создания приложений. С их помощью PWA можно склепать под любую вертикаль меньше чем за минуту и без необходимости разбираться в технической стороне вопроса.

Арбитражники могут редактировать любую информацию под нужное ГЕО, настраивать качественные изображения для повышения конверсии, интегрировать аналитику (Google Analytics, Яндекс.Метрика, Facebook Pixel) и трекеры для отслеживания трафика.

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

Универсальная информация

Помните, что часто в конструкторы PWA приложений встроена возможность работы с iOS и Android прилками, что удобно, если вы работаете с аудиторией обеих ОС. Не забываем настроить пиксель, добавить ссылку на трекер и при необходимости выбрать и настроить клоаку.

Прогрессивные веб-приложения устойчивее к банам, чем WebView. Причём это касается даже такой вертикали, как iGaming. А благодаря конструктору, приложение можно создать буквально за 10 минут.

Подводя итоги

PWA популярны при работе с гемблой и беттингом, но подобное приложение возможно приспособить почти под любую вертикаль. Заполучить такую прилу можно несколькими способами, как платными и так и бесплатными, но если вы хотите сделать собственное приложение и при этом не погружаться в разработку, ваш выбор — конструкторы PWA.