Flutterでpush通知を実装したのですが、
モバイルアプリやFirebaseの経験がない状態だと、
関連情報が多すぎて全体像が掴みにくい印象を持ったので、開発の流れのメモです。
ステップ1. FirebaseプロジェクトにAndroidアプリを追加する
こちらのサイトが分かりやすかったです。
週間Flutter大学：https://blog.flutteruniv.com/flutter-firebase/#toc9
リンク先の"2-7 Firebase の初期化と設定"まで進みます。
ステップ2. FlutterにFirebaseプラグインをインストール&設定する
FirebaseプラグインをFlutterにインストールします。
これは公式の通り。
AndroidManifest.xmlのどこに書くかが分かりにくいです。chatGPTに聞くといいです。
Firebase公式：https://firebase.google.com/docs/cloud-messaging/flutter/client?hl=ja#install_the_fcm_plugin
ステップ3. FirebaseからFlutterに通知をテストしてみる
まず、Flutter側で端末のIDを取得します。この値はテスト送信時に使います。
final fcmToken = await FirebaseMessaging.instance.getToken();
print(fcmToken);
テスト送信の方法は以下のリンクを参考にしました。
Qiita: https://qiita.com/yana1316/items/9bd3806efc9cbdddcba9#firebase-cloud-messaging%E3%81%8B%E3%82%89%E3%81%AE%E9%80%81%E4%BF%A1%E3%83%86%E3%82%B9%E3%83%88
アプリをバックグラウンドにして、テストしてみるとバナーが出ると思います！
アプリがフォアグラウンドにある時に通知を送ると、バナーは出ません。
ので、フォアグラウンドの状態の場合は通知が来たらローカル通知を使ってバナーを出します。
https://firebase.google.com/docs/cloud-messaging/flutter/receive?hl=ja#foreground_messages
flutter_local_notificationsの使い方は...chatGPTに聞きました。
↓サンプルコード
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
FlutterLocalNotificationsPlugin();
void showNotification(RemoteMessage message) {
const AndroidNotificationDetails androidPlatformChannelSpecifics =
AndroidNotificationDetails(
'your_channel_id', // チャンネルID
'your_channel_name', // チャンネル名
'your_channel_description', // チャンネルの説明
importance: Importance.max,
priority: Priority.high,
showWhen: false,
icon: "アイコン名",
);
const NotificationDetails platformChannelSpecifics =
NotificationDetails(android: androidPlatformChannelSpecifics);
flutterLocalNotificationsPlugin.show(
0, // 通知ID
message.notification!.title, // 通知のタイトル
message.notification!.body, // 通知の本文
platformChannelSpecifics,
);
}
このshowNotification関数を通知が来たら実行するように設定します。
// アプリが起動してる場合にメッセージが来た場合の処理
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
print("message has come");
showNotification(message);
});
これでアプリがフォアグラウンドにあっても通知が来ました！
ステップ4. バックエンドから通知を指示する
本番ではFirebaseから手作業で送るわけには行きませんので
バックエンドから送る必要があります。
こちらの記事を参考にさせていただきました。
Qiita:https://qiita.com/nishi-sankosc/items/b9040ee57e6b7223ff21
参考：URLにプロジェクト名を入れるところだけ間違いやすいので注意です。
https://15dog.hatenablog.com/entry/2018/10/24/FCM%28Firebase_Cloud_Messaging%29_%E3%81%AE%E6%96%B0API%E3%81%AB%E7%A7%BB%E8%A1%8C%E3%81%97%E3%81%9F#:~:text=%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%20%C2%A0%7C%C2%A0%20Firebase-,%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%20%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E6%9B%B4%E6%96%B0,-%E5%85%A8%E7%84%B6%E3%83%8F%E3%83%9E%E3%82%8B%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88
これで、バックエンドからFirebaseを介してFlutterアプリに通知を送る、と言う流れが完成しました！
iOSに関しては機会があれば書こうと思います！
ありがとうございました