SDK на своём прелендинге

Обычно посетитель попадает на прелендинг, а оттуда — на карточку-витрину PWA, где стоит кнопка установки. Но установку и подписку на пуши можно запустить прямо на своём прелендинге: подключаете Browser SDK и вызываете его методы по своим кнопкам. Тогда посетитель устанавливает приложение и подписывается на пуши, не уходя на витрину.

Установка приложения посетителю при этом не обязательна: подписка на пуши работает и без неё.

Что нужно заранее

• Прелендинг загружен в Qubix. Это ваша страница в разделе Сайты — загрузите её так же, как обычный сайт (см. Загрузка сайта).
• Домен заведён и активен. Прелендинг должен обслуживаться на домене, который заведён в Qubix и активен (см. Домены). Это обязательно: установка и пуши работают только когда страница и служебные адреса SDK находятся на одном домене.
• PWA создано — вам понадобится его идентификатор (pwaId) из карточки в разделе PWA Apps.

Как подключить

1. В коде прелендинга задайте настройки и подключите скрипт SDK. Настройки — до скрипта:

   index.htmlHTML

   <script>
     window.pwaConfig = {
       pwaId: 'ВАШ-PWA-ID',
       domain: 'ваш-домен.com',
     }
   </script>
   <script src="https://ваш-домен.com/sdk.js" defer></script>

   Ключ для пушей подставляется в /sdk.js автоматически — вручную его добавлять не нужно. Полный разбор полей — в Справочнике Browser SDK.

2. Подготовьте SDK к установке — один раз при загрузке страницы. Этот вызов регистрирует служебную часть и подключает манифест приложения:

   JavaScript

   sdk.pwa.init()

3. Повесьте установку на свою кнопку:

   HTML

   <button id="install">Установить приложение</button>
   <script>
     document.getElementById('install').addEventListener('click', () => {
       sdk.pwa.install()
     })
   </script>

4. Повесьте подписку на пуши на свою кнопку (или вызовите в удобный момент):

   JavaScript

   await sdk.subscribePush()

Готово — установка и подписка происходят на вашей странице. На карточку-витрину посетителя ничего не отправляет.

Совет

Если в каком-то сценарии витрина всё-таки нужна, её открывает sdk.showStore(). Не вызываете этот метод — посетитель остаётся на вашем прелендинге.

Установку показывает браузер

Кнопку установки показывайте только когда установка действительно доступна — проверяйте sdk.pwa.canInstall(). Браузеры разрешают запрос установки не всегда: нужны защищённое соединение (HTTPS) и, как правило, действие посетителя на странице. Поэтому и установку, и подписку обычно вешают на явное нажатие, а не запускают сразу при загрузке.

Проверка

Откройте прелендинг на телефоне, нажмите свои кнопки — браузер покажет запрос установки и запрос на уведомления. Результат виден в отчётах: события install_accepted, push_allow и другие попадают в поток событий.

Что дальше

Справочник Browser SDK

Все методы Browser SDK и события.

Загрузка сайта

Как загрузить прелендинг в Qubix.

Пуш-кампании

Отправка уведомлений тем, кто подписался.