Подключение 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-подписок, если он подписывался на уведомления с разных браузеров.

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