Отправляйте и получайте уведомления для приложения 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 для вашей операционной системы: Установка | 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 выберите Файл -> Открыть , найдите путь к вашему приложению Flutter и нажмите Открыть , чтобы открыть проект в Android Studio. Код приложения находится в файле lib/main.dart .

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

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

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

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

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

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

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

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

1. Войдите в консоль Firebase, используя свою учетную запись Google.
2. Нажмите кнопку, чтобы создать новый проект, а затем введите имя проекта (например, fcm4flutter ).
   
3. Нажмите «Продолжить» .
4. При появлении соответствующего запроса ознакомьтесь с условиями Firebase и примите их, а затем нажмите кнопку «Продолжить» .
5. (Необязательно) Включите помощь ИИ в консоли Firebase (так называемая «Gemini в Firebase»).
6. Для этой лабораторной работы вам не понадобится Google Analytics, поэтому отключите опцию Google Analytics.
7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

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

Настройте Firebase CLI

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

Чтобы загрузить и установить 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 CLI: 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 (APNs) .
3. Загрузите файл ключа, имеющий расширение .p8 .
4. В консоли Firebase перейдите в раздел «Настройки проекта» и выберите вкладку «Облачные сообщения» .

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

4. Подготовка FCM

Прежде чем приложение сможет получать сообщения от 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 в 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]

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

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

Сначала откройте вкладку Cloud Messaging проекта 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 .

Затем запустите Tools -> Flutter -> Flutter Pub Get в 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 с зависимостью от SDK firebase-admin , который обеспечивает функциональность отправки сообщений 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, включая настройку среды, интеграцию зависимостей, а также получение и отправку сообщений. Для более подробного изучения ознакомьтесь со следующими материалами:

Codelabs

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

Ссылки

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