Отправляйте и получайте уведомления для приложения Flutter с помощью Firebase Cloud Messaging.

1. Введение

Последнее обновление : 04.04.2022 г.

Эта лаборатория кода проведет вас через процесс разработки многоплатформенного приложения с Firebase Cloud Messaging (FCM) с использованием Flutter. Вы напишете одну часть реализации приложения, а затем создадите и запустите его на трех платформах: Android, iOS и в Интернете. Вы также узнаете, как интегрировать FCM во Flutter и как писать код для получения и отправки сообщений. Наконец, в кодовой лаборатории представлена ​​функция блоков API FCM HTTP v1, специфичная для платформы, которая позволяет отправлять одно сообщение, которое имеет различное поведение на разных платформах.

Предварительное условие

Базовое понимание Flutter.

Что вы узнаете

• Как настроить и создать приложение Flutter.
• Как добавить зависимости FCM.
• Как отправлять отдельные сообщения FCM в ваше приложение.
• Как отправлять тематические сообщения FCM в ваше приложение.

Что вам понадобится

• Последняя стабильная версия Android Studio , настроенная с использованием плагинов Dart и Flutter.

Вы можете запустить кодовую лабораторию, используя любое из следующих устройств:

• Физическое устройство Android, подключенное к вашему компьютеру.
• Эмулятор Android (см. Запуск приложений на эмуляторе Android ).
• Браузер по вашему выбору, например Chrome.

При желании для запуска лаборатории кода с использованием платформы iOS вам потребуется устройство iOS, учетная запись разработчика Apple и устройство macOS с установленным XCode.

2. Настройка флаттера

Если у вас уже настроена среда разработки Flutter, пропустите этот раздел.

Чтобы настроить среду разработки Flutter, выполните следующие действия:

1. Загрузите и установите Flutter для вашей операционной системы: Установить | трепетать
2. Убедитесь, что инструмент Flutter добавлен на ваш путь.
3. Настройте свой редактор для Flutter, как показано в разделе «Настройка редактора | Flutter Обязательно установите плагины Flutter и Dart для вашего редактора. Для остальной части работы с кодом вы будете использовать Android Studio.
4. Из командной строки запустите flutter doctor , который просканирует вашу установку и выведет список всех недостающих зависимостей, которые необходимо исправить. Следуйте инструкциям, чтобы исправить все важные недостающие зависимости. Обратите внимание, что некоторые зависимости могут быть необязательными. Например, если вы не собираетесь разрабатывать для iOS, отсутствие зависимости CocoaPods не будет проблемой блокировки.
5. Запустите эту команду, чтобы создать приложение Flutter в каталоге fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter , а затем измените каталоги на fcmflutter .

6. В Android Studio перейдите в File -> Open , найдите путь к вашему приложению Flutter и нажмите «Открыть» , чтобы открыть проект в Android Studio. Код приложения находится в файле lib/main.dart .

На панели инструментов Android Studio нажмите стрелку вниз, чтобы выбрать устройство Android. Если целевой селектор пуст, установите виртуальные устройства Android или браузер Chrome или симулятор iOS, если вы предпочитаете запускать приложение из веб-браузера или устройства iOS. Возможно, вам придется запустить устройство вручную и обновить список, чтобы найти целевое устройство.

Нажмите «Выполнить» . чтобы запустить приложение.

Поздравляем! Вы успешно создали приложение Flutter.

3. Настройка Firebase и FlutterFire

Чтобы разработать приложение, которое интегрируется с Firebase Cloud Messaging с помощью Flutter, вам необходимо:

• Проект Firebase.
• Рабочий интерфейс командной строки Firebase.
• Установка FlutterFire.
• Приложение, настроенное и созданное с помощью flutterfire configure .

Создайте свой проект Firebase

Если у вас уже есть проект Firebase, вы можете пропустить этот шаг.

1. Если у вас есть учетная запись Google, откройте Firebase и войдите в свою учетную запись Google, а затем нажмите « Перейти на консоль» .
2. В консоли Firebase нажмите «Добавить проект» . Следуйте инструкциям, чтобы создать проект. Не устанавливайте флажок «Включить Google Analytics для этого проекта», поскольку вы не будете использовать его в этом проекте.
3. После создания проекта перейдите к настройкам проекта, щелкнув значок шестеренки рядом с пунктом «Обзор проекта» .

Идентификатор проекта используется для уникальной идентификации проекта и может отличаться от названия проекта . Идентификатор проекта будет использоваться для настройки FlutterFire позже.

Поздравляем! Вы успешно создали проект Firebase.

