その他

React Native + FCM で Push通知に 画像 を表示する方法

The smug face of the author その他
The smug face of the author
この記事は約7分で読めます。

こんにちは。株式会社インプルの加納です。

iOS、Androidともに、Push通知には画像や動画などのメディアを添付することができます。

ここでは React Native と FCM(Firebase Cloud Messaging) でそれをどのように実装するか手順を解説します。

Push通知の実装

まずはFCMからPush通知を受け取る必要がありますので、実装します。

ライブラリのインストール

React Native で Push通知を実装する場合、以下のライブラリが最も人気です。

GitHub - zo0r/react-native-push-notification: React Native Local and Remote Notifications
React Native Local and Remote Notifications. Contribute to zo0r/react-native-push-notification development by creating an account on GitHub.

公式の手順に従って、インストールします。

Firebase SDKのインストール

次に、Firebase の設定を行います。

こちらも公式のドキュメントに従って、SDKのインストールを行います。

iOS

Apple プラットフォームで Firebase Cloud Messaging クライアント アプリを設定する
# Add the Firebase pod for Google Analytics
pod 'Firebase/Analytics'

# For Analytics without IDFA collection capability, use this pod instead
# pod ‘Firebase/AnalyticsWithoutAdIdSupport’

# Add the pod for Firebase Cloud Messaging
pod 'Firebase/Messaging'

Android

Android で Firebase Cloud Messaging クライアント アプリを設定する
buildscript {

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.10'  // Google Services plugin
  }
}

allprojects {
  // ...

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

通知ペイロードで画像を送信する

Androidは、FCMを使用して画像を設定することで、特に何もしなくても画像を表示することができます。

iOSは、特別な設定が必要になります。具体的には、

  1. 一時的に画像を保存して、
  2. それをPush通知に保存する

ということを行う必要があります。

基本的には以下の公式ドキュメントの手順通り行います。

通知ペイロードで画像を送信する  |  Firebase Cloud Messaging

Notification Service Extension ファイルを作成する

XCodeから、Notification Service extension というExtensionをアプリに追加します。

  1. File / New / Target から Notification Service extensionを選択します。
  2. 公式ドキュメントの通り、言語は Objective-Cを選択します。
  3. ファイル名は何でも構いません。今回は ImageNotificationとします。
  4. 有効化しますか?というダイアログが出るので、有効化します。(Activate)

以上の手順を行うことで、今後受信するPush通知は全てこの Extention を経由します。
このExtentionでは 通知ペーロードを参照したり加工することができます。

ペイロードに設定されている画像URLから画像をダウンロードし、実際の通知モーダルに表示する実装をこれから行います。

Notification Service Extensionの実装

FCMを使用する場合は、FirebaseのSDKに画像のダウンロードや設定をお任せすることができます。

こちらもドキュメントに書いてあるコードを設定するだけで使用することができます。

@interface NotificationService () <NSURLSessionDelegate>
@property(nonatomic) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property(nonatomic) 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 as you wish
    self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]",
    self.bestAttemptContent.title];

  // Call FIRMessaging extension helper API.
  [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent
                                            withContentHandler:contentHandler];

}

FIRMessaging extension helper を有効化する

ただし、上記のままでは FIRMessaging extension helper が見つからないとエラーになってしまうので、この Extention に Podをインストールします。

Podfileを編集する

以下のように追加、変更します。

  target 'ImageNotification' do
    pod 'Firebase/Analytics', '~> 8.3.0'
    pod 'Firebase/Messaging', '~> 8.3.0'
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO'
      end
    end
  end

作成した Extention に Podを追加します。

ここでは アプリ本体とバージョンを合わせておく必要があるので、バージョンを指定して設定します。

APPLICATION_EXTENSION_API_ONLY を No に

アプリ本体との共有設定を No にします。

Pod のインストール

改めてPodをインストールします。

npx pod install

完成

これで、通知に画像が表示されるようになりました!

初心者にもわかりやすいおすすめ記事はこちら!
JavaScript | 複雑な条件分岐を綺麗にする方法まとめ【if文 / 三項演算子 など】
...