PushEngage ドキュメント

PushEngage のドキュメント、参考資料、チュートリアル

PushEngageのPushEngageを使用したReact Nativeアプリプッシュ通知の設定

PushEngage React Native SDKは、React Nativeアプリへのプッシュ通知の統合を簡素化し、AndroidとiOSのシームレスなサポートを提供します。アプリプッシュ通知の実装には、React、Native、Flutterの3つのフレームワークを提供しています。ネイティブAndroid、iOS、およびFlutterアプリプッシュ通知のガイドで、さらに詳しい情報を確認できます。

このガイドでは、AndroidとiOSの両方でプッシュ通知を有効にするためにPushEngage React Native SDKを設定する手順を説明します。

開始する前に

必要なもののリストはこちらです

  • React Nativeプロジェクトとターボモジュールサポート。 アカウントをお持ちでない場合は、 こちらからサインアップできます。
  • Android用にFirebase Cloud Messaging（FCM）が設定されたFirebaseアカウント。
  • iOSでApple Push Notification（APN）サービスを設定するためのApple Developerアカウント。
今すぐReact Nativeアプリプッシュ通知を開始する

PushEngage React Native SDKのインストール

npmまたはyarnのいずれかを使用してPushEngage React Native SDKをインストールできます

npm install @pushengage/pushengage-react-native

React Native 0.77.0以前の場合

React Nativeバージョン0.77.0以前を使用している場合は、以下に示すようにSDKのバージョン0.0.1を使用してください。

npm install @pushengage/[email protected]

Androidの設定

Firebase Cloud Messaging（FCM）の設定

Androidでプッシュ通知を有効にするには、Firebase Cloud Messaging (FCM) を設定する必要があります

1.Googleアカウントを使用してFirebaseコンソールにアクセスします。

2. 「プロジェクトを追加」をクリックして新しいプロジェクトを作成するか、リストから既存のプロジェクトを選択します。既存のプロジェクトを使用する場合は、直接ステップ4に進んでください。

3. プロジェクトの名前を入力し、「続行」をクリックします。最終画面で「プロジェクトを作成」をクリックしてセットアッププロセスを完了します。

4. Firebaseプロジェクトダッシュボードで、AndroidアイコンをクリックしてAndroidアプリを追加します。

5. Androidアプリのパッケージ名（android/app/build.gradleのandroidブロック内にあります）を入力し、アプリ名を入力します。完了したら「登録」をクリックします。

6. google-services.jsonファイルをダウンロードし、android/app/にあるAndroidアプリモジュールのルートに配置します。

7.サービスアカウントJSONを生成します

  • Firebaseコンソールで、左上の「プロジェクトの概要」の横にある設定アイコンをクリックし、プロジェクトの設定を選択します。
  • サービスアカウントタブに移動します。
  • 新しい秘密鍵を生成をクリックし、.jsonファイルをダウンロードします。
  • このファイルはPushEngageダッシュボードの設定で必要になるため、安全に保管してください。

8. 送信者IDを取得

  • Firebaseコンソールで、左上のプロジェクトの概要の横にある設定アイコンをクリックし、「プロジェクトの設定」を選択します。
  • Cloud Messagingタブを選択します。ここに、PushEngage SDKの初期化に必要な送信者IDがあります。

FCMとPushEngageの統合

FCMの詳細をPushEngageダッシュボードとシームレスに統合するには、以下の手順に従ってください。

1. ログインして、PushEngageアカウントにアクセスします

2. 左側のナビゲーションで、「設定 » インストール」に移動します。Android SDKを選択します

3. 利用可能なプラットフォームのリストから、「Android SDK」オプションを選択して、Androidのプッシュ通知を設定します。

4. FCM設定の構成 – Firebase送信者ID（Firebaseコンソールから取得）を入力します。サービスアカウントJSONファイル（Firebaseからダウンロード）をアップロードします。「更新」ボタンをクリックして、これらの設定を保存します。

5. FCM設定を構成した後、App IDが提供されます。このApp IDは、FlutterアプリでPushEngage Android SDKを初期化するために必要なのでコピーしてください。

iOSの設定

your_project_name » iOS » your_project_name.xcworkspace.を開いた後に、手順に従うことができます。

ステップ1：リモート通知を有効にする

1. Xcodeプロジェクトを開き、プロジェクトナビゲーターでルートプロジェクトを選択します。

2. メインのアプリターゲットを選択します。

3. 「署名と機能」に移動します。

4. バックグラウンドモードの機能が追加されていることを確認します。追加されていない場合は、「+ 機能」ボタンをクリックして追加します。

5. 同様に、プッシュ通知の機能が追加されていることを確認します。追加されていない場合は、「+ 機能」ボタンを使用して追加します。

