PWA-приложения сочетают функции сайтов и мобильных приложений. В арбитраже трафика их используют, так как они удобнее, а также поддерживают push-уведомления. В этой статье расскажем подробнее о том, что такое PWA и какие функции они выполняют для аффилиатов.
Содержание
Что такое PWA-приложения
PWA (Progressive Web App) — веб-приложения, которые работают как сайт на мобильном устройстве. Это разработка, которая открывается, как страница в браузере, но быстрее загружается и работает офлайн.
Преимущества:
- Улучшенное юзабилити. Такие приложения работают бесперебойно, а также могут адаптироваться под любые устройства;
- Поддержка пушей. У арбитражника есть возможность взаимодействовать с пользователями, которые покинули страницу. Это повышает шансы на конверсию;
- Иконка на главном экране. PWA выглядит, как обычное приложение на смартфоне. У него есть иконка и название тех же размеров, что и у других установок. Так, нужная страница будет всегда в быстром доступе и не привлечет ненужного внимания;
- Обособленность от магазинов приложений. За размещение разработки в Google Play или App Store владелец платит комиссию. Также платформа проверяет, какое приложение вы добавили в магазин. PWA не требуют платформ для скачивания, но при этом выглядят, как другие установки на устройстве.
Такие разработки полезнее для IGaming-арбитражников, так как они не проходят модерацию в магазине приложений. Пользователь может сразу после заполнения формы для регистрации быстро установить PWA на главный экран и начать получать уведомления.
Отличия PWA от Webview
Многие путают два этих понятия, так как внешне эти установки выглядят похожими, но они разные с точки зрения следующих параметров:
| Отличие | Webview | PWA |
| Установка | В магазине приложений | С сайта компании |
| SEO | Не индексируется поисковыми системами | Индексируется |
| Обновления | В магазине приложений | Автоматические |
| Скорость | Зависит от официального сайта и устройства | Высокая за счет офлайн-режима |
| UAC | Поддерживается | Не поддерживается |
Webview-приложения более популярны, но по функциональности PWA им не уступают. Это разные разработки со своими особенностями.
Как создать прогрессивное веб-приложение самостоятельно
Без опыта работы с JavaScript, HTML и Service Worker создать приложение сложно. Мы рекомендуем довериться разработчикам, так как проект с первого раза может не получиться:
Выбрать безопасный протокол
HTTPS — один из наиболее безопасных протоколов для передачи информации. Если ваш ресурс использует его, то можно перейти ко второму шагу
Создать иконку
Это картинка, которая отображается на главном экране устройства. Чаще всего используют логотип компании.
Чтобы иконка была понятной, лучше не использовать на ней надписи, так как название будет продублировано под картинкой на устройстве.
Написать манифест
Это информация в виде кодов о том, как будет выглядеть приложение для пользователя.
Пример программы, написанной с помощью App Manifest Generator:
Он включает название, description, сокращенное название, начальный URL-адрес и другие параметры.
Создать Service worker
Service worker — это скрипт, который запускается в фоновом режиме и позволяет страницам работать офлайн. Он написан на языке программирования Java Script. Скрипт кэширует данные и контролирует сетевые запросы.
Вам необходимо прописать, какие страницы сайта будут видны пользователям в офлайн-режиме. Затем останется добавить ссылку на скрипт в HTML-код сайта.
Загрузка PWA на сервер
Необходимо добавить приложение на хостинговую платформу. Инструкция по загрузке для всех серверов разная. Приведем пример работы с Firebase от Google:
- Создайте проект в консоли Firebase;
- Установите на ПК файл CLI Firebase (интерфейс командной строки);
- Перенесите скачанный файл в папку с информацией о вашем сайте;
- После запуска командной строки следуйте инструкции, пока не появится надпись “Firebase CLI Login Successful”;
- Введите команду “firebase init” и на вопрос о готовности к работе ответьте “Yes”;
- В разделе “Hosting” нажмите пробел, а затем — Enter;
- В пункте “Use an existing project” нажмите Enter;
- На следующие 3 вопроса в консоли отвечайте по очереди: “Public”, “No” и “No”;
- После ввода команды “firebase deploy” ждите развертывания сайта. Об успешной настройке свидетельствует ссылка, которая заканчивается на “.web.app”;
- Перейдите в консоль и нажмите на “Get started”;
- В категории Build выберите раздел “Hosting” и нажмите на кнопку “Add custom domain”.
- Введите свой домен и скопируйте запись;
- Скопируйте полученный IP и введите А-запись в зону домена;
- Загрузка длится до 24 часов. Дождитесь финала и по завершении нажмите “Finish”.
Это инструкция к добавлению сайта на хостинг Firebase. Для других платформ действуют разные правила.
Протестировать PWA-приложение
Базовый тест можно сделать вручную. Попробуйте установить приложение, отключите Интернет, чтобы проверить его работу офлайн, посмотрите, как PWA отображается на разных устройствах.
Для более точного аудита можно использовать специальные сервисы, например:
- Lighhouse. Оценивает работу мобильной версии сайта и дает рекомендации по улучшению. Его можно открыть в Chrome DevTools с помощью командной строки. После проверки он отправляет отчет о том, насколько хорошо работала страница;
- PWABuilder. Инструмент дает возможность проверить PWA по трем секциям: Web Manifest, Service Worker и Store Ready Checklist. Каждый элемент оценивается отдельно. Если программа видит ошибку, она оставляет предупреждение с инструкцией о том, как ее исправить.
Создать и протестировать продукт может также frontend-разработчик и любой специалист, который знает JavaScript.
Где найти PWA-приложения
PWA можно создать самостоятельно или с помощью конструкторов. Это сайты, которые предоставляют инструменты для оформления страниц. Там учитывается не так много настроек, как при самостоятельном создании PWA с нуля, но зато они помогут тем, кому срочно потребовалась разработка.
Примеры:
- PWA.bot. Предоставляет готовые дизайны. Сервис поддерживает 41 язык и автоматически переводит все надписи, включая кнопки. Готовое PWA подходит для 250 ГЕО. Вам необходимо скопировать дизайн, выбрать иконку, сгенерировать текстовую часть с помощью встроенного GPT и протестировать итоговый вариант;
- BlackApp. В сервис уже встроена white page и клоака. Создать PWA вы можете в несколько кликов. С помощью конструктора можно разрабатывать уникальный дизайн и продвигать продукт без банов с возможностью регулярного редактирования страниц;
- ZM Apps. Это сервис аренды мобильных приложений для гемблинг- и беттинг-ниш. Разработчик предлагает встроенный конструктор PWA-приложений с множеством опций. Действуют разные тарифы. По одному из них вы можете заказать кастомные дизайны. Также по промокоду DIASP500 вы получите скидку +500 бесплатных инсталлов к Trial.
С помощью сервисов вы можете также создать пробный вариант мобильной версии для того, чтобы использовать этот шаблон при разработке PWA-приложения с нуля.
Заключение
PWA-приложения — это возможность постоянно быть на связи со своими пользователями. Благодаря размещению на экране смартфона, он не выделяется и существует как отдельное приложение со встроенными push-уведомлениями.
Источников трафика становится больше. Сначала на рынке приложений лидировали webview, но благодаря офлайн-доступу, быстрой загрузке и другим преимуществам PWA становятся более популярными.
Следите за новостями, читайте свежие статьи и обзоры, чтобы быть в курсе событий в арбитраже трафика.
Удачи и профита!
