FlutterでFirebase Cloud MessagingとNotification Service Extension

先で書いた FlutterでFirebase Cloud Messaging を基に、iOSのNotification Service Extensionを使った拡張を追加する。

これで以下を実現する。

• 通知センターに表示する通知に画像を表示する。

本ページより参照しているApple, Firebaseなどのページは以下。

• https://developer.apple.com/documentation/usernotifications/modifying_content_in_newly_delivered_notifications
• https://firebase.google.com/docs/cloud-messaging/ios/send-image

証明書などの用意

先で書いた FlutterでFirebase Cloud Messaging では以下の証明書を用意した。

• iOS App Development
• Apple Push Notification service SSL (Sandbox)

前者のiOS App Developmentは特定のBundle identifierの証明書。
今回追加するNotification Service Extensionでも証明書が必要なので、Apple Developmentの証明書を用意した。

最終的には以下のようなApp ID, 証明書, Provisioning Profileを用意した。

• App ID
  • アプリ用のApp ID
  • Notification Service Extension用のApp ID
• macOSにインストールした証明書
  • Apple Developmentの証明書
  • Apple Push Notification service SSL (Sandbox)の証明書
• macOSにインストールしたProvisioning Profile
  • アプリ用のApp IDのProvisioning Profile (証明書はApple Development)
  • Notification Service Extension用のApp IDのProvisioning Profile (証明書はApple Development)

アプリ用のApp IDのProvisioning Profile

Notification Service Extension用のApp IDのProvisioning Profile

Notification Service Extension

以下はXcode 11.5で確認。

手順は https://developer.apple.com/documentation/usernotifications/modifying_content_in_newly_delivered_notifications に記述されているので、最新のXcodeを使用している場合はドキュメントを見直したほうが良い。

Notification Service Extensionの設定など

File > New > Target の順に選び Notification Service Extension を選択する。

Product Name、Languageを入力し進む。
LanguageのデフォルトはSwiftだがFirebaseのExtensionがSwiftで使えなかったこと（またドキュメントでもSwiftのコードの説明もなかったこと）から、Objective-Cを選択している。

次に進むとActivateするかどうか確認される。Activateしなかった場合がわからないが、ひとまずActivateをする。

追加した Notification Service Extension の Build Settings を開き、 Enable Bitcode を No にする。（FlutterがBitcodeに対応していないので）

ひとまずここまでで通知が届くか確認

まだ最終ゴールまでたどりついていないが、ここでいったん通知が届くことを確認をしておく。
Firebase Consoleから通知を送り届くかどうか確認をする。タイトルに [modified] と追加された通知を受信できる。

届かなくなってしまったのであれば、特に証明書周りを疑ったほうが良い。

タイトルに [modified] と追加されているのは、先の手順で追加した Notification Service Extension のデフォルトの実装でそうなっているので。

画像が表示されるようにする変更

画像が表示されるようにする変更は https://firebase.google.com/docs/cloud-messaging/ios/send-image のコードをそのまま使えば良い。
FirebaseMessagingが提供するAPIを使えばすぐできる。

#import "NotificationService.h"
#import <FirebaseMessaging/FirebaseMessaging.h>

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    
    // Modify the notification content here...
    [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];
}

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
    self.contentHandler(self.bestAttemptContent);
}

@end

試す

Doodleのanimation gifで試してみた。
https://www.google.com/doodles/swedish-midsummer-2020

結果はこんな感じ。うまく動いた。

通知センターでanimation gifがアニメーションしてていい感じ。