【Flutter基礎概念與實作】 Day28–使用FCM發送通知給使用者

第 11 屆 iThome 鐵人賽

DAY 28

Mobile Development

Flutter---Google推出的跨平台框架，Android、iOS一起搞定系列第 28 篇

11th鐵人賽 flutter 跨平台

bju0ulhi0511

2019-10-12 18:29:13

15934 瀏覽

今天是實作FlutTube的最後一天，程式碼也很少，大概30行左右，但這功能我覺得很酷，那就是`Cloud Messaging`，實作後你可以傳訊息到任何一台裝有FlutTube App的手機上，甚至可以依照不同使用者的類別傳遞不同的內容。

如果你對這個功能也有興趣，那就看下去吧。

Firebase Cloud Messaging

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages at no cost.

在Flutter要設定FCM非常的簡單，老樣子先引入package。

Messaging

在firebase資料夾下新增「messaging.dart」。
程式碼如下：

import 'package:firebase_messaging/firebase_messaging.dart';

FirebaseMessaging configureMessaging() {
  FirebaseMessaging firebaseMessaging = FirebaseMessaging();

  // only fire on iOS
  firebaseMessaging.requestNotificationPermissions(
      const IosNotificationSettings(sound: true, badge: true, alert: true));
  firebaseMessaging.onIosSettingsRegistered
      .listen((IosNotificationSettings settings) {
    print("Settings registered: ${settings}");
  });

  firebaseMessaging.configure(
  onMessage: (Map<String, dynamic> message) async {
    print('on Message: ${message}');
  }, onLaunch: (Map<String, dynamic> message) async {
    print('on Launch:');
  }, onResume: (Map<String, dynamic> message) async {
    print('on Resume:');
  });
  return firebaseMessaging;
}

前半部有兩行是iOS手機才會觸發到的，若沒加iOS手機就無法接收到訊息。
後半部在設定app在3種情況下(Message、Launch、Resume)收到訊息時，分別要做出什麼回應。

onMessage：當App正在執行中且手機畫面就是目前的App時觸發
onLaunch：當App完全被關閉(也不在背景執行)時觸發
onResume：當App正在背景執行時觸發

main

開啟main.dart，增加兩行程式碼，呼叫剛剛寫好的configureMessaging函式，並接收回傳的FirebaseMessaging物件實體。

final UserRepository _userRepository = UserRepository();
AuthenticationBloc _authenticationBloc;
FirebaseMessaging _firebaseMessaging;
@override
void initState() {
　　_authenticationBloc = AuthenticationBloc(userRepository: _userRepository);
    _firebaseMessaging = configureMessaging();
    super.initState();
}

Android Mainfest.xml

如果想要在收到通知後讓正在背景執行的App執行某些行為(例如跳轉到特定頁面)，為了能夠正確的收到Intent，這裡要設定intent-filter，

開啟「android/app/src/main/AndroidManifest.xml」
貼上以下程式碼。

<intent-filter>
            <action android:name="FLUTTER_NOTIFICATION_CLICK" />
            <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

之後只要在自訂資料中加上
key: click_action, value： FLUTTER_NOTIFICATION_CLICK以及你想要跳轉的頁面，就可以執行相關的程式碼了。

相關資訊可以參考StackOverflow的回答。

iOS

由於我沒有mac可以測試，iOS的設定請參考官方教學。

測試

以上設定弄好後，就可以到Firebase上傳送訊息測試看看。

可以設定訊息的標題和內容，另外也可顯示圖片，可以直接在右邊看到使用者接收到的效果是如何。

第二步驟你可以依照需求篩選會收到訊息的使用者族群。

第三第四步驟就跳過了。
第五步驟你可以輸入需要的參數值，採用key-value的方式存取。

確定沒問題後，就可以按下「審查」－＞「發布」，手機就會收到訊息囉。

記錄使用者FCM Token

我們還可以記錄使用者的Token，之後如果想要傳送訊息給單一使用者(例如通知他交易成功、帳號有問題等等)，就能夠透過指定token的方式傳送訊息給他。

為了方便就直接把FCM Token紀錄在Firestore的User文件下吧。

Firestore Database

開啟firebase資料夾下的「firestore_database.dart」。
新增以下程式碼：

void updateProfilePictureUrl(String email, String url) async {
  print(url);
  await Firestore.instance.collection("Users").document(email).setData({
    'profile_picture_url': url,
  }, merge: true);
}

void updateUserToken(String email, String token) async {
  await Firestore.instance.collection("Users").document(email).setData({
    'fcm_token': token,
  }, merge: true);
}

在updateProfilePictureUrl的setData，設定merge參數為true，如此一來如果資料庫中已經有同個email的文件的話，就會採用更新資料的方式，而不會把原本的蓋掉。
如果原本資料庫沒有找到這個email的文件就會新增一筆。

updateUserToken和上面一樣，只是是用來把token存到以使用者信箱作為識別值的文件中。

main

最後回到main.dart，由於上傳到資料庫需要email做為識別值，而email只有在Authenticated的State才能取得，所以要在狀態轉變成Authenticated時，先把取得的email和token上傳到資料庫，之後才跳轉到HomePage。

if (state is Authenticated) {
        _firebaseMessaging
            .getToken()
            .then((token) => updateUserToken(state.userName, token));
    	return HomePage(
            email: state.userName,
        );
}