Wysyłanie i odbieranie powiadomień z aplikacji Flutter za pomocą Komunikacji w chmurze Firebase (FCM)

1. Wprowadzenie

Ostatnia aktualizacja: 4.04.2022

Dzięki nim dowiesz się, jak tworzyć wieloplatformowe aplikacje przy użyciu Komunikacji w chmurze Firebase (FCM) przy użyciu Flutter. Napisz jeden element implementacji aplikacji, a potem skompiluj ją i uruchom ją bezproblemowo na 3 platformach: Android, iOS i w przeglądarce. Dowiesz się też, jak zintegrować FCM z platformą Flutter i jak pisać kod do odbierania i wysyłania wiadomości. Na koniec ćwiczenia z programowania przedstawiają funkcję blokowania na poziomie platformy interfejsu FCM HTTP w wersji 1. Umożliwia ona wysłanie jednej wiadomości, która działa inaczej na różnych platformach.

Warunek wstępny

Podstawowa znajomość technologii Flutter.

Czego się nauczysz

• Jak skonfigurować i utworzyć aplikację Flutter.
• Jak dodać zależności FCM.
• Jak wysyłać pojedyncze wiadomości w FCM do swojej aplikacji.
• Jak wysyłać wiadomości dotyczące tematu w FCM do aplikacji.

Czego potrzebujesz

• najnowsza stabilna wersja Android Studio skonfigurowana za pomocą wtyczek Dart i Flutter;

Ćwiczenia z programowania możesz uruchomić na dowolnym z tych urządzeń:

• Fizyczne urządzenie z Androidem podłączone do komputera.
• Emulator Androida (zobacz Uruchamianie aplikacji przy użyciu emulatora Androida).
• wybraną przeglądarkę, na przykład Chrome;

Opcjonalnie jeśli chcesz uruchomić ćwiczenie z programowania na platformie iOS, potrzebujesz urządzenia z iOS, konta Apple Developer i urządzenia z systemem macOS z zainstalowanym XCode.

2. Konfiguracja Flutter

Jeśli masz już skonfigurowane środowisko programistyczne Flutter, pomiń tę sekcję.

Aby skonfigurować środowisko programistyczne Flutter, wykonaj te czynności:

1. Pobierz i zainstaluj Flutter dla swojego systemu operacyjnego: Zainstaluj | Skrzydełko
2. Upewnij się, że do ścieżki dodano narzędzie Flutter.
3. Skonfiguruj edytor pod kątem Flutter, postępując zgodnie z instrukcjami w sekcji Konfigurowanie edytora | Flutter Pamiętaj, aby do edytora zainstalować wtyczki Flutter i Dart. Pozostałą część ćwiczenia z programowania będziesz używać Android Studio.
4. Z poziomu wiersza poleceń uruchom polecenie flutter doctor, które skanuje konfigurację i wyświetla brakujące zależności, które należy poprawić. Postępuj zgodnie z instrukcjami, aby naprawić ważne brakujące zależności. Pamiętaj, że niektóre zależności mogą nie być konieczne. Przykładowo, jeśli nie zamierzasz tworzyć aplikacji na iOS, brak zależności CocoaPods nie będzie problemem blokującym.
5. Uruchom to polecenie, aby utworzyć aplikację Flutter w katalogu fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter, a następnie zmień katalogi na fcmflutter.

Uwaga: polecenie flutter przyjmuje nazwę domeny firmy w odwrotnej kolejności w przypadku opcji --org oraz nazwę projektu w przypadku opcji --project-name. Nazwa domeny firmy i nazwa projektu są łączone jako nazwa pakietu na Androida (identyfikator pakietu w przypadku iOS) i służą do jednoznacznej identyfikacji aplikacji.

6. W Android Studio otwórz Plik -> Otwórz, znajdź ścieżkę aplikacji Flutter i kliknij Open (Otwórz), aby otworzyć projekt w Android Studio. Kod aplikacji znajduje się w pliku lib/main.dart.

