ospab.host/ospabhost/TROUBLESHOOTING_PUSH.md

Где должно появиться 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)

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"

Если нет:

// В консоли браузера
navigator.serviceWorker.getRegistrations().then(regs => {
  console.log('Registered Service Workers:', regs.length);
  regs.forEach(reg => console.log(reg));
});

Решение:

1. Перейдите в Дашборд → Уведомления
2. Нажмите "Включить уведомления" снова
3. Проверьте консоль на ошибки регистрации

---

5. Push подписка не создана

Проверка в консоли браузера:

navigator.serviceWorker.ready.then(reg => {
  reg.pushManager.getSubscription().then(sub => {
    if (sub) {
      console.log('✅ Push подписка существует:', sub.endpoint);
    } else {
      console.log('❌ Push подписка отсутствует');
    }
  });
});

Решение: Включите уведомления заново на странице "Уведомления".

---

6. Ошибка на сервере при отправке

Проверка логов backend:

pm2 logs ospab-backend --lines 100 | grep "TEST PUSH"

Должны увидеть:

✅ [TEST PUSH] Push-уведомление успешно отправлено!

Если ошибка:

❌ [TEST PUSH] Ошибка при отправке Push: ...

Возможные причины:

• Неправильные VAPID ключи
• Устаревшая подписка (410 Gone)
• Проблемы с сетью

---

🧪 Пошаговая диагностика

Шаг 1: Проверьте разрешения браузера

// В консоли браузера
console.log('Notification permission:', Notification.permission);
// Должно быть: "granted"

if (Notification.permission !== 'granted') {
  console.log('❌ Уведомления не разрешены!');
  console.log('Перейдите в Дашборд → Уведомления → Включить уведомления');
}

Шаг 2: Проверьте Service Worker

// В консоли браузера
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 подписку

// В консоли браузера
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: Тестовое уведомление вручную

// В консоли браузера (для быстрой проверки)
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. Попробуйте локальное уведомление:

   new Notification('Тест', {body: 'Тест'});
   

4. Если локальное появилось → проблема в Push-подписке
5. Если локальное не появилось → проблема в разрешениях

"Ошибка 400 - нет активных подписок"

1. Дашборд → Уведомления
2. "Включить уведомления"
3. Разрешить в браузере
4. Попробуйте снова

"Ошибка 403 - нет прав администратора"

UPDATE User SET isAdmin = 1 WHERE id = YOUR_USER_ID;

"Ошибка 500 при отправке Push"

# Проверьте 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. Очистите всё и начните заново:

// В консоли браузера
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-уведомление должно появиться как системное уведомление в углу экрана, а НЕ на сайте как элемент интерфейса!