🚀 Веб-разработка с нуля: Урок 17 - Добавляем push-уведомления

Привет, разработчики! 👨💻👩💻
Сегодня научим наш To-Do List отправлять push-уведомления через Firebase Cloud Messaging (FCM).

🔥 Что нового:
1. Настройка FCM в Firebase
2. Получение токена устройства
3. Отправка и обработка уведомлений

📲 Как работают push-уведомления:
1. Пользователь разрешает уведомления
2. Браузер получает уникальный токен
3. Сервер отправляет уведомление по токену

💻 Практика: добавляем уведомления

1. Подключаем FCM в проекте Firebase Console
2. Добавляем скрипт в HTML:

<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-messaging-compat.js"></script>

3. Инициализируем Messaging:

const messaging = firebase.messaging();

// Запрашиваем разрешение
function requestNotificationPermission() {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      console.log('Уведомления разрешены');
      getToken();
    }
  });
}

// Получаем токен устройства
function getToken() {
  messaging.getToken({vapidKey: "ВАШ_VAPID_KEY"})
    .then(token => {
      console.log('Токен устройства:', token);
      saveToken(token);
    });
}

// Сохраняем токен в БД
function saveToken(token) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`users/${userId}/fcmToken`).set(token);
}

4. Обрабатываем входящие уведомления:

// Для работающего приложения
messaging.onMessage(payload => {
  console.log('Уведомление:', payload);
  showNotification(payload.notification);
});

// Для закрытого приложения
messaging.setBackgroundMessageHandler(payload => {
  return self.registration.showNotification(
    payload.notification.title,
    payload.notification
  );
});

function showNotification(notification) {
  new Notification(notification.title, {
    body: notification.body,
    icon: '/icon-192.png'
  });
}

🔔 Что мы добавили:
✅ Запрос разрешения на уведомления
✅ Сохранение токена устройства
✅ Обработку входящих сообщений
✅ Красивые браузерные уведомления

💡 Профессиональные советы:
1. Добавьте кнопку для управления уведомлениями:

<button id="notifyBtn">Включить уведомления</button>

document.getElementById('notifyBtn').addEventListener('click', requestNotificationPermission);

2. Отправляйте тестовое уведомление через Firebase Console

3. Используйте кастомные иконки:

{
  notification: {
    title: "Новая задача",
    body: "Не забудьте выполнить!",
    icon: "/icon-192.png",
    click_action: "https://вашсайт.com/tasks"
  }
}

👉 В следующем уроке:
Настроим автоматические напоминания о задачах!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Как вам работа с push-уведомлениями? Пишите в комментариях! 💬

#вебразработка #Firebase #PushУведомления #FCM #javascript