Uwaga: aby skonfigurować ścieżkę SDK Flutter w Android Studio, otwórz Preferencje -> Język i Platforma -> Flutter i jako ścieżkę SDK wybierz ścieżkę instalacji Flutter.

Na pasku narzędzi Android Studio kliknij strzałkę w dół, aby wybrać urządzenie z Androidem. Jeśli selektor celu jest pusty, zainstaluj wirtualne urządzenia z Androidem, przeglądarkę Chrome lub symulator iOS, jeśli wolisz uruchamiać aplikację w przeglądarce lub na urządzeniu z iOS. W celu znalezienia urządzenia docelowego konieczne może być ręczne uruchomienie urządzenia i odświeżenie listy.

Kliknij Uruchom , aby uruchomić aplikację.

Gratulacje! Udało Ci się utworzyć aplikację Flutter.

3. Konfiguracja Firebase i FlutterFire

Aby stworzyć aplikację, która integruje się z Komunikacją w chmurze Firebase za pomocą Flutter, potrzebujesz:

• Masz projekt Firebase.
• działającego interfejsu wiersza poleceń Firebase,
• Instalacja FlutterFire.
• Aplikacja skonfigurowana i wygenerowana za pomocą flutterfire configure.

Tworzenie projektu Firebase

Jeśli masz już projekt Firebase, możesz pominąć ten krok.

1. Jeśli masz konto Google, otwórz Firebase i zaloguj się na nie, a potem kliknij Otwórz konsolę.
2. W konsoli Firebase kliknij Dodaj projekt. Aby utworzyć projekt, postępuj zgodnie z instrukcjami. Nie zaznaczaj opcji Włącz Google Analytics dla tego projektu, ponieważ nie będzie ona używana w tym projekcie.
3. Po utworzeniu projektu otwórz jego ustawienia, klikając ikonę koła zębatego obok opcji Przegląd projektu.

Identyfikator projektu służy do jednoznacznej identyfikacji projektu i może się różnić od nazwy projektu. Identyfikator projektu zostanie później użyty do skonfigurowania FlutterFire.

Gratulacje! Udało Ci się utworzyć projekt Firebase.

Konfigurowanie interfejsu wiersza poleceń Firebase

Jeśli masz skonfigurowany interfejs wiersza poleceń Firebase, możesz pominąć ten krok.

Aby pobrać i zainstalować interfejs wiersza poleceń Firebase, zapoznaj się z informacjami o interfejsie wiersza poleceń Firebase. Zaloguj się do Firebase, korzystając ze swojego konta Google, za pomocą następującego polecenia:

firebase login

Konfigurowanie FlutterFire

1. Zainstaluj wtyczkę FlutterFire, używając polecenia: flutter pub add firebase_core
2. Zainstaluj wtyczkę FCM: flutter pub add firebase_messaging
3. Konfigurowanie interfejsu wiersza poleceń FlutterFire: dart pub global activate flutterfire_cli
4. Skonfiguruj projekt Firebase w Flutter: flutterfire configure --project=fcm4flutter. użyj klawiszy strzałek i spację, aby wybrać platformy, lub naciśnij Enter, aby użyć platform domyślnych.

W ramach tego ćwiczenia w Codelabs używane są domyślne platformy (Android, iOS i internet), ale możesz wybrać tylko 1 lub 2 platformy. Jeśli pojawi się prośba o podanie identyfikatora pakietu na iOS, wpisz com.flutter.fcm.fcmflutter lub własny identyfikator pakietu na iOS w formacie [company domain name].[project name]. Po zakończeniu wykonywania polecenia odśwież stronę konsoli Firebase. Zobaczysz, że w projekcie Firebase zostały utworzone aplikacje dla wybranych platform.

To polecenie generuje plik firebase_options.dart w katalogu lib, który zawiera wszystkie opcje wymagane do zainicjowania.

Konfigurowanie Komunikacji w chmurze na urządzeniach z iOS

