リッチプッシュ通知に対応する(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 3 months ago