プッシュ通知の実装

1. Copyright 2021 iChain, Inc. CONFIDENTIAL
プッシュ通知の実装⽅法

2. ⽬次
1. プッシュ通知について
2. 環境
3. Androidの設定
4. iosの設定
5. Firebaseの設定
6. アプリ側の設定
7. 実機での確認

3. 1.プッシュ通知について
プッシュ通知とは、新しいメッセージやメール、ニュース速報や天気予報、セールの開始など、
アプリが⾃動的にお知らせを表⽰する機能です。たとえば、ロック画⾯やホーム画⾯にLINEの
新着メッセージが表⽰されるのもプッシュ通知です。
フォアグラウンド時のプッシュ通知
バックグラウンド時のプッシュ通知

4. 2.環境
4
・ macOs Big Sur 11.3.1
・ Visual Studio Code 1.56.2
・ Flutter 2.0.6
・ Dart 2.12.3
APIサーバー
ユーザー
Firebase CloudMessaging(FCM)
Amazon SNS
管理サイト
①ログイン時にFCMで発⾏
したdevice-tokenを送る
②AmazonSNSに
device-tokenを登録する
③通知を作成し送る
④登録したdevise-token
に通知を送る
⑤通知を送る

5. 3.Androidの設定
5
・AndroidManifest.xmlの編集
/android/app/src/main/AndroidManifest.xmlを開いてFLUTTER_NOTIFICATION_CLICKを記載します。
記載場所については</activity>の上になります。

6. 4.iosの設定
6
・APNs Keyの作成
AppleDeveloperにログインしCertificates, Identifiers & Profilesをアクセスし、KeysからKeysの画⾯を開きます。
+ボタンをクリックし、作成画⾯でKey Nameを⼊⼒し、Apple Push Notifications service(APNs) の ENABLE にチェックを
します。
※アカウントの権限がAccount Holder ⼜はAdminでなければ作成できないので注意!!

7. 4.iosの設定
7
Continueをクリックし、keyの内容を確認しRegisterをクリックします。
※このp8ファイルは⼀度ダウンロードしたら再度ダウンロードできません︕︕
必ず安全な場所に保存、バックアップしてください︕︕
Download Your Key 画⾯でKeyをダウンロードします。ファイル名は◯◯◯◯◯◯◯◯.p8となります。

8. 4.iosの設定
8
・アプリのIdentifiersを変更する
Certificates, Identifiers & ProfilesのIdentifiersでアプリのnameをクリックします。
Saveをクリックしたら変更完了です。
Capabilities の⼀覧で Push Notifications の ENABLED にチェックをつけます。

9. 4.iosの設定
9
・XcodeでCapabilitiesを設定する
XcodeでアプリのRunner.xcodeprojを開きます。TARGETSのRunnerでSigning & CapabilitiesタブのBackground Modesで
Background fetch、Remote notificationsにチェックする。もしPush Notificationsの項⽬がなければ左上の+ Capability
で追加してください。

10. 4.iosの設定
10
・Podfileのplatform versionを変更する
iosのバージョンが古いとFirebaseがサポートしていないので、バージョンを変更する必要があります。
通常はplatformの欄はコメントアウトしているのでコメントアウトを外して、12.0とバージョンを指定します。

11. 5.Firebaseの設定
11
・APNs Keyをアップロードする
FirebaseConsoleにログインし、プロジェクトの概要右の⻭⾞マークをクリックし、Cloud Messagingタブをクリックします。
APNs 認証キーの右下のアップロードをクリックします。

12. 5.Firebaseの設定
12
下記のようなダイアログが出現するので、先ほど作成したAPNs KeyをD&Dします。キーIDは、Apple Developer
ConsoleのKeysにてKeyを選択すると確認できます。またチームIDはApple Developer Membershipで確認できます。
全て⼊⼒したらアップロードをクリックします。Firebase側はこれで設定終了です。

13. 6.アプリ側の設定
13
・pubspec.yamlにライブラリを記載する。
firebase_core及びfirebase_messagingについてはFCMを使う上で必要なライブラリで、
flutter_local_notificationsは通知関係のライブラリになります。

14. 6.アプリ側の設定
14
・tokenを取得する
通知の送信先となるデバイスのtokenを取得する必要があります。getTokenメソッドで取得することができます。
Printメソッドでターミナル上でtokenが確認できるようにします。

15. 6.アプリ側の設定
15
・通知のリクエスト画⾯の作成
FCMではダイアログを作成することなく、requestPermissonメソッドで右のようなダイアログを作成することができます。
androidではダイアログ等はなく常に許可されている状態です。

16. 6.アプリ側の設定
16
・Androidでのフォアグラウンドでの通知処理
FirebaseMessaging.onMessage.listen((RemoteMessage message)で受信⾃体はできますが、通知と表⽰されないため
flutterLocalNotificationsPluginを使って、通知として表⽰されるように記述します。

17. 6.アプリ側の設定
17
androidのデバイスによってはアプリの通知の優先度が低いとみなされ、通知⾃体が届いてはいるものの無視される可能性が
あります。
そのため、importance: Importance.highにすることで、通知の優先度を上げることができます。

18. 6.アプリ側の設定
18
・iosでのフォアグラウンドでの通知処理
setForegroundNotificationPresentationOptionsメソッドでフォアグラウンド時の通知設定ができます。

19. 6.アプリ側の設定
19
・バックグラウンドでの通知処理
バックグラウンドでの通知処理に関してはトップレベルで定義する必要があります。通常はmain関数に定義するようにします。
メッセージはonBackgroundMessageハンドラーを介して処理できます。
公式によるとタスクが30秒以上実⾏されるとOSがプロセスを終了したりするとの事なので、ロジック⾃体は切り離して記述します。

20. 7.実機での確認
20

21. Thank you!