Flutter + FCMで画像付きの通知を送受信する in iOS
まずは基本的な通知を送受信するための設定。このやり方については巷にたくさん記事が出てるのでその通りに従っていけばまずつまづかないはず。下記の記事がメンテされてて良さそう。
次にこのドキュメントの (Advanced, Optional) Allowing Notification Images に書いてある設定を行う。
注意点としては、
Notification Service Extensionはドキュメントのスクショ画像の通り、Swiftではなく Objective-C で作成する
code: (ruby)
use_frameworks! # <= ここへ移す
target 'Runner' do
# use_frameworks! これを↑へ
# some codes may be written in this lines.
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end
target 'ImageNotification' do
pod 'Firebase/Messaging'
end
Automatically manage signingを使っていない場合は、追加したNotification Service Extension用のProvisioning Profileを別途作成する。その際作成するbundle idは、もしメインのtargetがcom.example.appでNotification Service Extensionの名前がImageNotificationならcom.example.app.ImageNotificationにする。そしてこのcom.example.app.ImageNotificationのidでIdentifiersを作り、provisioning profileを作成する。
com.example.app.ImageNotificationのIdentifiersを作成するときのCapabilitiesは何もオンにしなくて良い
とまぁこんな感じ。
今度は送信について。CloudFunctions+Node.jsで書く場合は例えばこんな感じで送信する。
code: (javascript)
const payload = {
// 個別の端末に送信したい場合はこんな風に指定する
token: 'this_is_a_device_token_to_send_to_a_specific_user_device',
notification: {
title: 'タイトル',
body: '本文',
},
android: {
notification: {
},
},
apns: {
payload: {
aps: {
"mutable-content": 1, // 画像を受け取れるようにするための設定
"content-available": 1,
badge: 1234,
},
},
fcm_options: {
// 表示したい画像のurl
},
},
data: {
hoge_custom_id: 'abcdefg',
click_action: "FLUTTER_NOTIFICATION_CLICK",
},
};
admin
.messaging()
.send(message) // sendToDevice()ではなくsend()を使わないと画像を送信できない
.then(() => {
return Promise.resolve(null);
});
注意点としては、コメントにも書いているがsendToDeviceではなくsendメソッドを使うこと。sendToDeviceはLegacyAPIを使ってるのでsendを使わないと画像を送信できないっぽい。
指定できるPayloadの仕様についてはこのドキュメント。
一般に送信の際の具体例については公式のこのドキュメントに色々と書いてある。
あとペイロードのapsに何を設定できるのかについてはAppleの下記のドキュメントに書いてある。
その他、公式のドキュメントではないけどこの記事はFCMの受信時の挙動について詳しく解説してくれているのでよかった。