リッチプッシュ通知に対応する(React Native)

React Native SDKにおいても、リッチプッシュ通知に対応することが可能です。

リッチプッシュ通知に対応することで、画像や動画などを添付したプッシュ通知を受信することが可能です（本機能は iOS10 以上でのみ利用可能です）。

導入手順

STEP1: 通常のプッシュ通知への対応

まずは下記ページを参考に、プッシュ通知受信への対応をお願いいたします。

プッシュ通知を受信する(React Native)
https://developers.karte.io/docs/notification-react-native-sdk-v2

STEP2: Platform(iOS)側でExtensionを作成する

次に、リッチプッシュ通知を受信するために、iOS配下でNotification Service Extension を作成する必要があります。

ターゲットを追加する

作成されたアプリをXcodeで開き、メニューの File > New > Target... をクリックします。

テンプレートを選択する

iOS > Notification Service Extension を選択し、Next をクリックします。

ターゲットのオプションを設定する

以下の項目を入力した上で、Finish をクリックします。

Product Name
Organization Name
Organization Identifier

Activate をクリックします。

🚧
deployment targetについて
追加したExtensionのdeployment targetは本体のターゲットと同一にする必要があります。
追加時の設定のままだと、最新版に近いバージョンが指定されるため、古いOSバージョンではリッチプッシュの表示のみできない等の不具合が起こる可能性があります。

STEP3: SDK のセットアップ

CocoaPods を利用してセットアップする

Podfile の編集

iOS配下に存在するPodfile を任意のエディタで開き、App Extensions SDK の情報を追記します。
TARGET_NAME 部分は、Extension 作成時に指定した Product Name に置き換えてください。

target 'TARGET_NAME' do
  pod 'KarteNotificationServiceExtension'
end

SDK をインストール

以下のコマンドをターミナルで実行し、SDK をインストールします。

$ pod install

Swift Package Manager を利用してセットアップする

Xcode より公式githubレポジトリ(https://github.com/plaidev/karte-ios-sdk)のパッケージを追加してください。
詳細は下記を参照してください。
Adding Package Dependencies to Your App | Apple Developer Documentation

STEP4: リッチプッシュ通知の受信に必要な実装を行う

Extension 作成時にテンプレートから自動的に作成されるソースコードを修正します。
デフォルトで作成される NotificationService クラスを NotificationServiceExtension クラスを継承するようにし、デフォルトの実装も削除します。

このようにすることで、KARTE 経由で配信されたプッシュ通知を受信した際に NotificationServiceExtension が自動的に必要なリソース（画像等）をダウンロードし、通知へ反映します。

import KarteNotificationServiceExtension

class NotificationService: NotificationServiceExtension {
}

// Header
#import <UserNotifications/UserNotifications.h>
#import <KarteNotificationServiceExtension/KarteNotificationServiceExtension.h>

@interface NotificationService : KRTNotificationServiceExtension
@end

// Implementation
#import "NotificationService.h"

@interface NotificationService ()
@end

@implementation NotificationService
@end

Appendix: KARTE 経由のプッシュ通知であるか判定する方法

プッシュ通知が KARTE 経由で送信されたものであるか判定する必要がある場合は、NotificationServiceExtension の canHandleRemoteNotification メソッドを呼び出します。

import KarteNotificationServiceExtension

class NotificationService: NotificationServiceExtension {
    
  override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
    // KARTE経由のプッシュ通知であるか判定
    if super.canHandleRemoteNotification(request.content.userInfo) {
      // KARTE経由のプッシュ通知 (スーパークラスに処理を移譲)
      super.didReceive(request, withContentHandler: contentHandler)
    } else {
      // KARTE以外のシステムから送信されたプッシュ通知 (任意の処理を実装)
      contentHandler(request.content)
    }
  }
}

#import "NotificationService.h"

@interface NotificationService ()
@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
  // KARTE経由のプッシュ通知であるか判定
  if ([super canHandleRemoteNotification:request.content.userInfo]) {
    // KARTE経由のプッシュ通知 (スーパークラスに処理を移譲)
    [super didReceiveNotificationRequest:request withContentHandler:contentHandler];
  } else {
    // KARTE以外のシステムから送信されたプッシュ通知 (任意の処理を実装)
    contentHandler(request.content);
  }
}

@end

Updated about 1 month ago