Push JS - Effortlessly send push notifications to your website visitors

Push-уведомления в JavaScript – это специальные уведомления, которые отправляются пользователям, даже когда они не активны на вашем сайте. Они позволяют привлекать внимание пользователей, уведомляя их о новых сообщениях, обновлениях и т.д. Это очень удобный способ удержания внимания пользователей, которые могут забыть о вашем сайте, если не получают на него никаких напоминаний.

Пример кода:

Для реализации push-уведомлений нам понадобится использовать Service Workers и API Push Notifications.

1. Первым шагом мы должны зарегистрировать наш service worker. Это можно сделать при помощи следующего кода:

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw.js').then(function(registration) {

console.log('ServiceWorker registration successful with scope: ', registration.scope);

}).catch(function(err) {

console.log('ServiceWorker registration failed: ', err);

});

}

2. Далее, мы должны запросить разрешение на отправку уведомлений браузера. Это можно сделать при помощи следующего кода:

Notification.requestPermission(function(status) {

console.log('Notification permission status:', status);

});

3. Создадим функцию, которая будет отправлять сообщения нашим пользователям:

function displayNotification() {

if (Notification.permission == 'granted') {

navigator.serviceWorker.getRegistration().then(function(reg) {

var options = {

body: 'This is the body text of the notification',

icon: 'images/icon.png',

vibrate: [100, 50, 100],

data: {

dateOfArrival: Date.now(),

primaryKey: '2'

},

actions: [

{action: 'explore', title: 'Explore this new world',

icon: 'images/checkmark.png'},

{action: 'close', title: 'Close',

icon: 'images/xmark.png'},

]

};

reg.showNotification('Hello world!', options);

});

}

}

В этой функции мы настраиваем опции уведомлений, такие как текст, иконку, вибрацию и действия, которые пользователь может совершить, а затем вызываем метод reg.showNotification с заголовком "Hello world!".

4. Теперь мы можем вызвать нашу функцию по кнопке:

document.getElementById('myButton').addEventListener('click', function() {

displayNotification();

});

5. Наконец, мы добавляем слушателя событий на событие нажатия на уведомление, чтобы определить, какую кнопку пользователь нажал:

self.addEventListener('notificationclick', function(event) {

if (event.action === 'explore') {

clients.openWindow('/#target-url');

} else if (event.action === 'close') {

event.notification.close();

} else {

event.notification.close();

}

});

Здесь мы проверяем, какую кнопку нажал пользователь, и выполняем соответствующее действие. Например, если пользователь нажимает кнопку "explore", мы открываем вкладку с адресом "/#target-url".

В итоге мы получаем функционал push-уведомлений на нашем сайте, что позволяет нам удерживать внимание пользователей и напоминать им о нашем сайте и новых сообщениях.