Xcodeで「プッシュ通知」機能が表示されない場合：

1. Apple Developerアカウントに移動します。

2. 「証明書、ID、プロファイル」に移動します。

3. アプリのIDを選択します。

4. アプリのIDの設定を編集し、プッシュ通知が有効になっていることを確認します。

5. Xcodeに戻り、プッシュ通知の機能を追加してみてください。

ステップ 2: バックグラウンドモードを有効にする

1. Xcodeプロジェクトで、「署名と機能」に移動します。

2. 「バックグラウンドモード」内で、「リモート通知」と「バックグラウンド取得」の両方を有効にします。

この手順により、アプリがリモート通知とバックグラウンド取得を効率的に処理できるようになります。

iOS APNs証明書を作成する

まだiOS APNs証明書をお持ちでない場合は、こちらのガイドを参照して作成してください。

通知サービス拡張機能と通知コンテンツ拡張機能を追加する

これはiOSデバイスにのみ適用されます。

通知サービス拡張機能の作成

通知サービス拡張機能は、iOSアプリが通知を受信する機能を強化します。これは、通知を受信したときに通知の内容を変更したり、データを取得/処理するために使用されます。通知サービス拡張機能を作成するには、次の手順に従ってください。

1. Xcodeを開き、プロジェクトに移動します。

2. メニューから ファイル » 新規 » ターゲット を選択します。

3. テンプレート選択ウィンドウで、通知サービス拡張機能を選択し、次へをクリックします。

4. 拡張機能の名前を入力します（例: PushEngageNotificationServiceExtension）。そして完了をクリックします。 

通知サービス拡張機能の作成が完了したら、アクティベートを促される場合があります。すぐにアクティベートしないでください。

拡張機能をアクティブ化すると、Xcodeのデバッグフォーカスがアプリから拡張機能に切り替わります。誤ってアクティブ化した場合は、心配しないでください。Xcode内でアプリのデバッグに切り替えることができます。

5. プロジェクトナビゲーターで、最上位のプロジェクトディレクトリを選択し、ステップ4で作成したターゲットリストから、プロジェクトのNotificationServiceExtensionターゲットを選択します。

6. デプロイメントターゲットをiOS 10以上に設定します。これは、Appleがこの拡張機能のサポートをリリースしたiOSのバージョンです。 

Notification Service ExtensionのPushEngage SDKの初期化

PushEngage SDKがiOS通知サービス拡張機能で正しく機能することを確認するには、次の手順に従ってください。

1. your_project_name » ios » Podfile を開きます。

2. メインアプリターゲットの post_install ブロックに以下を追加します

 post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
         end
      end
  end

3. ファイルの末尾に追加します

target 'Your_Notification_Service_Extension_Name' do
  pod 'PushEngage', '~>0.0.5'
end

4. 依存関係をインストールします

pod repo update 
pod install

5. 通知サービス拡張機能ターゲットで、PushEngageフレームワークをインポートし、必要な初期化コードを追加していることを確認してください。

Swift

import UserNotifications
import PushEngage

@available(iOSApplicationExtension 10.0, *)
class PushEngageNotificationServiceExtension: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?
    var request : UNNotificationRequest?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.request = request
        self.contentHandler = contentHandler
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestContent = bestAttemptContent {
            PushEngage.didReceiveNotificationExtensionRequest(request, bestContentHandler: bestContent)
            contentHandler(bestContent)
        }
    }
    
    override func 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.
        if let contentHandler = contentHandler, let request = request ,let bestAttemptContent =  bestAttemptContent {
            guard let content = PushEngage.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
                contentHandler(bestAttemptContent)
                return
            }
            contentHandler(content)
        }
    }

}

通知コンテンツ拡張機能の作成

カスタムUIを追加して表示方法を改善するには、通知コンテンツ拡張機能を作成する必要があります。拡張機能を設定するには、以下の手順に従ってください:

1. Xcodeで、ファイル » 新規 » ターゲットに移動します。

2. 「通知コンテンツ拡張機能」を選択し、「次へ」をクリックします。

3. Finishをクリックした後に表示されるダイアログで「Activate」を選択しないでください。キャンセルすると、Xcodeは拡張機能ではなくアプリのデバッグを続行します。誤ってアクティベートした場合は、Xcode内でアプリのデバッグに切り替えてください（実行ボタンの隣）。

4. プロジェクトナビゲーターで、最上位のプロジェクトディレクトリを選択し、ステップ2で作成したターゲットリストからプロジェクト内のNotificationContentExtensionターゲットを選択します。

5. Deployment TargetをiOS 10以上に設定します。これは、Appleがこの拡張機能のサポートをリリースしたiOSのバージョンです。 

