Firebase Cloud Messaging'i kullanarak Flutter uygulaması için bildirim gönderip alın

1. Giriş

Son Güncelleme : 2022-04-04

Bu codelab, Flutter'ı kullanarak Firebase Cloud Messaging (FCM) ile çok platformlu bir uygulama geliştirme sürecinde size yol gösterir. Uygulamanın uygulamasının bir parçasını yazacak ve ardından onu üç platformda sorunsuz bir şekilde oluşturup çalıştıracaksınız: Android, iOS ve web. Ayrıca FCM'yi Flutter'a nasıl entegre edeceğinizi ve mesaj alıp göndermek için nasıl kod yazacağınızı da öğreneceksiniz. Son olarak codelab, farklı platformlarda farklı davranışlara sahip bir mesaj göndermenize olanak tanıyan FCM HTTP v1 API'nin platforma özel bloklama özelliğini sunar.

Önkoşul

Flutter'ın temel anlayışı.

Ne öğreneceksin

  • Flutter uygulaması nasıl kurulur ve oluşturulur?
  • FCM bağımlılıkları nasıl eklenir?
  • Uygulamanıza tekli FCM mesajları nasıl gönderilir?
  • Uygulamanıza konu FCM mesajları nasıl gönderilir?

İhtiyacınız olan şey

  • Dart ve Flutter eklentileriyle yapılandırılmış Android Studio'nun En Son Kararlı Sürümü.

Codelab'i aşağıdaki cihazlardan herhangi birini kullanarak çalıştırabilirsiniz:

İsteğe bağlı olarak, codelab'i iOS platformunu kullanarak çalıştırmak için bir iOS aygıtına, bir Apple Geliştirici hesabına ve XCode'un yüklü olduğu bir macOS aygıtına ihtiyacınız vardır.

2. Çarpıntı kurulumu

Zaten ayarlanmış bir Flutter geliştirme ortamınız varsa bu bölümü atlayın.

Flutter geliştirme ortamı kurmak için şu adımları izleyin:

  1. İşletim sisteminiz için Flutter'ı indirip yükleyin: Yükle | çarpıntı
  2. Flutter aracının yolunuza eklendiğinden emin olun.
  3. Editörünüzü Flutter için Düzenleyici ayarlama | Flutter Editörünüz için Flutter ve Dart eklentilerini yüklediğinizden emin olun. Codelab'in geri kalanında Android Studio'yu kullanacaksınız.
  4. Komut satırından, kurulumunuzu tarayan ve düzeltilmesi gereken eksik bağımlılıkları listeleyen flutter doctor çalıştırın. Önemli eksik bağımlılıkları düzeltmek için talimatları izleyin. Bazı bağımlılıkların gerekli olmayabileceğini unutmayın. Örneğin, iOS için geliştirme yapmayacaksanız CocoaPod bağımlılığının eksik olması engelleme sorunu yaratmayacaktır.
  5. Flutter uygulamanızı fcmflutter dizininde oluşturmak için bu komutu çalıştırın flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter ve ardından dizinleri fcmflutter olarak değiştirin.
  1. Android Studio'da Dosya -> Aç'a gidin, Flutter uygulamanızın yolunu bulun ve ardından projeyi Android Studio'da açmak için Aç'a tıklayın. Uygulama kodu lib/main.dart dosyasındadır.

Bir Android cihazı seçmek için Android Studio araç çubuğunda Aşağı oku tıklayın. Hedef seçici boşsa sanal Android cihazları veya uygulamayı bir web tarayıcısından veya iOS cihazından başlatmayı tercih ediyorsanız Chrome tarayıcıyı veya iOS simülatörünü yükleyin. Hedef cihazı bulmak için cihazı manuel olarak başlatmanız ve listeyi yenilemeniz gerekebilir.

Oluşturma hedefi menüsü açılır okunun vurgulandığı bir Android Studio araç çubuğu.

Çalıştıra tıkla Android Studio'daki çalıştır düğmesi uygulamayı başlatmak için.

