SDK: Expo プラグイン

ステップ1: PushSDKライブラリをインポートする

お好みのパッケージマネージャーを使ってPushSDKをインストールしてください。

Yarn

yarn add @pushly/push-sdk-expo

NPM

このプラグインは、Pushly React Native SDK に必要なネイティブ設定を適用します

手順 2: Expo 設定へのプラグイン追加

手順 2.1: Google Services

次のファイルを追加します google-services.json ファイルを app ディレクトリに。

手順 2.2: app.config.js

プラグインを Expo 設定に追加し、App Group ID、Android アプリケーション ID（内部の package と一致する必要があります google-services.json）、および次のファイルへのパスを指定してください google-services.json ファイル:

app.config.js

export default {
  expo: {
    ...,
    plugins: [
      [
        '@pushly/push-sdk-expo',
        {
          ios: {
            enableNse: true,
            nseTargetName: 'NotificationServiceExtension',
            nseBundleIdSuffix: '.NotificationServiceExtension',
            appGroupId: 'group.com.pushly.PushSdkReactNativeExample',
            iosDeploymentTarget: '15.0',
            swiftVersion: '5.0',
          },
          android: {
            applicationId: 'com.example.myapp',
            googleServicesFile: './app/google-services.json',
            applyGoogleServicesPlugin: true,
          },
        },
      ],
    ],
  },
};

プロパティ	定義
ios.enableNse	NotificationServiceExtension のインストールをプラグインに許可します
ios.nseTargetName	NotificationServiceExtension のユーザー定義名。 default: NotificationServiceExtension
ios.nseBundleIdSuffix	NotificationServiceExtension の Bundle ID 接尾辞。値は PRODUCT_BUNDLE_IDENTIFIER 環境変数に追加されます。 default: .NotificationServiceExtension
ios.appGroupId	PushSDK が情報を正しく取得できるようにするため、コンテナは次の名前にする必要があります group.{app-bundle-id}.push.
ios.DeploymentTarget	pbxproj ファイルで NotificationServiceExtension ターゲットを設定するために使用されます
ios.swiftVersion	pbxproj ファイルで NotificationServiceExtension ターゲットを設定するために使用されます
android.applicationId	Android アプリケーションで使用されるアプリケーション ID
android.googleServicesFile	app.plugin.js からの相対パスで指定した google-services.json ファイルの場所
android.applyGoogleServicesPlugin	Google Services プラグインを gradle に適用する必要があります。

実行 expo prebuild --clean （または EAS Build/カスタム開発クライアントを使用）して、Pushly 設定が適用されたネイティブプロジェクトを生成します。

ステップ3: iOSのセットアップ

ステップ3.1: Podsをインストールする

次の場所で <project_root>/ios ディレクトリ内で以下を実行します: bundle exec pod install

ステップ4: SDKの初期化

次のファイルで index.tsx または app.tsx ファイルで、以下のサンプル実装コードを使ってPushSDKを初期化します。

次の REPLACE_WITH_SDK_KEY を setConfiguration メソッド内で、プラットフォーム設定ページのSDKキーに置き換えてください。

index.tsx

...
import { PushSDK, LogLevel } from '@pushly/push-sdk-react-native';

export const App = () => {
    ...

    // useEffectブロック内でPushSDKを初期化することを推奨します
    // アプリケーションが次を呼び出そうとするのを防ぐため
    // 再レンダーのたびにPushSDK.setConfiguration()を実行しないようにするためです
    React.useEffect(() => {
        PushSDK.setLogLevel(LogLevel.INFO);
        PushSDK.setConfiguration({ appKey: 'REPLACE_WITH_SDK_KEY' });

        PushSDK.showNativeNotificationPermissionPrompt().then(({ granted }) => {
            console.log(`Permissions granted: ${granted}`);
        });
    }, []);
    
    // 残りのアプリ
    ...
};

Androidデバイスまたはエミュレーター（エミュレーターに Google Play ストア サービス がインストールされていることを確認してください）、またはiOS向けにビルドする場合はiOSデバイスでアプリを実行し、正しくビルドされることを確認してください。

前のステップで追加したコードにより、アプリ起動時にプッシュ権限ダイアログが表示されます。これは SDK メソッド を使用して、ダイアログを表示するタイミングを制御することでカスタマイズできます。

ダイアログを承認した後、プラットフォームにログインして Notifications > Create Notification に移動し、適切な ネイティブ: iOS または ネイティブ: Android チャネル

次のステップ

SDK が正しく動作していることを確認したら、次のような追加のオプション機能を引き続き追加できます:

• 通知の開封 / アプリリンク / ディープリンクの処理

• 購読者のプロフィールに属性を付与する

• 購読者がどのコンテンツとやり取りしたかに関する情報を送信する