Notification Content ExtensionのPushEngage SDKの初期化

iOS Notification Content ExtensionでPushEngage SDKが正しく機能することを確認するには、次の手順に従ってください:

1. your_project_name » iOS » Podfile を開きます。

2. Podfile の一番下にある以下を追加します。

target 'Your_Notification_Content_Extension_Name' do
  pod 'PushEngage', '0.0.5'
end

3. 依存関係をインストールします。

プロジェクトの iOS ディレクトリに cd して、以下のコマンドを実行します

pod repo update 
pod install

4. Notification Content Extension ターゲットで、PushEngage フレームワークをインポートし、必要な初期化コードを追加していることを確認してください。以下に UI 要素の例を示します。

Swift 

import UIKit
import UserNotifications
import UserNotificationsUI
import PushEngage

@available(iOSApplicationExtension 10.0, *)
class NotificationViewController: UIViewController, UNNotificationContentExtension {
    
    fileprivate var hostingView: UIHostingController<ContentView>?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
    }
    
    func didReceive(_ notification: UNNotification) {
        if(notification.request.content.categoryIdentifier == "your_identifier"){
            let payLoad = PushEngage.getCustomUIPayLoad(for: notification.request)
  //pass the payload to your custom View
            let view = CustomView(payLoadInfo: payLoad)
            hostingView = UIHostingController(rootView: view)
If let customView = self.hostingView {
            addChild(hostingView!)
}
        }
    }
    
}

App Groupsの追加

App Groups は、メインアプリ、通知サービス拡張機能、通知コンテンツ拡張機能間の通信を有効にするために不可欠です。iOS プロジェクトに App Groups を追加するには、次の手順に従ってください。

既存のアプリグループがあり、それを使用したい場合は、手順 4 にスキップできます。

1. Xcode プロジェクトのプロジェクトナビゲーターで、最上位のプロジェクトディレクトリを選択し、アプリのメインターゲットを選択します。

2. Signing & Capabilities タブに移動します。

3. 「+ Capability」ボタンをクリックし、リストから App Groups を選択します。

4. 「+」ボタンをクリックして、App Group を追加します。

5. 一意の App Group 名を追加し、OK をクリックします。

6. メインエディタ領域で、アプリのメインターゲットを選択します。アプリグループを作成した場合は、アプリケーションの Info.plist に PushEngage_App_Group_Key キーでグループ名を提供してください。

7. 通知サービス拡張機能の Info.plist ファイルに同じキーと値を追加します。

8. メインアプリケーションターゲットと通知サービス拡張機能の両方で、同じアプリグループを選択していることを確認してください。

PushEngage SDK の初期化

index.js で PushEngage SDK を初期化します。

import PushEngage from 'pushengage-react-native';
PushEngage.setAppId('your-app-id');

iOS アプリの AppDelegate.mm で

@import PushEngage;

@implementation AppDelegate

- (instancetype)init
{
    self = [super init];
    if (self) {
        [PushEngage swizzleInjectionWithIsEnabled: YES];
    }
    return self;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"PushengageReactNativeExample";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  [PushEngage setInitialInfoFor:application with:launchOptions];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
    completionHandler(UIBackgroundFetchResultNewData);
}

deeplink の処理

ディープリンクイベントをリッスンし、アプリケーションで処理します

const listenerSubscription = React.useRef<null | EventSubscription>(null);

  React.useEffect(() => {
    listenerSubscription.current = PushEngage.onValueChanged((data) => {
      Alert.alert(`Deeplink: ${data.deepLink}`);
      console.log('Data:', data.data);
    });

    return () => {
      listenerSubscription.current?.remove();
      listenerSubscription.current = null;
    };
  }, []);

トラブルシューティング

エラーの場合、ビルド設定の iOS プロジェクトの下にある「Other C++ flags」に -fcxx-modules を追加します。 「C++ モジュールが無効になっている場合に '@import' を使用しています。-fmodules および -fcxx-modules の使用を検討してください。」

iOS SDK の機能についてさらに詳しく知りたい場合は、詳細なAPI ドキュメントをご覧ください。

問題が発生した場合は、ここをクリックしてお問い合わせください。サポートチームがお手伝いします。

まだお困りですか？どのようなお手伝いができますか？
最終更新日: 2026年5月11日

ウェブサイトを離れた後も訪問者をエンゲージし、維持する

見逃せないプッシュ通知で、すべてのウェブ訪問の価値を高めましょう。

PushEngageを試してみる
  • 永久無料プラン
  • 簡単なセットアップ
  • 5つ星サポート

1000億件以上の通知を送信済み

100%安全でGDPR準拠

150か国以上のお客様から信頼されています