Настройте интерфейс командной строки Firebase

Если у вас настроен интерфейс командной строки Firebase, вы можете пропустить этот шаг.

Перейдите к справочнику по Firebase CLI, чтобы загрузить и установить Firebase CLI. Войдите в Firebase под своей учетной записью Google с помощью следующей команды:

firebase login

Настройте FlutterFire

1. Установите плагин FlutterFire с помощью команды: flutter pub add firebase_core
2. Установите плагин FCM: flutter pub add firebase_messaging
3. Настройте интерфейс командной строки FlutterFire: dart pub global activate flutterfire_cli
4. Настройте проект Firebase на Flutter: flutterfire configure --project=fcm4flutter. Используйте клавиши со стрелками и пробел, чтобы выбрать платформы, или нажмите Enter, чтобы использовать платформы по умолчанию.

В этой лаборатории кода используются платформы по умолчанию (Android, iOS и Интернет), но вы можете выбрать только одну или две платформы. Если будет предложено ввести идентификатор пакета iOS, введите com.flutter.fcm.fcmflutter или свой собственный идентификатор пакета iOS в формате [company domain name].[project name] . После завершения команды обновите страницу консоли Firebase. Вы увидите, что в рамках проекта Firebase созданы приложения для выбранных платформ.

Эта команда создает файл firebase_options.dart в каталоге lib , который содержит все параметры, необходимые для инициализации.

Настройте облачный обмен сообщениями для iOS

1. Перейдите на страницу разработчика Apple и нажмите «Создать ключ» на вкладке «Ключи» .

2. Введите имя ключа и проверьте службы Apple Push Notifications (APN) .
3. Загрузите файл ключа с расширением .p8 .
4. В консоли Firebase перейдите к настройкам проекта и выберите вкладку Cloud Messaging .

5. Загрузите файл ключа APNs для приложения iOS на вкладке Cloud Messaging . Введите идентификатор ключа APN на вкладке «Облачные сообщения» и идентификатор группы, который можно найти в центре участия Apple.

4. Подготовка ТСМ

Прежде чем приложение сможет получать сообщения от FCM, ему необходимо:

• Инициализируйте FlutterFire.
• Запросить разрешения на уведомления.
• Зарегистрируйтесь в FCM, чтобы получить регистрационный токен.

Инициализация

Чтобы инициализировать службу, замените основную функцию ( lib/main.dart ) на этот код:

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 

flutterfire configure

import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

Затем запустите Tools -> Flutter -> Flutter Pub Get in Android Studio, чтобы загрузить пакеты, добавленные в разделе «Настройка FlutterFire» , и отобразите код с соответствующей настройкой Intellisense в Android Studio.

Это инициализирует FlutterFire для текущей платформы DefaultFirebaseOptions.currentPlatform , которая импортируется из сгенерированного файла firebase_options.dart . Обратите внимание, что initializeApp — асинхронная функция, и ключевое слово await гарантирует завершение инициализации перед запуском приложения.

Запросить разрешение

Приложению необходимо запросить разрешение пользователя на получение уведомлений. Метод requestPermission , предоставляемый firebase_messaging , показывает диалоговое окно или всплывающее окно, предлагающее пользователю разрешить или запретить разрешение.

Сначала скопируйте этот код в основную функцию под комментарием TODO: Request permission . Возвращенные settings сообщают вам, предоставил ли пользователь разрешение. Мы рекомендуем запрашивать разрешение только в том случае, если пользователю необходимо использовать функцию, требующую доступа (например, когда пользователь включает уведомления в настройках приложения). В этой кодовой лаборатории для простоты мы запрашиваем разрешение на запуск приложения.

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

Затем на панели инструментов Android Studio выберите Chrome (web) в целевом селекторе, а затем снова запустите приложение.

Затем откроется вкладка Chrome со всплывающим окном с запросом разрешения. Если вы нажмете Allow , вы увидите журнал в консоли Android Studio: Permission granted: AuthorizationStatus.authorized . После того как вы разрешите или заблокируете запрос на разрешение, ваш ответ сохраняется вместе с вашим приложением в браузере, и всплывающее окно больше не отображается. Обратите внимание: когда вы снова запустите веб-приложение в Android Studio, вам может быть снова предложено предоставить разрешение.

Регистрация

Скопируйте этот код в основную функцию под комментарием TODO: Register with FCM чтобы зарегистрироваться в FCM. Вызов getToken возвращает регистрационный токен, который может использоваться сервером приложений или средой доверенного сервера для отправки сообщений пользователям.

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