Başlatılan bir Flutter demo uygulamasının kullanıcı arayüzü

Tebrikler! Başarılı bir Flutter uygulaması oluşturdunuz.

3. Firebase ve FlutterFire kurulumu

Flutter'ı kullanarak Firebase Cloud Messaging ile entegre olan bir uygulama geliştirmek için şunlara ihtiyacınız vardır:

  • Bir Firebase projesi.
  • Çalışan bir Firebase CLI.
  • FlutterFire'ın bir kurulumu.
  • flutterfire configure yapılandırılan ve oluşturulan bir uygulama.

Firebase projenizi oluşturun

Zaten bir Firebase projeniz varsa bu adımı atlayabilirsiniz.

  1. Google Hesabınız varsa Firebase'i açın, Google Hesabınızla oturum açın ve ardından Konsola git 'i tıklayın.
  2. Firebase Konsolu'nda Proje ekle'yi tıklayın. Bir proje oluşturmak için talimatları izleyin. Bu projede kullanmayacağınız için Bu proje için Google Analytics'i etkinleştir seçeneğini işaretlemeyin.
  3. Proje oluşturulduktan sonra Projeye Genel Bakış'ın yanındaki dişli simgesine tıklayarak projenin Proje Ayarlarına gidin .

Firebase Konsolunun, proje ayarları menüsü simgesini ve simgeyi vurgulayan kırpılmış ekran görüntüsü

Proje Kimliği, projeyi benzersiz şekilde tanımlamak için kullanılır ve Proje adından farklı olabilir. Proje kimliği daha sonra FlutterFire'ı kurmak için kullanılacaktır.

Firebase Konsolunun proje kimliğini vurgulayan kırpılmış ekran görüntüsü

Tebrikler! Başarıyla bir Firebase projesi oluşturdunuz.

Firebase CLI'yi ayarlama

Firebase CLI'yi kurduysanız bu adımı atlayabilirsiniz.

Firebase CLI'yi indirip yüklemek için Firebase CLI referansına gidin. Aşağıdaki komutu kullanarak Google Hesabınızla Firebase'e giriş yapın:

firebase login

FlutterFire'ı kurun

  1. FlutterFire eklentisini şu komutu kullanarak yükleyin: flutter pub add firebase_core
  2. FCM eklentisini yükleyin: flutter pub add firebase_messaging
  3. FlutterFire CLI'yi kurun: dart pub global activate flutterfire_cli
  4. Firebase projesini Flutter'da yapılandırın: flutterfire configure --project=fcm4flutter. Platformları seçmek için ok tuşlarını ve boşluk tuşunu kullanın veya varsayılan platformları kullanmak için Enter tuşuna basın.

Bu codelab varsayılan platformları (Android, iOS ve web) kullanır, ancak yalnızca bir veya iki platform seçebilirsiniz. iOS paket kimliği istenirse com.flutter.fcm.fcmflutter veya [company domain name].[project name] biçiminde kendi iOS paket kimliğinizi girin. Komut tamamlandıktan sonra Firebase Konsolu sayfasını yenileyin. Firebase projesi kapsamında seçilen platformlar için uygulamalar oluşturduğunu göreceksiniz.

Seçilen platformlar için oluşturulan uygulamaları gösteren Firebase Konsolunun kırpılmış ekran görüntüsü

Bu komut, lib dizini altında, başlatma için gerekli tüm seçenekleri içeren bir firebase_options.dart dosyası oluşturur.

iOS için Cloud Messaging'i kurma

  1. Apple geliştirici sayfasına gidin ve Anahtarlar sekmesinde Anahtar oluştur'u tıklayın.

