Перейти к основному содержимому

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

Шаг 1. Загрузка Toolkit​

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

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

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

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

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

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

  • 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');

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

Алгоритм действий для данного варианта указан в правой части. Нажмите на кнопку "Загрузить", после чего будет загружен архив 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 и отредактируйте его, указав нужный путь до файла.

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

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

Пример для кнопки "Подписаться":

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

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

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

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