На панели инструментов Android Studio выберите устройство Android и запустите приложение. В консоли Android Studio токен регистрации распечатывается следующим образом:

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

Скопируйте его в текстовый редактор, так как в дальнейшем вы будете использовать его для отправки сообщений.

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

Дополнительные шаги для получения сообщений в Интернете

Веб-приложениям требуется два дополнительных шага, чтобы получить токен регистрации и прослушивать входящие сообщения. Web необходимо передать ключ VAPID в getToken , чтобы разрешить запросы на отправку поддерживаемым службам веб-push.

Сначала откройте вкладку «Облачные сообщения» проекта Firebase в консоли Firebase, прокрутите вниз до раздела веб-конфигурации , чтобы найти существующую пару ключей, или сгенерируйте новую пару ключей. Нажмите выделенную кнопку, чтобы скопировать ключ и использовать его в качестве vapidKey.

Далее замените регистрационный код в разделе «Регистрация» на этот код, а затем обновите vapidKey:

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

Затем создайте файл firebase-messaging-sw.js в каталоге web/ в корне вашего проекта. Скопируйте следующее в firebase-messaging-sw.js чтобы веб-приложение могло получать события onMessage . Дополнительные сведения см. в разделе Настройка параметров уведомлений в сервисном работнике .

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");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

После этого в разделе «Настройки проекта» -> вкладка «Общие» прокрутите вниз и найдите веб-приложение , скопируйте раздел кода firebaseConfig и вставьте его в firebase-messaging-sw.js .

Наконец, на панели инструментов Android Studio выберите Chrome (web) в целевом селекторе и запустите приложение. В консоли Android Studio токен регистрации распечатывается следующим образом:

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

Скопируйте токен регистрации в текстовый редактор, чтобы позже использовать его для отправки сообщений.

Дополнительные шаги для получения сообщений на iOS

Чтобы получать сообщения от FCM, устройствам iOS необходимо включить push-уведомления и фоновые режимы в Xcode:

1. В Android Studio щелкните правой кнопкой мыши имя проекта и выберите Flutter -> Открыть модуль iOS в Xcode .
2. После запуска Xcode включите push-уведомления и фоновые режимы на вкладке «Подписание и возможности» для целевого проекта. Дополнительные сведения см. в разделе Настройка приложения .
3. На панели инструментов Android Studio выберите устройство iOS в целевом селекторе и запустите приложение. После предоставления разрешения на уведомление регистрационный токен печатается в консоли Android Studio.

Поздравляем, вы успешно зарегистрировали свое приложение в FCM. Вы готовы получать сообщения, как описано в следующем разделе.

5. Получать сообщения от FCM

Настройка обработчиков сообщений

Приложению необходимо обрабатывать события onMessage , когда сообщения приходят, когда приложение находится в приоритетном режиме, и события onBackgroundMessage , когда приложение находится в фоновом режиме.

Обработчик сообщений переднего плана

Сначала добавьте контроллер потока после комментария TODO: Add stream controller в файл main.dart , чтобы передавать сообщения от обработчика событий в пользовательский интерфейс.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

Чтобы добавить зависимость rxdart, запустите эту команду из каталога проекта: flutter pub add rxdart .

Затем запустите Инструменты -> Flutter -> Flutter Pub. Зайдите в Android Studio, чтобы загрузить пакет rxdart.dart и отобразить код с соответствующими настройками Intellisense в Android Studio.

Затем добавьте обработчик событий для прослушивания сообщений переднего плана после комментария TODO: Set up foreground message handler . Он печатает журналы и публикует сообщение в контроллере потока.

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

После этого замените исходный виджет State в файле main.dart этим кодом, который добавляет подписчика к контроллеру потока в виджете State и отображает последнее сообщение на виджете.

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

Обработчик фоновых сообщений для Android/iOS

Сообщения обрабатываются обработчиком onBackgroundMessage , пока приложение находится в фоновом режиме. Обработчик должен быть функцией верхнего уровня. Пользовательский интерфейс можно обновить, когда приложение выводится на передний план, путем обработки сообщений (см. Обработка взаимодействия ) или синхронизации с сервером приложений.

Создайте функцию-обработчик после комментария TODO: Define the background message handler вне основной функции и вызовите его в основной функции после комментария TODO: Set up background message handler .

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

Обработчик фоновых сообщений для Интернета

Начиная с FlutterFire firebase_messaging версии 11.2.8, обработка фоновых сообщений на веб-платформах требует другого потока. Поэтому вам необходимо добавить отдельный обработчик сообщений в сервис-воркере web/firebase-messaging-sw.js .

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

