🔔

PushWave

Web Push Notifications
v1.0.0
Инициализация...
1
Конфигурация Firebase
Настройки проекта FCM
Не настроен
ℹ️
Создайте проект на console.firebase.google.com, добавьте веб-приложение и скопируйте конфигурацию ниже.

Web Push certificates → Key pair → Public key

📦 Шаг 1: Создание Firebase проекта
  1. Перейдите на console.firebase.google.com
  2. Нажмите «Добавить проект»
  3. Введите название и следуйте инструкциям
  4. В проекте нажмите «Добавить приложение» → Web (</>)
  5. Скопируйте firebaseConfig и вставьте выше
🔑 Шаг 2: Получение VAPID ключа
  1. Firebase Console → Project Settings ⚙️
  2. Вкладка Cloud Messaging
  3. Раздел Web Push certificates
  4. Нажмите «Generate key pair»
  5. Скопируйте Public Key и вставьте выше
📱 Шаг 3: Настройка Android

Для получения уведомлений на Android:

  1. Откройте этот сайт в Chrome на Android
  2. Нажмите «Подписаться» и разрешите уведомления
  3. Или добавьте сайт на главный экран (Add to Home Screen)

Уведомления работают даже при закрытом браузере через Service Worker.

🖥️ Шаг 4: Отправка через сервер (Node.js)

Для продакшн-отправки используйте web-push на сервере:

npm install web-push const webpush = require('web-push'); webpush.setVapidDetails( 'mailto:you@example.com', PUBLIC_VAPID_KEY, PRIVATE_VAPID_KEY ); await webpush.sendNotification(subscription, JSON.stringify({ title: 'Привет!', body: 'Сообщение с сервера', icon: '/icon.png' }));
2
Подписка на уведомления
Разрешение и регистрация Service Worker
Не активна
Нажмите «Подписаться» для получения токена...
3
Отправить уведомление
Тестирование и настройка пуш-сообщений
🔔
🔔 Тестовое уведомление
Привет! Это тестовый пуш с вашего сайта 🚀
pushwave.app • сейчас

Требовать взаимодействие
Уведомление не исчезнет само
Вибрация
Паттерн вибрации на Android
4
Журнал событий
Лог активности
💡
Service Worker — файл sw.js должен находиться в корне сайта. Он обрабатывает уведомления даже при закрытом браузере. Для продакшн-отправки нужен сервер с библиотекой web-push.