Создание push-уведомлений для Flutter Web — полное руководство

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Push-уведомления — мощный способ вовлечения пользователей, особенно в веб-приложениях. По мере созревания Flutter Web многие разработчики задаются вопросом:

"Можно ли отправлять push-уведомления в моё приложение Flutter Web?"

Короткий ответ — да — но для этого требуется использовать Firebase Cloud Messaging (FCM), сервисные воркеры и немного JavaScript interop.

В этой статье мы разберём всё, что нужно для интеграции push-уведомлений в ваше веб-приложение Flutter.

🧱 Требования

Прежде чем приступать, убедитесь, что у вас есть:

• Проект Flutter Web (flutter create your_project)
• Настроенный проект Firebase
• Базовое понимание Firebase Console и Flutter Web
• Домен, размещённый с HTTPS (push-уведомления работают только в защищённых контекстах)

🔧 Шаг 1: Добавление Firebase в проект Flutter Web

Используйте Firebase CLI:

firebase login
firebase init

Выберите:

• Hosting
• Firebase SDK для веба

Теперь добавьте зависимости Firebase в pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  firebase_messaging: ^14.0.0

Затем инициализируйте Firebase в вашем main.dart:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

📬 Шаг 2: Включение FCM в Firebase Console

1. Перейдите в Firebase Console
2. Выберите свой проект
3. Перейдите в Cloud Messaging
4. Нажмите Get Started
5. Скопируйте ключ сертификата Web Push в разделе Web configuration — он понадобится в коде

🛠 Шаг 3: Настройка firebase-messaging-sw.js

Flutter Web использует сервисный воркер для прослушивания уведомлений в фоне.

В вашей папке web/ создайте файл с именем firebase-messaging-sw.js:

// web/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js');
firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project-id',
  messagingSenderId: 'your-sender-id',
  appId: 'your-app-id',
});
const messaging = firebase.messaging();

В web/index.html зарегистрируйте сервис-воркера:

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('firebase-messaging-sw.js')
      .then(function(registration) {
        console.log('Service Worker Registered');
      });
  }
</script>

🔐 Шаг 4: Запрос разрешений на уведомления в Dart

Внутри вашего приложения Flutter:

import 'package:firebase_messaging/firebase_messaging.dart';

void setupNotifications() async {
  FirebaseMessaging messaging = FirebaseMessaging.instance;
  // Запрос разрешения
  NotificationPermission permission = await messaging.requestPermission();
  // Получение токена FCM
  String? token = await messaging.getToken(
    vapidKey: 'YOUR_VAPID_KEY_FROM_FIREBASE',
  );
  print("FCM Token: $token");
  // Слушаем сообщения на переднем плане
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('New message: ${message.notification?.title}');
  });
}

Вызывайте этот метод setupNotifications() в инициализации вашего приложения.

📤 Шаг 5: Отправка тестового push-уведомления

Вы можете отправлять push-уведомления из:

• Firebase Console
• Postman с использованием HTTP v1 API
• Backend-сервер

Для отправки через Firebase Console:

1. Перейдите в Cloud Messaging
2. Нажмите Send your first message
3. Введите заголовок и текст
4. В разделе Web push вставьте токен FCM
5. Нажмите Send

Теперь ваше веб-приложение Flutter будет получать уведомления даже при закрытом браузере (если сервис-воркер зарегистрирован правильно).

🧪 Шаг 6: Тестирование и отладка

• Используйте Chrome DevTools > Application > Service Workers для проверки работы вашего сервис-воркера
• Тестируйте уведомления на переднем и заднем плане отдельно
• Проверьте консоль на наличие токена FCM и логов сообщений

💡 Бонус: Отображение пользовательского интерфейса уведомлений

Вы можете вручную обрабатывать отображение уведомлений в файле firebase-messaging-sw.js:

messaging.onBackgroundMessage(function(payload) {
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body,
    icon: '/icons/Icon-192.png',
  });
});

Это обеспечивает единообразие вашего бренда на всех платформах.

✅ Подведение итогов

Flutter Web + Firebase Cloud Messaging дает вам возможность:

• Отправлять уведомления в реальном времени
• Взаимодействовать с пользователями, даже когда ваше приложение не открыто
• Создавать устанавливаемые веб-приложения с поведением, похожим на нативное

Ключевые моменты:

• Flutter web поддерживает push-уведомления через Firebase с использованием service workers
• Требуется домен с HTTPS
• Всегда тестируйте как передний, так и фоновый потоки
• Настраивайте стиль уведомлений с помощью firebase-messaging-sw.js

Push-уведомления — это уже не только для мобильных устройств. Ваше Flutter веб-приложение теперь может так же эффективно достигать пользователей.