1. Otwórz stronę deweloperów Apple i na karcie Klucze kliknij Utwórz klucz.

2. Wpisz nazwę klucza i zaznacz Apple Push Notification Services (APN).
3. Pobierz plik klucza z rozszerzeniem .p8.
4. W konsoli Firebase otwórz Ustawienia projektu i wybierz kartę Komunikacja w chmurze.

5. Na karcie Komunikacja w chmurze prześlij plik klucza APNs dla aplikacji na iOS. Wpisz identyfikator klucza APNs z karty Komunikacja w chmurze oraz identyfikator zespołu, który znajdziesz w centrum członkostwa Apple.

4. Przygotowania w FCM

Aby aplikacja mogła otrzymywać wiadomości od FCM, musi:

• Zainicjuj FlutterFire.
• Poproś o zgodę na wyświetlanie powiadomień.
• Zarejestruj się w FCM, aby otrzymać token rejestracji.

Inicjalizacja

Aby zainicjować usługę, zastąp funkcję główną (lib/main.dart) tym kodem:

// 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());
}

Następnie uruchom polecenie Narzędzia -> Flutter -> Flutter Pub Get (Pobierz) w Android Studio, aby wczytać pakiety dodane na stronie Konfigurowanie FlutterFire i wyświetlić kod przy użyciu odpowiedniego ustawienia Intellisense w Android Studio.

Spowoduje to zainicjowanie FlutterFire dla bieżącej platformy DefaultFirebaseOptions.currentPlatform, która zostanie zaimportowana z wygenerowanego pliku firebase_options.dart. Pamiętaj, że initializeApp jest funkcją asynchroniczną, a słowo kluczowe await zapewnia zakończenie inicjalizacji przed uruchomieniem aplikacji.

Uwaga: pełny kod tego ćwiczenia z programowania jest dostępny na https://github.com/FirebaseExtended/firebase_fcm_flutter.

Poproś o uprawnienia

Aplikacja musi poprosić użytkownika o zgodę na otrzymywanie powiadomień. Metoda requestPermission udostępniona przez firebase_messaging wyświetla okno lub wyskakujące okienko z prośbą o przyznanie lub odmowę uprawnień.

Najpierw skopiuj ten kod do głównej funkcji w komentarzu TODO: Request permission. Zwrócona wartość settings informuje, czy użytkownik udzielił uprawnień. Zalecamy, aby prosić o uprawnienia tylko wtedy, gdy użytkownik musi skorzystać z funkcji, która wymaga dostępu (np. gdy użytkownik włączy powiadomienia w ustawieniach aplikacji). Aby ułatwić korzystanie z tych ćwiczeń w programie, prosimy o przyznanie uprawnień podczas uruchamiania aplikacji.

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}');
 }

Następnie na pasku narzędzi Android Studio wybierz Chrome (web) z selektora elementu docelowego i ponownie uruchom aplikację.

Następnie otworzy się karta Chrome z wyskakującym okienkiem z prośbą o pozwolenie. Jeśli klikniesz Allow, zobaczysz dziennik w konsoli Android Studio: Permission granted: AuthorizationStatus.authorized. Gdy zatwierdzisz lub zablokujesz prośbę o uprawnienia, Twoja odpowiedź zostanie zapisana wraz z aplikacją w przeglądarce, a wyskakujące okienko się nie wyświetli. Pamiętaj, że gdy ponownie uruchomisz aplikację internetową w Android Studio, może pojawić się prośba o ponowne przyznanie uprawnień.

Rejestracja

Aby zarejestrować się w FCM, skopiuj ten kod do głównej funkcji pod komentarzem TODO: Register with FCM. Wywołanie getToken zwraca token rejestracji, którego serwer aplikacji lub zaufane środowisko serwera może używać do wysyłania wiadomości do użytkowników.

// 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');
}

Uwaga: powyższy kod służy wyłącznie do celów demonstracyjnych. W normalnych okolicznościach:

