375 lines
13 KiB
Markdown
375 lines
13 KiB
Markdown
# Где должно появиться Push-уведомление?
|
||
|
||
## 🎯 Правильный ответ: В СИСТЕМНЫХ УВЕДОМЛЕНИЯХ
|
||
|
||
Push-уведомления - это **НЕ уведомления на сайте**, а **системные уведомления браузера/ОС**.
|
||
|
||
### Windows
|
||
- Появляются в **правом нижнем углу экрана** (Action Center)
|
||
- Выглядят как обычные Windows уведомления
|
||
- Звук уведомления (если включен)
|
||
|
||
### macOS
|
||
- Появляются в **правом верхнем углу** экрана
|
||
- Стиль нативных macOS уведомлений
|
||
|
||
### Linux
|
||
- Зависит от DE (GNOME, KDE, etc.)
|
||
- Обычно верхний правый или верхний центр
|
||
|
||
### Android/iOS (мобильные браузеры)
|
||
- В панели уведомлений телефона
|
||
- Как обычные push-уведомления приложений
|
||
|
||
---
|
||
|
||
## ❓ Почему уведомление может не появиться?
|
||
|
||
### 1. Уведомления заблокированы в браузере
|
||
|
||
**Проверка:**
|
||
1. Откройте сайт
|
||
2. Нажмите на **иконку замка** 🔒 слева от адресной строки
|
||
3. Найдите "Уведомления"
|
||
4. Должно быть **"Разрешить"** (Allow)
|
||
|
||
**Решение:**
|
||
```
|
||
Chrome/Edge: 🔒 → Уведомления → Разрешить → Обновить страницу
|
||
Firefox: Меню → Настройки → Приватность → Разрешения → Уведомления
|
||
```
|
||
|
||
---
|
||
|
||
### 2. Уведомления заблокированы в ОС
|
||
|
||
#### Windows 10/11
|
||
1. **Параметры → Система → Уведомления и действия**
|
||
2. Убедитесь, что уведомления **включены глобально**
|
||
3. Найдите ваш браузер в списке приложений
|
||
4. Убедитесь, что для браузера уведомления **разрешены**
|
||
|
||
#### macOS
|
||
1. **System Preferences → Notifications**
|
||
2. Найдите ваш браузер (Chrome, Firefox, Safari)
|
||
3. Убедитесь, что уведомления **включены**
|
||
|
||
#### Linux (GNOME)
|
||
```bash
|
||
gnome-control-center notifications
|
||
```
|
||
Проверьте, что уведомления включены для браузера.
|
||
|
||
---
|
||
|
||
### 3. Режим "Не беспокоить"
|
||
|
||
#### Windows
|
||
- Проверьте **Action Center** (Win + A)
|
||
- Отключите "Фокусировка внимания" (Focus Assist)
|
||
|
||
#### macOS
|
||
- Проверьте, что не включен **Do Not Disturb**
|
||
- Notification Center → Отключите DND
|
||
|
||
---
|
||
|
||
### 4. Service Worker не зарегистрирован
|
||
|
||
**Проверка:**
|
||
1. Откройте **DevTools** (F12)
|
||
2. Вкладка **Application**
|
||
3. Слева: **Service Workers**
|
||
4. Должен быть зарегистрирован `/service-worker.js` со статусом **"activated and is running"**
|
||
|
||
**Если нет:**
|
||
```javascript
|
||
// В консоли браузера
|
||
navigator.serviceWorker.getRegistrations().then(regs => {
|
||
console.log('Registered Service Workers:', regs.length);
|
||
regs.forEach(reg => console.log(reg));
|
||
});
|
||
```
|
||
|
||
**Решение:**
|
||
1. Перейдите в **Дашборд → Уведомления**
|
||
2. Нажмите **"Включить уведомления"** снова
|
||
3. Проверьте консоль на ошибки регистрации
|
||
|
||
---
|
||
|
||
### 5. Push подписка не создана
|
||
|
||
**Проверка в консоли браузера:**
|
||
```javascript
|
||
navigator.serviceWorker.ready.then(reg => {
|
||
reg.pushManager.getSubscription().then(sub => {
|
||
if (sub) {
|
||
console.log('✅ Push подписка существует:', sub.endpoint);
|
||
} else {
|
||
console.log('❌ Push подписка отсутствует');
|
||
}
|
||
});
|
||
});
|
||
```
|
||
|
||
**Решение:**
|
||
Включите уведомления заново на странице "Уведомления".
|
||
|
||
---
|
||
|
||
### 6. Ошибка на сервере при отправке
|
||
|
||
**Проверка логов backend:**
|
||
```bash
|
||
pm2 logs ospab-backend --lines 100 | grep "TEST PUSH"
|
||
```
|
||
|
||
**Должны увидеть:**
|
||
```
|
||
✅ [TEST PUSH] Push-уведомление успешно отправлено!
|
||
```
|
||
|
||
**Если ошибка:**
|
||
```
|
||
❌ [TEST PUSH] Ошибка при отправке Push: ...
|
||
```
|
||
|
||
**Возможные причины:**
|
||
- Неправильные VAPID ключи
|
||
- Устаревшая подписка (410 Gone)
|
||
- Проблемы с сетью
|
||
|
||
---
|
||
|
||
## 🧪 Пошаговая диагностика
|
||
|
||
### Шаг 1: Проверьте разрешения браузера
|
||
|
||
```javascript
|
||
// В консоли браузера
|
||
console.log('Notification permission:', Notification.permission);
|
||
// Должно быть: "granted"
|
||
|
||
if (Notification.permission !== 'granted') {
|
||
console.log('❌ Уведомления не разрешены!');
|
||
console.log('Перейдите в Дашборд → Уведомления → Включить уведомления');
|
||
}
|
||
```
|
||
|
||
### Шаг 2: Проверьте Service Worker
|
||
|
||
```javascript
|
||
// В консоли браузера
|
||
navigator.serviceWorker.getRegistrations().then(regs => {
|
||
if (regs.length === 0) {
|
||
console.log('❌ Service Worker не зарегистрирован!');
|
||
} else {
|
||
console.log('✅ Service Workers найдены:', regs.length);
|
||
regs.forEach((reg, i) => {
|
||
console.log(` SW ${i+1}:`, reg.active ? '✅ Активен' : '❌ Не активен');
|
||
});
|
||
}
|
||
});
|
||
```
|
||
|
||
### Шаг 3: Проверьте Push подписку
|
||
|
||
```javascript
|
||
// В консоли браузера
|
||
navigator.serviceWorker.ready.then(reg => {
|
||
reg.pushManager.getSubscription().then(sub => {
|
||
if (!sub) {
|
||
console.log('❌ Push подписка не найдена!');
|
||
console.log('Включите уведомления в разделе "Уведомления"');
|
||
} else {
|
||
console.log('✅ Push подписка активна');
|
||
console.log(' Endpoint:', sub.endpoint);
|
||
}
|
||
});
|
||
});
|
||
```
|
||
|
||
### Шаг 4: Тестовое уведомление вручную
|
||
|
||
```javascript
|
||
// В консоли браузера (для быстрой проверки)
|
||
new Notification('Тест', {
|
||
body: 'Это локальное тестовое уведомление',
|
||
icon: '/logo192.png'
|
||
});
|
||
```
|
||
|
||
**Если это уведомление появилось:**
|
||
- ✅ Браузер и ОС настроены правильно
|
||
- ❌ Проблема в Push-подписке или на сервере
|
||
|
||
**Если не появилось:**
|
||
- ❌ Проблема в настройках браузера/ОС
|
||
- Проверьте разрешения (см. выше)
|
||
|
||
### Шаг 5: Проверьте консоль Service Worker
|
||
|
||
1. **DevTools → Application → Service Workers**
|
||
2. Найдите ваш SW
|
||
3. Кликните **"inspect"** или кнопку консоли
|
||
4. Откроется отдельная консоль Service Worker
|
||
5. Нажмите тестовую кнопку в админке
|
||
6. Следите за логами:
|
||
|
||
```
|
||
[Service Worker] Push-уведомление получено
|
||
[Service Worker] Показываем уведомление: {...}
|
||
```
|
||
|
||
### Шаг 6: Отправьте тестовое уведомление
|
||
|
||
1. **Админ-панель → 🧪 Тест Push-уведомления**
|
||
2. Откройте **консоль браузера (F12)**
|
||
3. Откройте **консоль сервера** (pm2 logs)
|
||
4. Нажмите кнопку
|
||
5. Проверьте логи в обеих консолях
|
||
|
||
**Браузер должен показать:**
|
||
```
|
||
🧪 [FRONTEND] Начинаем тестовую отправку...
|
||
📝 [FRONTEND] Токен найден: Да
|
||
📤 [FRONTEND] Отправляем запрос...
|
||
✅ [FRONTEND] Ответ от сервера: {success: true, ...}
|
||
```
|
||
|
||
**Сервер должен показать:**
|
||
```
|
||
🧪 [TEST PUSH] Запрос от пользователя: {...}
|
||
✅ [TEST PUSH] Push-уведомление успешно отправлено!
|
||
```
|
||
|
||
**Через 1-3 секунды** должно появиться системное уведомление.
|
||
|
||
---
|
||
|
||
## 🎬 Видео-пример того, где появляется уведомление
|
||
|
||
### Chrome на Windows
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 🧪 Тестовое уведомление │
|
||
│ Это тестовое Push-уведомление. │
|
||
│ Если вы его видите — всё работает │
|
||
│ │
|
||
│ [Закрыть] [Открыть сайт] │
|
||
└─────────────────────────────────────┘
|
||
↑
|
||
Появляется в правом нижнем углу
|
||
```
|
||
|
||
### Firefox на Windows
|
||
```
|
||
┌──────────────────────────────┐
|
||
│ 🧪 Тестовое уведомление │
|
||
│ Это тестовое Push-уведомле │
|
||
│ ние. Если вы его видите... │
|
||
│ │
|
||
│ [×] │
|
||
└──────────────────────────────┘
|
||
↑
|
||
Правый нижний угол
|
||
```
|
||
|
||
### Chrome на macOS
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ ospab.host │
|
||
│ 🧪 Тестовое уведомление │
|
||
│ Это тестовое Push-уведомление │
|
||
└─────────────────────────────────┘
|
||
↑
|
||
Правый верхний угол
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 Быстрое решение проблем
|
||
|
||
### "Уведомление не появляется вообще"
|
||
|
||
1. **Проверьте консоль браузера** на ошибки
|
||
2. **Проверьте pm2 logs** на ошибки сервера
|
||
3. **Попробуйте локальное уведомление:**
|
||
```javascript
|
||
new Notification('Тест', {body: 'Тест'});
|
||
```
|
||
4. Если локальное появилось → проблема в Push-подписке
|
||
5. Если локальное не появилось → проблема в разрешениях
|
||
|
||
### "Ошибка 400 - нет активных подписок"
|
||
|
||
1. **Дашборд → Уведомления**
|
||
2. **"Включить уведомления"**
|
||
3. **Разрешить** в браузере
|
||
4. Попробуйте снова
|
||
|
||
### "Ошибка 403 - нет прав администратора"
|
||
|
||
```sql
|
||
UPDATE User SET isAdmin = 1 WHERE id = YOUR_USER_ID;
|
||
```
|
||
|
||
### "Ошибка 500 при отправке Push"
|
||
|
||
```bash
|
||
# Проверьте VAPID ключи
|
||
cd /var/www/ospab-host/backend
|
||
cat .env | grep VAPID
|
||
|
||
# Должны быть заполнены
|
||
VAPID_PUBLIC_KEY=...
|
||
VAPID_PRIVATE_KEY=...
|
||
VAPID_SUBJECT=mailto:support@ospab.host
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Чеклист перед тестированием
|
||
|
||
- [ ] Уведомления разрешены в браузере (🔒 → Уведомления → Разрешить)
|
||
- [ ] Уведомления разрешены в ОС (Windows: Параметры → Уведомления)
|
||
- [ ] Режим "Не беспокоить" отключен
|
||
- [ ] Service Worker зарегистрирован (DevTools → Application → Service Workers)
|
||
- [ ] Push подписка создана (консоль: `navigator.serviceWorker.ready.then(...)`)
|
||
- [ ] Вы являетесь администратором (isAdmin: true в БД)
|
||
- [ ] Backend запущен (pm2 list → ospab-backend → online)
|
||
- [ ] VAPID ключи настроены в .env
|
||
|
||
---
|
||
|
||
## 📞 Если ничего не помогает
|
||
|
||
1. **Очистите всё и начните заново:**
|
||
|
||
```javascript
|
||
// В консоли браузера
|
||
navigator.serviceWorker.getRegistrations().then(regs => {
|
||
regs.forEach(reg => reg.unregister());
|
||
console.log('Service Workers удалены');
|
||
});
|
||
|
||
// Удалите из БД
|
||
// DELETE FROM PushSubscription WHERE userId = YOUR_ID;
|
||
|
||
// Обновите страницу (Ctrl+Shift+R)
|
||
// Включите уведомления заново
|
||
```
|
||
|
||
2. **Попробуйте другой браузер** (Chrome vs Firefox)
|
||
|
||
3. **Попробуйте режим инкогнито** (чтобы исключить расширения)
|
||
|
||
4. **Проверьте файрвол** - может блокировать FCM (Firebase Cloud Messaging)
|
||
|
||
5. **Проверьте антивирус** - может блокировать уведомления
|
||
|
||
---
|
||
|
||
**Итог:** Push-уведомление должно появиться как **системное уведомление** в углу экрана, а **НЕ** на сайте как элемент интерфейса!
|