🐙

【Flutter×FCM】Push通知を実装：テスト送信まで（iOS）

2024/05/03に公開

はじめに

方言を話すおしゃべり猫型ロボット「ミーア」を開発中。

以前、こちらの記事で、バックエンドで天気予報情報を取得し、Flutterアプリに表示する機能を実装した。

今回は、ホーム画面上部に表示されている、毎日の天気情報をユーザーが設定した時刻にPush通知できるように改善したいと思う。Firebase Cloud Messagingを利用する。

Firebase Cloud Messaging（FCM）は、メッセージを無料で確実に送信するためのクロスプラットフォームメッセージングソリューション。

FCMを用いたプッシュ通知のプロセスは、下記3ステップで構成される。

メッセージの作成: バックエンドサーバー（例えばAWSで動作するGoサーバー）が、FCMに送信するメッセージを作成する。このメッセージには、通知の内容（タイトル、本文など）、送信対象のデバイストークンやトピック、必要に応じて送信時刻（例えば、特定のイベントが発生した時刻）などが含まれる。
HTTPリクエストの送信: 作成したメッセージをJSON形式でFCMのAPIエンドポイントにHTTP POSTリクエストとして送信する。このとき、リクエストヘッダーには認証用のサーバーキーが必要。

デバイスの識別: FCMは、サーバーから受け取ったメッセージに基づき、どのデバイスに通知を送るかを決定する。これは、メッセージ送信時に指定されたデバイストークンやトピックによって識別される。デバイストークンはアプリがユーザーのデバイスで初めて起動されたときにFCMから発行され、アプリによって保存されている必要がある。
プラットフォーム別の処理: FCMはAndroid、iOS、Webなど、異なるプラットフォームに合わせてメッセージを適切に処理する。例えば、iOSデバイスではAPNsを介して通知が送られ、Androidでは直接FCMから送られる。

メッセージの受信: アプリはFCMからのメッセージをバックグラウンドまたはフォアグラウンドで受信することができる。受信したときの挙動は、アプリが起動している状態（フォアグラウンド）か、バックグラウンド（または終了状態）かによって異なる。
通知の表示: アプリがフォアグラウンドにある場合、アプリは受信したデータを基にカスタム通知を表示するか、または何も表示しないかを選択できる。バックグラウンドの場合、デバイスのシステムはFCMから受信した通知を自動的に表示する。

FCMを用いたPush通知の全体のプロセスを把握できたので、実装開始。

FCMクライアントアプリを設定

下記に沿って、FLutterでFCMクライアント設定を進めて