• Aplikacja zwykle żąda tokena rejestracji, gdy użytkownik wywoła działanie. Nie wysyłaj żądania tokena podczas uruchamiania aplikacji, ponieważ powoduje to wywołanie blokujące do FCM, a to może zająć trochę czasu.
• Aplikacja wysyła token do serwera aplikacji, który zwykle utrzymuje go w sklepie. Później serwer aplikacji pobiera token ze sklepu i używa go do adresowania wiadomości wysyłanych do użytkownika.

Na pasku narzędzi Android Studio wybierz urządzenie z Androidem i uruchom aplikację. W konsoli Android Studio token rejestracji jest wyświetlany w ten sposób:

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

Skopiuj go do edytora tekstu, ponieważ będzie on później używany do wysyłania wiadomości.

Uwaga: jeśli napotkasz ten błąd, wykonaj instrukcje podane po komunikacie o błędzie i podaj wyższy minSdkVersion (np. 19) w pliku android/app/build.gradle w katalogu projektu.

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

Dodatkowe czynności do odbierania wiadomości w przeglądarce

Aplikacje internetowe wymagają 2 dodatkowych kroków, aby uzyskać token rejestracji i nasłuchiwać wiadomości przychodzących. Sieć musi przekazać klucz VAPID do usługi getToken, aby autoryzować wysyłanie żądań do obsługiwanych usług Web push.

Najpierw otwórz kartę Komunikacja w chmurze projektu Firebase w konsoli Firebase, przewiń w dół do sekcji Konfiguracja internetowa i znajdź istniejącą parę kluczy lub wygeneruj nową. Kliknij wyróżniony przycisk, aby skopiować klucz i użyć go jako vapidKey.

Następnie zastąp kod rejestracji w sekcji Rejestracja tym kodem, a następnie zaktualizuj 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');
 }

Następnie utwórz plik firebase-messaging-sw.js poniżej katalogu web/ w katalogu głównym projektu. Skopiuj poniższy kod do firebase-messaging-sw.js, aby umożliwić aplikacji internetowej odbieranie zdarzeń onMessage. Więcej informacji znajdziesz w artykule Ustawianie opcji powiadomień w mechanizmie Service Worker.

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

Następnie w sekcji Ustawienia projektu -> Ogólne, przewiń w dół i znajdź opcję Aplikacja internetowa, a następnie skopiuj sekcję kodu firebaseConfig i wklej ją w polu firebase-messaging-sw.js.

Na koniec na pasku narzędzi Android Studio wybierz Chrome (web) w selektorze elementów docelowych i uruchom aplikację. W konsoli Android Studio token rejestracji jest wyświetlany w ten sposób:

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

Skopiuj token rejestracji do edytora tekstu, aby móc go później używać do wysyłania wiadomości.

Dodatkowe czynności, które należy wykonać, aby odbierać wiadomości na urządzeniach z iOS

Aby otrzymywać wiadomości z FCM, na urządzeniach z iOS musisz włączyć Powiadomienia push i tryby w tle na Xcode:

1. W Android Studio kliknij prawym przyciskiem myszy nazwę projektu i wybierz Flutter -> Otwórz moduł iOS w Xcode.
2. Po uruchomieniu Xcode włącz Push Notification i Background Modes (Tryby w tle) w sekcji Signing & Karta Capabilities (Możliwości) dotycząca miejsca docelowego projektu. Więcej informacji znajdziesz w artykule Konfigurowanie aplikacji.
3. W selektorze elementów docelowych na pasku narzędzi Android Studio wybierz urządzenie z iOS i uruchom aplikację. Po otrzymaniu zgody na wyświetlanie powiadomień token rejestracji jest drukowany w konsoli Android Studio.

Gratulujemy. Udało Ci się zarejestrować aplikację w FCM. Wiadomości można już odbierać w sposób opisany w następnej sekcji.

5. Otrzymuj wiadomości z FCM

Konfigurowanie modułów obsługi wiadomości

