Перейти к основному содержимому
Версия: v72

Подключение Web Push на сайт

Загрузка Toolkit​

После того как нужные настройки ресурса заполнены, можно сохранить его и скачать Toolkit, части которого затем размещаются на вашем сайте. Toolkit — это набор файлов, предназначенных для работы Web Push-уведомлений на вашем сайте. Он помогает настроить подписку у пользователей и отправку уведомлений через браузеры.

к сведению

Toolkit сам по себе не вызывает окно подписки, он лишь содержит необходимые файлы и скрипты для работы с уведомлениями. Чтобы пользователь увидел предложение подписаться, нужно добавить код на сайте, который вызывает соответствующую функцию ak-push.js.

Toolkit появится в разделе Установка вместо предупреждения "Сохраните ресурс, для того чтобы скачать инструментарий":

Установка нужных файлов на сайт возможна двумя способами:

  1. Добавление кода на сайт и загрузка установочных файлов в корневую директорию сайта;
  2. Загрузка инструментария для разработчиков.

Способ 1: Добавление кода на сайт и загрузка установочных файлов в корневую директорию сайта​

Алгоритм действий для данного варианта указан в левой части. Добавьте указанный код на сайт, затем сохраните и загрузите в корневую директорию сайта установочные файлы:

  • manifest.json — данные о проекте для отправки push через Google Chrome;
  • service-worker.js — service worker, который регистрируется в браузерах пользователей и принимает push сообщения.

Здесь файл service-worker.js является динамическим. Он автоматически обновляется каждый раз, когда вы вносите изменения в настройки ресурса.

Пример service-worker.js
    
importScripts('https://pxl.test.com/service-worker.js?id=MXw3');

Способ 2: Загрузка инструментария для разработчиков​

Алгоритм действий для данного варианта указан в правой части. Нажмите на кнопку "Загрузить", после чего будет загружен архив Toolkit. Распакуйте архив и разместите файлы Toolkit в корневой директории вашего сайта.

Toolkit состоит из четырёх файлов:

  • README.txt — инструкция по установке Toolkit;
  • ak-push.js — скрипт, который показывает пользователям предложение подписаться на push-оповещения;
  • manifest.json — данные о проекте для отправки push через Google Chrome;
  • service-worker.js — service worker, который регистрируется в браузерах пользователей и принимает push-сообщения.

Здесь файлы service-worker.js и ak-push.js является статичным. При использовании данного способа после изменения настроек ресурса необходимо заново загрузить Toolkit и обновить файлы на сайте.

подсказка

При использовании инструментария для разработчиков можно изменить путь до файла service-worker.js. Для этого откройте файл ak-push.js, найдите свойство swPath и отредактируйте его, указав нужный путь до файла.

Добавление скриптов на сайт​

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

Ниже приведен пример кода для кнопки "Подписаться". Этот код запускает библиотеку и инициализирует подписку:

    
<button id="init_sub">Подписаться на уведомления</button> // Кнопка подписки

// ..Основная часть кода..

<script>
	document.getElementById('init_sub').addEventListener('click', function() { // По клику на кнопку..
	try {
		const akPush = new AKPush();
		akPush.initSubscription() // ..показать форму подписки
		}
	catch (e) {
		console.log(e); // ..или записать ошибку в консоль браузера
		}
	});
</script>

подсказка

Через платформу Altcraft вы можете создать собственный попап с предложением подписки. Подробнее прочесть об этом можно в этой статье.

Код, описанный выше, работает по следующей логике:

  • Пользователь нажимает на кнопку;
  • Вызывается метод initSubscription;
  • Всплывает системное окно браузера с предложением подписаться на уведомления этого сайта.

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

Как только все будет настроено, можно будет зайти на сайт и подписаться на push-уведомления. В браузере клиента при подтверждении устанавливается Service worker, отображающий сообщения даже при свернутом окне браузера.

Обратите внимание, что подписка на один и тот же ресурс будет происходить повторно для каждого браузера (или учетной записи), которым пользуется клиент. Идентификатором для подписки служит токен браузера или учетной записи. Таким образом, у одного профиля может быть несколько активных push-подписок, если он подписывался на уведомления с разных браузеров.

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

Последнее обновление