Отправка Web Push уведомлений

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

В Carrot Quest Web Push — отдельный канал коммуникации, наравне с email, мессенджерами и чатом:

1. Пользователь вашего клиента подписывается на получение пушей через поп-ап с кнопкой (даёт разрешение браузеру).
2. Подписанный пользователь попадает в сегмент получателей Web Push.
3. Вы отправляете push вручную, автосообщением или в триггерной цепочке.
4. Пользователь получает уведомление в системном центре уведомлений своего браузера/ОС — даже если в этот момент сайт не открыт.

С технической точки зрения Web Push работает за счёт встроенных возможностей браузера (Push API + Service Worker) и требует явного разрешения пользователя — без разрешения показать уведомление невозможно технически, это ограничение самого браузера.

Доставка устроена так: уведомление уходит через Firebase Cloud Messaging (FCM) на токен устройства, зарегистрированный при подписке (UserFirebaseToken), а показывает его на экране пользователя Service Worker — небольшой скрипт, который клиент один раз размещает у себя на сайте (об этом ниже).

В этой статье:

- Предварительная настройка Service Worker
- Настройка канала Web Push в Carrot quest
- Как собрать согласие на получение Web Push
- Как настроить Web Push
- Взаимодействие лида с Web Push
- Отписка от Web Push
- Особенности и ограничения работы Web Push в разных браузерах

Настройка Service Worker для работы Web Push

Для работы Web Push вам нужно разместить на вашем сайте Service Worker файл. Инструкция по настройке также будет доступна при переходе в раздел “Настройки” → “Общие настройки” → “Web Push”.

Для чего это нужно: Service Worker обрабатывает показ веб-пуша, когда сайт закрыт, и разрешение на показ спрашивается через наш скрипт — это фундамент, без которого работа с Web Push невозможна.

