Firebase Cloud Messaging(以下FCM)を利用して、FlutterのiOSアプリでプッシュ通知を受け取る機能を実装していきます。
アプリの状態がForeground・Backgroundで通知が表示されるようにします。
・Apple Developer Account
・Firebase Cli で操作
・iOS の実機デバイス(iOS シミュレータでは通知が動作しないため)
Android での実装手順はこちらを参照してください。
[Flutter]Android用のPush通知を実装する
Flutter Andoroidアプリのプッシュ通知を実装する手順です。mochot.com1.Firebase の事前準備
公式を参考にアプリに Firebase を追加して初期化します。 https://firebase.google.com/docs/flutter/setup?hl=ja&platform=ios
- Firebase プロジェクトを作成する
- Firebase プロジェクトに iOS アプリを追加する
- Flutter アプリで Firebase を初期化する
2.App Identifier の Push Notifications を有効にする
Apple Developer の画面を開きます。
Identifier > Capabilities の Push Notifications
を有効にします。
Certificates, Identifiers & Profiles > Identifiers
XCode に通知の設定がある Profile を設定します。
3. APNs と FCM を紐付ける
APNs(Apple Push Notification service)と FCM をひもづけるために、APNs キーを作成し、Firebase に登録します。
3-1. APNs キーを 作成する (AppleDeveloper)
AppleDeveloper のアカウントページを開き、Certificates, Identifiers & Profiles を選択します。
Apple Push Notifications service (APNs)
を選択して登録します。
確認画面でKey ID をコピーしておき、ファイルをダウンロードします。
3-2. APNs キーを Firebase に登録する
Firebase コンソール から、プロジェクトの設定 > Cloud Messaging を開きます。 APNs 認証キーのアップロードリンクをクリックします。
- Key ファイル(ダウンロードしたファイル)
- Key ID(APNsのキー。コピーしたもの)
- Team ID(AppleDeveloper画面のアカウント > メンバーシップの詳細 チーム IDの値)
4. Xcode の Capabilities 設定
Xcode を開きます。
Xcode Runner > Signing & Capabilities の Capabilities に以下を追加します。
Push Notifications
Background Modes
Background Modes の 詳細を開き、Background fetch と Remote notifications のモードを有効にします。
5.Flutter アプリで通知を実装する
5-1.FCM プラグインをインストールする
flutter pub add firebase_messaging
dependencies:
firebase_messaging: ^14.9.1
main.dart に import します。
import 'package:firebase_messaging/firebase_messaging.dart';
FCM の通知権限リクエストと端末のトークンを取得する処理を追加します。
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
// FCM のtokenを取得
final fcmToken = await FirebaseMessaging.instance.getToken(); // <-- 追加
debugPrint('FCM Token: $fcmToken');
runApp(const MyApp());
}
アプリを起動し、コンソールに出力されるトークンを取得します。
flutter: FCM Token: fj0wJtdDSsqBRAKuhjjnfd:APA96*********m2CFapQxU2etz3Q6*********3GT2_mW3IbF6S_AL9CcWLzkxqGyJHI0o6*********8axj1tcv5GHzJpZxYFzYN4WzPwB2ZuN4F8m_sR6*********
5-2.プッシュ通知権限リクエスト
FCM の通知権限リクエスト処理を追加します。
void main() async {
・・・
FirebaseMessaging.instance.requestPermission(); // <-- 追加
アプリを起動すると通知権限のリクエストが表示されます。
初回に許可しなかった場合、変更するには設定画面から許可する必要があります。
5-3.アプリがBackground時にプッシュ通知を受け取る
Firebaseのコンソールから通知を送信します。
FirebaseのメニューからCloud Messagingを選択し、「最初のキャンペーンを作成」から通知の作成画面を開きます。 通知のタイトル・通知テキストを入力し、右側「デバイスのプレビュー」の「テストメッセージを送信」ボタンを押下します。
取得したトークンを追加・選択し、「テスト」ボタンを押下します。
アプリをBackgroundにした状態で送信するとプッシュ通知が届きます。
5-4.アプリがForeground時にプッシュ通知を受け取り表示する
Foreground通知を有効にするために、以下メソッドを呼び出します。
await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
alert: true,
badge: true,
sound: true,
);
アプリを起動し、Firebaseのコンソールから通知を送信すると、アプリがForegroundにある場合も通知が表示されます。
以上で、iOSアプリにプッシュ通知を実装する手順は完了です。
つまづいたところ
Automatically assigning platform iOS
with version 12.0
on target Runner
メッセージが表示される
[!] Automatically assigning platform`iOS`with version`12.0`on target`Runner`because no platform was specified. Please specify a platform for this target in your Podfile. See`https://guides.cocoapods.org/syntax/podfile.html#platform`.
./ios/Podfile の platform :ios, '12.0'
の部分をコメントアウトすると解消されました。
platform のバージョンは適宜変更してください
# Uncomment this line to define a global platform for your project
platform :ios, '12.0'