[Flutter]iOS用のPush通知を実装する

広告Flutter
2024年4月29日

Firebase Cloud Messaging(以下FCM)を利用して、FlutterのiOSアプリでプッシュ通知を受け取る機能を実装していきます。
アプリの状態がForeground・Backgroundで通知が表示されるようにします。

環境

・Apple Developer Account
・Firebase Cli で操作
・iOS の実機デバイス(iOS シミュレータでは通知が動作しないため)

Android での実装手順はこちらを参照してください。 

[Flutter]Android用のPush通知を実装する

Flutter Andoroidアプリのプッシュ通知を実装する手順です。mochot.commochot.com
[Flutter]Android用のPush通知を実装する

1.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

IdentifierのCapabilities設定
IdentifierのCapabilities設定

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) を選択して登録します。

Apnsキーを作成
Apnsキーを作成

確認画面でKey ID をコピーしておき、ファイルをダウンロードします。

3-2. APNs キーを Firebase に登録する

Firebase コンソール から、プロジェクトの設定 > Cloud Messaging を開きます。 APNs 認証キーのアップロードリンクをクリックします。

FCM 設定画面
FCM 設定画面

  • Key ファイル(ダウンロードしたファイル)
  • Key ID(APNsのキー。コピーしたもの)
  • Team ID(AppleDeveloper画面のアカウント > メンバーシップの詳細 チーム IDの値)
    FCM APNs 登録
    FCM APNs 登録

4. Xcode の Capabilities 設定

Xcode を開きます。

Xcode Runner > Signing & Capabilities の Capabilities に以下を追加します。

  • Push Notifications
  • Background Modes
Capabilities
Capabilities

Background Modes の 詳細を開き、Background fetch と Remote notifications のモードを有効にします。

Background Modesのモード設定
Background Modesのモード設定

5.Flutter アプリで通知を実装する

5-1.FCM プラグインをインストールする

flutter pub add firebase_messaging
pubspec.yaml
dependencies:
  firebase_messaging: ^14.9.1

main.dart に import します。

main.dart
import 'package:firebase_messaging/firebase_messaging.dart';

FCM の通知権限リクエストと端末のトークンを取得する処理を追加します。

main.dart
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 の通知権限リクエスト処理を追加します。

main.dart
void main() async {
  ・・・
  FirebaseMessaging.instance.requestPermission(); // <-- 追加

アプリを起動すると通知権限のリクエストが表示されます。
初回に許可しなかった場合、変更するには設定画面から許可する必要があります。

iOS 通知権限リクエスト
iOS 通知権限リクエスト

5-3.アプリがBackground時にプッシュ通知を受け取る

Firebaseのコンソールから通知を送信します。

FirebaseのメニューからCloud Messagingを選択し、「最初のキャンペーンを作成」から通知の作成画面を開きます。 通知のタイトル・通知テキストを入力し、右側「デバイスのプレビュー」の「テストメッセージを送信」ボタンを押下します。

FCM 通知作成
FCM 通知作成

取得したトークンを追加・選択し、「テスト」ボタンを押下します。

FCM トークン入力
FCM トークン入力

アプリをBackgroundにした状態で送信するとプッシュ通知が届きます。

iOS端末 Background通知表示
iOS端末 Background通知表示

5-4.アプリがForeground時にプッシュ通知を受け取り表示する

Foreground通知を有効にするために、以下メソッドを呼び出します。

await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
	alert: true,
	badge: true,
	sound: true,
);

アプリを起動し、Firebaseのコンソールから通知を送信すると、アプリがForegroundにある場合も通知が表示されます。

iOS端末 Foreground通知表示
iOS端末 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 のバージョンは適宜変更してください

ios/Podfile
# Uncomment this line to define a global platform for your project
platform :ios, '12.0'

App Store - Support - Apple Developer

Learn how to take advantage of the App Store to distribute your apps and how to contact us regarding your App Store submissions.apple.comapple.com

参考

アプリの状態について

Flutter アプリでメッセージを受信する  |  Firebase Cloud Messaging

google.comgoogle.com