Anahtar oluşturma için sayfa bileşenlerini vurgulayan Apple geliştirici sayfasının kırpılmış ekran görüntüsü

  1. Anahtarın adını girin ve Apple Anında Bildirim hizmetlerini (APN'ler) kontrol edin. Yeni anahtar adının metin kutusunun vurgulandığı Apple geliştirici sayfasının kırpılmış ekran görüntüsü
  2. .p8 dosya uzantısına sahip anahtar dosyasını indirin. Anahtar indirme düğmesinin vurgulandığı Apple geliştirici sayfasının kırpılmış ekran görüntüsü
  3. Firebase konsolunda projenin Proje Ayarlarına gidin ve Bulut Mesajlaşma sekmesini seçin.

Firebase Konsolu sayfasının, proje ayarlarını güncellemeye yönelik bileşenleri vurgulayan kırpılmış ekran görüntüsü

Firebase Konsolu sayfasının Bulut Mesajlaşma sekmesini vurgulayan kırpılmış ekran görüntüsü

  1. Bulut Mesajlaşma sekmesinde iOS uygulaması için APNs anahtar dosyasını yükleyin. Bulut Mesajlaşma sekmesinden APN anahtar kimliğini ve Apple üyelik merkezinde bulunabilecek ekip kimliğini girin. APN Kimlik Doğrulama Anahtarını yüklemeye yönelik düğmelerin vurgulandığı Firebase Konsol sayfasının kırpılmış ekran görüntüsü

4. FCM hazırlığı

Bir uygulamanın FCM'den mesaj alabilmesi için öncelikle şunları yapması gerekir:

  • FlutterFire'ı başlatın.
  • Bildirim izinleri isteyin.
  • Kayıt jetonunu almak için FCM'ye kaydolun.

Başlatma

Hizmeti başlatmak için ana işlevi ( lib/main.dart ) şu kodla değiştirin:

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

Ardından, Set up FlutterFire adresinde eklenen paketleri yüklemek için Android Studio'da Tools -> Flutter -> Flutter Pub Get komutunu çalıştırın ve kodu Android Studio'da uygun Intellisense ayarıyla görüntüleyin.

Bu, oluşturulan firebase_options.dart dosyasından içe aktarılan geçerli platform DefaultFirebaseOptions.currentPlatform için FlutterFire'ı başlatır. initializeApp eşzamansız bir işlev olduğunu ve await anahtar sözcüğünün, uygulamayı çalıştırmadan önce başlatma işleminin tamamlanmasını sağladığını unutmayın.

İzin iste

Uygulamanın bildirim alabilmek için kullanıcıdan izin istemesi gerekiyor. firebase_messaging tarafından sağlanan requestPermission yöntemi, kullanıcının izne izin vermesini veya reddetmesini isteyen bir iletişim kutusu veya açılır pencere gösterir.

İlk olarak, bu kodu TODO: Request permission altındaki ana işleve kopyalayın. Döndürülen settings kullanıcının izin verip vermediğini size bildirir. Yalnızca kullanıcının erişim gerektiren bir özelliği kullanması gerektiğinde (örneğin, kullanıcı uygulama ayarlarında bildirimleri açtığında) izin istemenizi öneririz. Bu codelab'de basitlik açısından uygulama başlatma izni istiyoruz.

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

Ardından, Android Studio araç çubuğunda hedef seçiciden Chrome (web) seçin ve ardından uygulamayı yeniden çalıştırın.

Hedef seçici ve Çalıştır düğmesinin yer aldığı Android Studio araç çubuğunun kırpılmış ekran görüntüsü

Ardından, izin isteyen bir açılır pencereyle bir Chrome sekmesi açılır. Allow tıklarsanız Android Studio konsolunda bir günlük görürsünüz: Permission granted: AuthorizationStatus.authorized . İzin isteğine izin verdikten veya isteği engelledikten sonra yanıtınız uygulamanızla birlikte tarayıcıda saklanır ve açılır pencere bir daha gösterilmez. Web uygulamasını Android Studio'da tekrar çalıştırdığınızda sizden tekrar izin istenebileceğini unutmayın. Bir Chrome sekmesinin kırpılmış ekran görüntüsü ve açılır pencerede şu soru soruluyor:

Kayıt

Bu kodu, TODO: Register with FCM açıklamasının altındaki ana işleve kopyalayın. getToken çağrısı, uygulama sunucusu veya güvenilir sunucu ortamı tarafından kullanıcılara mesaj göndermek için kullanılabilecek bir kayıt belirtecini döndürür.

// 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 araç çubuğunda bir Android cihazı seçin ve uygulamayı çalıştırın. Android Studio konsolunda kayıt jetonu şu şekilde yazdırılır:

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

Daha sonra mesaj göndermek için kullanacağınız için bunu bir metin düzenleyiciye kopyalayın.

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

Web'de mesaj almak için ek adımlar

Web uygulamalarının kayıt jetonunu almak ve gelen mesajları dinlemek için iki ekstra adıma ihtiyacı vardır. Desteklenen web push hizmetlerine istek gönderme yetkisi vermek için Web'in getToken bir VAPID anahtarı iletmesi gerekir.

Öncelikle Firebase Konsolu'nda Firebase projesinin Bulut Mesajlaşma sekmesini açın, mevcut anahtar çiftini bulmak için Web yapılandırması bölümüne ilerleyin veya yeni bir anahtar çifti oluşturun. Anahtarı vapidKey olarak kullanabilmek amacıyla kopyalamak için vurgulanan düğmeye tıklayın.

Anahtar çiftini vurgulayan Web yapılandırma sayfasının Web Push Sertifikaları bileşeninin kırpılmış ekran görüntüsü

Daha sonra, Kayıt bölümündeki kayıt kodunu bu kodla değiştirin ve ardından vapidKey'i güncelleyin:

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

Ardından projenizin kök dizinindeki web/ dizininin altında bir firebase-messaging-sw.js dosyası oluşturun. Web uygulamasının onMessage olaylarını almasına izin vermek için aşağıdakileri firebase-messaging-sw.js dosyasına kopyalayın. Daha fazla bilgi için Hizmet çalışanında bildirim seçeneklerini ayarlama konusuna bakın.

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

Bundan sonra Proje Ayarları -> Genel sekmesi altında aşağı kaydırın ve Web Uygulamasını bulun, firebaseConfig kod bölümünü kopyalayın ve firebase-messaging-sw.js içine yapıştırın. Firebase yapılandırma sayfasının Web Uygulaması bileşeninin kırpılmış ekran görüntüsü

Son olarak Android Studio araç çubuğunda hedef seçicide Chrome (web) seçin ve uygulamayı çalıştırın. Android Studio konsolunda kayıt jetonu şu şekilde yazdırılır:

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

Daha sonra mesaj göndermek için kullanabilmeniz için kayıt jetonunu bir metin düzenleyiciye kopyalayın.

İOS'ta mesaj almak için ekstra adımlar

FCM'den mesaj almak için iOS cihazlarının Xcode'da Anlık Bildirimleri ve Arka Plan Modlarını etkinleştirmesi gerekir:

  1. Android Studio'da proje adına sağ tıklayın ve ardından Flutter -> Open iOS module in Xcode öğesini seçin. Kırpılmış bir ekran görüntüsü
  2. Xcode başlatıldıktan sonra proje hedefi için İmzalama ve Yetenekler sekmesinde Anında Bildirimler ve Arka Plan Modlarını etkinleştirin. Daha fazla bilgi için Uygulamanızı yapılandırma konusuna bakın.
  3. Android Studio araç çubuğunda hedef seçiciden bir iOS cihazı seçin ve uygulamayı çalıştırın. Bildirim izni verildikten sonra kayıt jetonu Android Studio konsolunda yazdırılır.

Bildirim göndermek için izin isteyen bir iOS uygulamasının kırpılmış ekran görüntüsü

Tebrikler, uygulamanızı FCM'ye başarıyla kaydettiniz. Bir sonraki bölümde açıklandığı gibi mesaj almaya hazırsınız.

5. FCM'den mesaj alın

Mesaj işleyicilerini ayarlama

Uygulamanın, uygulama ön plan modundayken mesajlar geldiğinde onMessage olaylarını ve uygulama arka plandayken onBackgroundMessage olaylarını işlemesi gerekir.

Ön plan mesaj işleyicisi

Öncelikle, TODO: Add stream controller Mesajları olay işleyicisinden kullanıcı arayüzüne iletmek için main.dart dosyasına akış denetleyicisi ekleyin.

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

Rxdart bağımlılığını eklemek için proje dizininden şu komutu çalıştırın: flutter pub add rxdart .

Ardından, rxdart.dart paketini yüklemek ve kodu Android Studio'da uygun Intellisense ayarlarıyla görüntülemek için Android Studio'da Araçlar -> Flutter -> Flutter Pub Get'i çalıştırın.

Ardından, TODO: Set up foreground message handler açıklamasından sonra ön plan iletilerini dinlemek için bir olay işleyicisi ekleyin. Günlükleri yazdırır ve mesajı akış denetleyicisine yayınlar.

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

Bundan sonra, main.dart dosyasındaki orijinal Durum widget'ını, Durum widget'ındaki akış denetleyicisine bir abone ekleyen ve widget'taki son mesajı görüntüleyen bu kodla değiştirin.

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 için arka plan mesajı işleyicisi

Mesajlar, uygulama arka plandayken onBackgroundMessage işleyicisi tarafından işlenir. İşleyici üst düzey bir işlev olmalıdır. Mesajlar işlenerek (bkz . Etkileşimi yönetme ) veya uygulama sunucusuyla senkronize edilerek uygulama ön plana getirildiğinde kullanıcı arayüzü güncellenebilir.

Açıklamadan sonra işleyici işlevini oluşturun TODO: Define the background message handler ve bunu ana işlevde yorumdan sonra çağırın 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());
}

