Простой пример библиотеки для работы с webpush уведомлениями, поддерживающая современные браузеры и различные способы инициализации подписки.
Эта библиотека предоставляет простой и удобный способ интеграции веб-пуш-уведомлений в веб-приложения. Она автоматически обрабатывает подписку пользователей, управляет разрешениями и отправляет уведомления через Service Worker.
- Скопируйте файл
notify.jsв корень вашего проекта - Создайте файл
sw.js(Service Worker) в корне проекта - Подключите библиотеку в HTML:
<script src="notify.js"></script>
В конце файла notify.js настройте параметры:
}.call(window, { userId: 'user-id', // ID пользователя publicKey: 'you-key', // Публичный ключ для подписки apiURL: 'https://you-api.com', // URL вашего API type: {name: 'click', delay: 3} // Тип инициализации }));
| Параметр | Тип | Описание | Обязательный |
|---|---|---|---|
userId |
string | Уникальный идентификатор пользователя | Да |
publicKey |
string | Публичный ключ для подписки | Да |
apiURL |
string | URL вашего API для обработки подписок | Да |
type |
object | Настройки инициализации подписки | Нет |
// По клику пользователя type: {name: 'click'} // С задержкой (в секундах) type: {name: 'delay', delay: 3}
Создает и показывает уведомление.
Notification('Заголовок', { body: 'Текст уведомления', icon: 'path/to/icon.png', data: {url: 'https://example.com'}, tag: 'unique-tag' });
Запрашивает разрешение на показ уведомлений.
Notification.requestPermission(function(permission) { console.log('Разрешение:', permission); });
Возвращает текущий статус разрешений.
| Свойство | Тип | По умолчанию | Описание |
|---|---|---|---|
tag |
string | '' | Уникальный тег уведомления |
dir |
string | 'ltr' | Направление текста |
image |
string | '' | URL изображения |
delay |
number | 0.2 | Задержка показа (секунды) |
body |
string | 'your body text' | Текст уведомления |
data |
object | {} | Дополнительные данные |
icon |
string | base64 | Иконка уведомления |
<!DOCTYPE html> <html> <head> <title>Web Push Notifications</title> </head> <body> <h1>Тест уведомлений</h1> <button onclick="showNotification()">Показать уведомление</button> <script src="notify.js"></script> <script> function showNotification() { Notification('Привет!', { body: 'Это тестовое уведомление', icon: '/icon.png', data: {url: 'https://example.com'} }); } </script> </body> </html>
Библиотека отправляет POST запросы на ваш API:
POST {apiURL}/{userId}/{auth}/subscribe
POST {apiURL}/{userId}/{auth}/update
POST {apiURL}/{userId}/{auth}/remove
{
"endpoint": "https://fcm.googleapis.com/fcm/send/...",
"key": "base64-encoded-p256dh-key",
"auth": "base64-encoded-auth-secret",
"oldAuth": "previous-auth-secret",
"publicKey": "your-public-key",
"contentEncoding": "aesgcm",
"userinfo": {
"name": "Chrome",
"device": "windows",
"mobile": false,
"platform": "Win32"
}
}Этот код предоставляется "как есть" без каких-либо гарантий.
The MIT License