Aplikacja musi obsługiwać zdarzenia onMessage w przypadku wiadomości przychodzących, gdy aplikacja jest w trybie na pierwszym planie, oraz zdarzeń onBackgroundMessage, gdy aplikacja działa w tle.

Moduł obsługi wiadomości na pierwszym planie

Najpierw dodaj kontroler strumienia po komentarzu TODO: Add stream controller w pliku main.dart, aby przekazywać komunikaty z modułu obsługi zdarzeń do interfejsu użytkownika.

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

Aby dodać zależność od rxdart, uruchom to polecenie z katalogu projektu: flutter pub add rxdart.

Następnie uruchom Narzędzia -> Korygowanie -> Flutter Pub Get (Flutter Pub Get) w Android Studio, aby wczytać pakiet rxdart.dart i wyświetlić kod z odpowiednimi ustawieniami Intellisense w Android Studio.

Następnie dodaj moduł obsługi zdarzeń, który będzie nasłuchiwać wiadomości na pierwszym planie po komentarzu TODO: Set up foreground message handler. Wydrukuje logi i publikuje wiadomość na kontrolerze strumienia.

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

Następnie zastąp pierwotny widżet stanu w pliku main.dart tym kodem, co spowoduje dodanie subskrybenta do kontrolera strumienia w widżecie Stan i wyświetlenie ostatniej wiadomości w widżecie.

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),
         ],
       ),
     ),
   );
 }
}

Moduł obsługi wiadomości w tle na urządzeniach z Androidem/iOS

Gdy aplikacja działa w tle, wiadomości są obsługiwane przez moduł obsługi onBackgroundMessage. Moduł obsługi powinien być funkcją najwyższego poziomu. Interfejs można aktualizować, gdy aplikacja zostanie przeniesiona na pierwszy plan przez obsługę komunikatów (patrz Obsługa interakcji) lub synchronizowanie danych z serwerem aplikacji.

Utwórz funkcję obsługi po komentarzu TODO: Define the background message handler poza funkcją główną i wywołaj ją w funkcji głównej po komentarzu 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());
}

Moduł obsługi wiadomości w tle w internecie

Od FlutterFire firebase_messaging w wersji 11.2.8 obsługa wiadomości w tle na platformach internetowych wymaga innego przepływu. Dlatego w skrypcie service worker web/firebase-messaging-sw.js musisz dodać osobny moduł obsługi wiadomości.

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

Konfigurowanie serwera aplikacji

1. Zaimportuj kod serwera startowego, otwierając projekt https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server w Android Studio. Serwer to oparty na Gradle projekt Java i zależny od pakietu SDK firebase-admin, który udostępnia funkcję wysyłania wiadomości przez FCM.
2. Skonfiguruj konto usługi Firebase, które umożliwia pakietowi Firebase Admin SDK autoryzowanie wywołań interfejsów API FCM. Otwórz Ustawienia projektu w konsoli Firebase i wybierz kartę Konta usługi. Wybierz „Java”. i kliknij Generate new private key, aby pobrać fragment kodu konfiguracji.
3. Zmień nazwę pliku na service-account.json i skopiuj go do ścieżki src/main/resources projektu serwera.

Wysyłanie wiadomości testowej

W pliku FcmSender.java funkcja sendMessageToFcmRegistrationToken tworzy powiadomienie z ładunkiem danych. Token rejestracji jest kierowany na instancję aplikacji, do której wysyłana jest wiadomość.

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. Skopiuj token rejestracji Androida skopiowany z sekcji Rejestracja i wklej go w wartości zmiennej registrationToken.
2. Kliknij Uruchom , aby uruchomić funkcję główną i wysłać wiadomość do użytkownika przez FCM.

Gdy aplikacja na Androida działa w tle, wiadomość pojawia się w obszarze powiadomień.

Gdy aplikacja na Androida działa na pierwszym planie, w konsoli Android Studio pojawi się dziennik „Obsługa wiadomości na pierwszym planie”. Treść wiadomości jest również wyświetlana w interfejsie użytkownika, ponieważ interfejs użytkownika subskrybuje kontroler strumienia dla nowych wiadomości.