Web için arka plan mesaj işleyicisi

FlutterFire firebase_messaging sürüm 11.2.8'den itibaren, web tabanlı platformlarda arka plan mesajlarının işlenmesi farklı bir akış gerektirir. Bu nedenle, hizmet çalışanı web/firebase-messaging-sw.js dosyasına ayrı bir mesaj işleyicisi eklemeniz gerekir.

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

Uygulama sunucusunu ayarlama

  1. Android Studio'da https://github.com/FirebaseExtulated/firebase_fcm_flutter/tree/main/server projesini açarak başlangıç ​​sunucusu kodunu içe aktarın. Sunucu, FCM mesaj gönderme işlevselliği sağlayan firebase-admin SDK'sına bağımlı olan Gradle tabanlı bir Java projesidir.
  2. Firebase Yönetici SDK'sının FCM API'lerine yapılan çağrıları yetkilendirmesine olanak tanıyan bir Firebase Hizmet Hesabı oluşturun. Firebase konsolunda Proje Ayarlarını açın ve Hizmet hesapları sekmesini seçin. 'Java'yı seçin ve yapılandırma pasajını indirmek için Generate new private key tıklayın. Proje ayarları sayfasının Hizmet hesapları bileşeninin Yönetici SDK'sı yapılandırma pasajını vurgulayan kırpılmış ekran görüntüsü
  3. Dosyayı service-account.json olarak yeniden adlandırın ve sunucu projesinin src/main/resources yoluna kopyalayın.

