Open5

Flutter + FCMで画像付きの通知を送受信する in iOS

まずは基本的な通知を送受信するための設定。このやり方については巷にたくさん記事が出てるのでその通りに従っていけばまずつまづかないはず。下記の記事がメンテされてて良さそう。

https://qiita.com/yana1316/items/9bd3806efc9cbdddcba9

次にこのドキュメントの (Advanced, Optional) Allowing Notification Images に書いてある設定を行う。

https://firebase.flutter.dev/docs/messaging/apple-integration#advanced-optional-allowing-notification-images

注意点としては、

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で書く場合は例えばこんな感じで送信する。

const payload = {
  // 個別の端末に送信したい場合はこんな風に指定する
  token: 'this_is_a_device_token_to_send_to_a_specific_user_device', 
  notification: {
    title: 'タイトル',
    body: '本文',
  },
  android: {
    notification: {
      image: 'https://upload.wikimedia.org/wikipedia/commons/9/9e/Flag_of_Japan.svg',
    },
  },
  apns: {
    payload: {
      aps: {
        "mutable-content": 1, // 画像を受け取れるようにするための設定
        "content-available": 1,
        badge: 1234,
      },
    },
    fcm_options: {
      // 表示したい画像のurl
      image: 'https://upload.wikimedia.org/wikipedia/commons/9/9e/Flag_of_Japan.svg', 
    },
  },
  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の仕様についてはこのドキュメント。

https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages

一般に送信の際の具体例については公式のこのドキュメントに色々と書いてある。

https://firebase.google.com/docs/cloud-messaging/send-message?hl=ja

あとペイロードのapsに何を設定できるのかについてはAppleの下記のドキュメントに書いてある。

https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/generating_a_remote_notification

その他、公式のドキュメントではないけどこの記事はFCMの受信時の挙動について詳しく解説してくれているのでよかった。

https://techracho.bpsinc.jp/kawawa/2019_09_04/79745

release buildを行うときにこんなエラーが出る場合がある。

Multiple commands produce '/Users/hoge/Library/Developer/Xcode/DerivedData/Runner-earpwkppmyngbcgtloibozoqeuwx/Build/Intermediates.noindex/ArchiveIntermediates/Runner/IntermediateBuildFilesPath/UninstalledProducts/iphoneos/GoogleUtilities.framework':

1) Target 'GoogleUtilities-00567490' has create directory command with output '/Users/hoge/Library/Developer/Xcode/DerivedData/Runner-earpwkppmyngbcgtloibozoqeuwx/Build/Intermediates.noindex/ArchiveIntermediates/Runner/IntermediateBuildFilesPath/UninstalledProducts/iphoneos/GoogleUtilities.framework'

2) Target 'GoogleUtilities-54e75ca4' has create directory command with output '/Users/hoge/Library/Developer/Xcode/DerivedData/Runner-earpwkppmyngbcgtloibozoqeuwx/Build/Intermediates.noindex/ArchiveIntermediates/Runner/IntermediateBuildFilesPath/UninstalledProducts/iphoneos/GoogleUtilities.framework'

その場合はエラーメッセージにもある通り、GoogleUtilitiesを各ターゲットに指定する。

https://github.com/CocoaPods/CocoaPods/issues/8206#issuecomment-696754566
ログインするとコメントできます