1. Разместите файл /firebase-messaging-sw.js  строго в корне сайта, с содержимым importScripts(<https://cdn.carrotquest.app/firebase-messaging-sw.js>)') 
2. Настройте HTTP-заголовки: Content-Type: application/javascript, Cache-Control: no-cache. 
3. Проверьте, что файл доступен через выполнение GET-запроса https://ваш-сайт.ru/firebase-messaging-sw.js - в результате вы должны получить код 200 и JavaScript-код, не ошибку 404.

Подробную инструкцию можно передать техническим специалистам с вашей стороны. Когда настройка будет завершена, вы сможете перейти к настройке самих веб-пушей.

 Настройка канала Web Push в Carrot quest

Данная настройка нужна для того, чтобы задать значения по умолчанию, которые подставляются во все web push, если они не переопределены в конкретном сообщении. 

После того, как вы установили Service Worker файл на сайте, перейдите  в раздел “Настройки” → “Общие настройки” → “Web Push”.

Здесь можно установить следующие параметры:

1. Базовое изображение уведомления — 192×192 px, до 1 МБ.
2. Ссылка в уведомлении — ведет на ваш сайт.
3. Домен для подписки на уведомления — пропишите адрес вашего сайта.

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

Как собрать согласие на получение Web Push

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

При этом показ web push будет привязан конкретно к тому браузеру, в котором пользователь оставлял согласие. 

Чтобы предложить пользователю подписаться на web push, покажите ему поп-ап. Создайте триггерный или ручной поп-ап и на шаге “Содержание” добавьте в поп-ап кнопку. В качестве действия для кнопки выберите "Подписка на Web Push"

Завершите настройку поп-апа и запустите его.

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

Внешний вид окна зависит от браузера и устройства пользователя, а также от данных, указанных в разделе “Настройки” → “Общие настройки” → “Web Push”.

Настройка и запуск Web Push уведомления

Создать Web Push можно в разделе "Триггерные сообщения", либо создать при настройке ручной рассылки, а также создать шаблон для использования перед отправкой. 

Выберите тип сообщения Web push и настройте содержание:

• Обязательные параметры - Заголовок и Содержание. В них можно использовать персонализацию по свойствам пользователя, добавив ее при помощи кнопки.

Рекомендуем использовать в заголовке не более 40 символов, а в Содержании - не более 90 символов. Такой пуш отображается наиболее корректно в большинстве браузеров.

• Укажите ссылку для перехода по клику на пуш - ссылка также является обязательным параметром. В ссылках поддерживается персонализация при помощи jinja.
  
  
• Добавьте иконку уведомления (192×192 px, до 1 МБ)
  
  
• Дополнительно можно добавить изображение в шапку пуша (рекомендуемое расширение от 512×256 до 2048×1024 px, оптимальное около 1024×512)
  
  
• Также можно добавить до двух кнопок. Для кнопок также можно задать ссылку, куда будет вести кнопка. Можно записать событие по клику на кнопку, чтобы использовать его при настройке других сценариев и сегментации.
  
  
• Справа вы увидите превью вашего веб-пуша. Кнопки над превью позволят посмотреть, как пуш будет выглядеть на разных устройствах (Windows, Android, MacOS). 

Взаимодействие пользователя с Web Push

После того, как пользователь оставил согласие на получение Web Push, в его карточке лида вы сможете увидеть эту информацию в колонке слева, в блоке "Подписки":

Что показано в карточке лида:

• Подписанные устройства — список подписанных устройств (например, «Chrome Mobile 55.0.2883» — браузер и версия) и ссылка «Управление подписками на Web Push». У лида может быть больше одного подписанного устройства.
   
• По клику на Управление подписками открывается окно «Список подписок на Web Push» — таблица, где на каждое устройство указано отдельной строкой с колонками: браузер (с версией), дата и время подписки, тип устройства (например, «Телефон»), модель устройства, операционная система (с версией):

• Отправленный push отображается в истории диалогов лида

При взаимодействии пользователей с веб-пушами в карточке фиксируются следующие события:

• Клик по телу push → переход по основной ссылке
• Клик по кнопке → переход по ссылке кнопки
• Опционально — запись клика по кнопке как события

Отписка от Web Push

У пользователя есть возможность отказаться от получения веб-пушей. Отписать пользователя также можно в ЛК Carrot quest.

Какие варианты отписки существуют: 

1. Ручная отписка сотрудником проекта в Carrot quest, в карточке лида (по ссылке «Список подписок на Web Push»)
    
2. Пользователи, ранее согласившиеся на получение веб-пуша могут самостоятельно отписаться через настройки браузера 

Если пользователь заблокировал уведомления и хочет разрешить их снова

1. Если пользователю после отписки уже пытались отправить Web push (и при отправке возникла ошибка из-за недействительного разрешения) — ему нужно подписаться заново через поп-ап с кнопкой «Подписка на Web Push», как в первый раз.
2. Если пуш ему не отправляли (то есть ошибки отправки не было) — достаточно, чтобы пользователь просто вручную разрешил уведомления для сайта в настройках браузера — специальных действий на стороне Carrot quest не требуется.

Ограничения Web Push по платформам и браузерам 

• macOS — большая картинка не отображается; кнопки действий показываются не в самом уведомлении, а в настройках пуша ОС.
• Safari (macOS и мобильный) — не показывает иконку; не отправляет push с полями, которые не поддерживает (кнопки, дополнительное изображение)
• Firefox — не поддерживаются кнопки
• В режиме Инкогнито Web push и поп-ап с подпиской не показываются
• При запрете всплывающих окон в браузере поп-ап подписки не покажется.
• Push уходит только в тот браузер/устройство, где было получено согласие.

Посмотреть, какие браузеры поддерживают Web Push, можно тут: https://caniuse.com/push-api

Ограничения для iOS

На данный момент отправлять Web Push на iOS/iPadOS нельзя из-за технических ограничений данных платформ.