Test mesajı gönder

FcmSender.java dosyasında sendMessageToFcmRegistrationToken , veri yükü içeren bir bildirim mesajı oluşturur. Kayıt jetonu, mesajın gönderildiği uygulama örneğini hedefler.

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. Kayıt bölümünden kopyalanan Android kayıt belirtecini kopyalayın ve registrationToken değişkeninin değerine yapıştırın.
  2. Çalıştıra tıkla Android Studio'daki çalıştır düğmesi ana işlevi çalıştırmak ve mesajı FCM aracılığıyla kullanıcıya göndermek için. Android Studio'da FcmSender.java ana işlevinin yanında gösterilen Çalıştır simgesinin kırpılmış ekran görüntüsü

Android uygulaması arka plandayken mesaj, bildirim tepsisinde görünür.

Android bildirim tepsisinde görünen bir mesajın kırpılmış ekran görüntüsü

Android uygulaması ön plandayken, Android Studio konsolunda bir günlük göreceksiniz: "Ön plandaki bir mesajın işlenmesi". Kullanıcı arayüzü yeni mesajlar için akış denetleyicisine abone olduğundan mesaj içeriği de kullanıcı arayüzünde görüntülenir.

Android uygulamasında görüntülenen mesaj içeriğinin kırpılmış ekran görüntüsü