Jeśli wkleisz token rejestracji i wyślesz wiadomość z serwera aplikacji lub innego zaufanego środowiska serwera, zobaczysz podobne zachowanie:

• Gdy aplikacja internetowa działa w tle (tzn. jest ukryta przez inne okno lub aktywna inna karta), zobaczysz powiadomienie internetowe.

• Gdy aplikacja internetowa działa na pierwszym planie, możesz wyświetlić dziennik w konsoli Chrome, klikając sieć prawym przyciskiem myszy i wybierając Inspect. Treść wiadomości wyświetla się też w interfejsie.

6. Wyślij wiadomość tematu

Funkcja zastępowania interfejsu API FCM HTTP w wersji 1 umożliwia wysyłanie żądań wiadomości inaczej na różnych platformach. Jednym z przykładów zastosowania tej funkcji jest wyświetlanie różnych treści powiadomień w zależności od platformy. Ta funkcja jest najczęściej używana w przypadku kierowania reklam na wiele urządzeń (które mogą obejmować wiele platform) za pomocą komunikatów tematycznych. W tej sekcji znajdziesz instrukcje, jak skonfigurować aplikację, aby otrzymywać wiadomości tematyczne dostosowane do poszczególnych platform.

Subskrybowanie tematu od klienta

Aby zasubskrybować temat, wywołaj metodę messaging.subscribeToTopic na końcu głównej funkcji w pliku main.dart aplikacji Flutter.

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

[Opcjonalnie] Subskrybowanie tematu z serwera w przeglądarce

Jeśli nie tworzysz treści na platformie internetowej, możesz pominąć tę sekcję.

Pakiet FCM JS SDK nie obsługuje obecnie subskrypcji tematów po stronie klienta. Zamiast tego możesz wykupić subskrypcję za pomocą interfejsu API do zarządzania tematami po stronie serwera z pakietu Admin SDK. Ten kod ilustruje subskrypcję tematów po stronie serwera za pomocą pakietu 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());
 }

Otwórz serwer aplikacji i kliknij Uruchom , aby uruchomić funkcję główną w pliku FcmSubscriptionManager.java:

Wyślij wiadomość z zastąpieniami platformydo tematu

Teraz możesz wysłać wiadomość dotyczącą zastąpienia platformy tematów. W tym fragmencie kodu:

• Tworzysz żądanie wysłania z wiadomością podstawową i tytułem „A new app is available”.
• Wiadomość wygeneruje powiadomienie displayowe o nazwie „A new app is available” na iOS i platformach internetowych.
• Wiadomość wygeneruje powiadomienie displayowe o nazwie „A new Android app is available” na urządzeniach z Androidem.

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

W głównej funkcji pliku FcmSender.java usuń komentarz sendMessageToFcmTopic();. Kliknij Uruchom , aby wysłać wiadomość tematu.

7. Podsumowanie i dalsze działania

Podsumowując, wiesz już, jak tworzyć wieloplatformowe aplikacje przy użyciu Flutter i FCM, które obejmują konfigurowanie środowiska, integrację zależności oraz odbieranie i wysyłanie wiadomości. Aby dowiedzieć się więcej, zapoznaj się z tymi materiałami:

Ćwiczenia z programowania

• Więcej informacji o tym, jak Flutter współpracuje z innymi usługami Firebase, w tym jak uwierzytelnianie użytkowników i synchronizacja danych, znajdziesz w artykule Poznaj Firebase dla Flutter.
• Więcej informacji o FCM, w tym o wiadomościach i tematach w aplikacji, znajdziesz w artykułach Korzystanie z FCM i FIAM do wysyłania wiadomości do użytkowników oraz Pierwsza wiadomość push w ramach multiemisji wykorzystująca tematy FCM.

References

• Witryna Firebase
• Witryna Flutter
• Widżety Firebase Flutter we FlutterFire
• Kanał Firebase w YouTube
• Kanał Flutter w YouTube