Настройте сервер приложений

1. Импортируйте код стартового сервера, открыв проект https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server в Android Studio. Сервер представляет собой проект Java на основе Gradle с зависимостью от Firebase-admin SDK, который обеспечивает функцию отправки сообщений FCM.
2. Настройте учетную запись службы Firebase, которая позволит Firebase Admin SDK авторизовать вызовы API FCM. Откройте настройки проекта в консоли Firebase и выберите вкладку «Учетные записи служб» . Выберите «Java» и нажмите « Generate new private key , чтобы загрузить фрагмент конфигурации.
3. Переименуйте файл в service-account.json и скопируйте его в путь src/main/resources серверного проекта.

Отправить тестовое сообщение

В файле FcmSender.java sendMessageToFcmRegistrationToken составляет сообщение уведомления с полезными данными. Токен регистрации предназначен для экземпляра приложения, которому отправляется сообщение.

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }

1. Скопируйте токен регистрации Android, скопированный из раздела «Регистрация», и вставьте его в значение переменной registrationToken .
2. Нажмите «Выполнить» . для запуска основной функции и отправки сообщения пользователю через FCM.

Когда приложение Android работает в фоновом режиме, сообщение появляется в области уведомлений.

Когда приложение Android находится на переднем плане, вы увидите журнал в консоли Android Studio: «Обработка сообщения на переднем плане». Содержимое сообщения также отображается в пользовательском интерфейсе, поскольку пользовательский интерфейс подписан на контроллер потока для новых сообщений.

Если вы вставите токен регистрации и отправите сообщение с сервера приложений или другой среды доверенного сервера, вы увидите аналогичное поведение:

• Когда веб-приложение находится в фоновом режиме (т. е. когда оно скрыто другим окном или активна другая вкладка), вы увидите веб-уведомление.

• Когда веб-приложение находится на переднем плане, вы можете просмотреть журнал в консоли Chrome, щелкнув правой кнопкой мыши веб-приложение и выбрав Inspect . Содержимое сообщения также отображается в пользовательском интерфейсе.

6. Отправьте тематическое сообщение

Функция переопределения платформы API-интерфейса FCM HTTP v1 позволяет запросу на отправку сообщения вести себя по-разному на разных платформах. Одним из вариантов использования этой функции является отображение различного содержимого уведомлений в зависимости от платформы. Эта функция наиболее полно используется при таргетинге на несколько устройств (которые могут охватывать несколько платформ) при обмене тематическими сообщениями. В этом разделе описаны действия, которые помогут вашему приложению получать тематические сообщения, настроенные для каждой платформы.

Подписаться на тему от клиента

Чтобы подписаться на тему, вызовите метод messaging.subscribeToTopic в конце основной функции в файле main.dart приложения Flutter.

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[Необязательно] Подписаться на тему с сервера в Интернете.

Вы можете пропустить этот раздел, если вы не занимаетесь разработкой на веб-платформе.

FCM JS SDK в настоящее время не поддерживает подписку на темы на стороне клиента. Вместо этого вы можете подписаться, используя серверный API управления темами Admin SDK. Этот код иллюстрирует подписку на темы на стороне сервера с помощью Java Admin SDK.

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

Откройте сервер приложений и нажмите «Выполнить». для запуска основной функции в файле FcmSubscriptionManager.java :

Отправить сообщение с переопределением платформы в тему

Теперь вы готовы отправить сообщение о переопределении тематической платформы. В следующем фрагменте кода:

• Вы создаете запрос на отправку с базовым сообщением и заголовком « A new app is available ».
• Сообщение генерирует уведомление с заголовком « A new app is available » на iOS и веб-платформах.
• Сообщение генерирует уведомление с заголовком « A new Android app is available » на устройствах Android.

private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

В основной функции файла FcmSender.java раскомментируйте sendMessageToFcmTopic(); . Нажмите «Выполнить» . чтобы отправить сообщение темы.

7. Итоги и что дальше

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

Кодлабы

• Чтобы узнать больше о том, как Flutter работает с другими продуктами Firebase, включая аутентификацию пользователей и синхронизацию данных, см. раздел Знакомство с Firebase для Flutter .
• Чтобы узнать больше о FCM, включая обмен сообщениями и темы в приложении: используйте FCM и FIAM для отправки сообщений пользователям и свое первое многоадресное push-сообщение с использованием тем FCM.

Ссылки

• Сайт Firebase
• Флаттер-сайт
• Виджеты FlutterFire Firebase Flutter
• Канал Firebase на YouTube
• Канал Флаттера на YouTube