Kayıt jetonunu yapıştırıp mesajı uygulama sunucusundan veya diğer güvenilir sunucu ortamından gönderirseniz benzer bir davranış görürsünüz:

  • Web uygulaması arka planda olduğunda (başka bir pencere tarafından gizlendiğinde veya başka bir sekme etkin olduğunda), bir web bildirimi görürsünüz.

Chrome tarayıcısında gösterilen bir web bildiriminin kırpılmış ekran görüntüsü

  • Web uygulaması ön plandayken, web'i sağ tıklayıp Inspect seçerek Chrome Konsolunda günlüğü görüntüleyebilirsiniz. Mesaj içeriği aynı zamanda kullanıcı arayüzünde de görüntülenir. Hata ayıklama günlüklerini içeren Chrome Konsolunun kırpılmış ekran görüntüsü

6. Bir konu mesajı gönderin

FCM HTTP v1 API'nin platform geçersiz kılma özelliği, bir mesaj gönderme isteğinin farklı platformlarda farklı davranışlara sahip olmasını sağlar. Bu özelliğin kullanım örneklerinden biri, platforma bağlı olarak farklı bildirim mesajı içeriği görüntülemektir. Bu özellik en çok, konu mesajlaşmasıyla birden fazla cihazı (birden fazla platforma yayılabilen) hedeflerken kullanılır. Bu bölüm, uygulamanızın her platform için özelleştirilmiş bir konu mesajı almasını sağlama adımlarında size yol gösterir.

İstemciden gelen bir konuya abone olun

Bir konuya abone olmak için Flutter uygulamasının main.dart dosyasındaki ana işlevin sonundaki messaging.subscribeToTopic yöntemini çağırın.

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

[İsteğe bağlı] Web sunucusundan bir konuya abone olun

Web platformunda geliştirme yapmıyorsanız bu bölümü atlayabilirsiniz.

FCM JS SDK şu anda istemci tarafı konu aboneliğini desteklememektedir. Bunun yerine, Yönetici SDK'sının sunucu tarafı konu yönetimi API'sini kullanarak abone olabilirsiniz. Bu kod, Java Admin SDK ile sunucu tarafı konu aboneliğini gösterir.

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

Uygulama sunucusunu açın ve Çalıştır'a tıklayın Android Studio'daki çalıştır düğmesi FcmSubscriptionManager.java dosyasındaki ana işlevi çalıştırmak için:

Android Studio'da FcmSubscriptionManager.java ana işlevinin yanında gösterilen Çalıştır simgesinin kırpılmış ekran görüntüsü

Bir konuya platform geçersiz kılma e-postaları içeren bir mesaj gönderin

Artık konu platformu geçersiz kılma mesajı göndermeye hazırsınız. Aşağıdaki kod parçacığında:

  • Temel mesaj ve " A new app is available " başlığıyla bir gönderme isteği oluşturursunuz.
  • Mesaj, iOS ve web platformlarında " A new app is available " başlıklı bir ekran bildirimi oluşturur.
  • Mesaj, Android cihazlarda " A new Android app is available " başlıklı bir ekran bildirimi oluşturur.
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 dosyasının ana işlevinde sendMessageToFcmTopic(); açıklamasını kaldırın. . Çalıştıra tıkla Android Studio'daki çalıştır düğmesi Konu mesajını göndermek için

7. Özet ve sırada ne var

Özetlemek gerekirse, Flutter ve FCM'yi kullanarak ortam kurulumu, bağımlılık entegrasyonu ve mesaj alma ve göndermeyi içeren çok platformlu uygulama geliştirmeyi öğrenmeyi öğrendiniz. Daha derine inmek için aşağıdaki materyallere bakın:

Codelab'ler

Referanslar