プッシュ通知管理(React Native)

プッシュ通知証明書とサービスアカウントを設定する

プッシュ通知証明書を設定する、サービスアカウントを設定するを参照してください。

react-native-push-notificationを追加する

サンプルコードではreact-native-push-notificationを使用します。

インストール

以下のコマンドをプロジェクトのルートディレクトリで実行して、インストールしてください。

npm install --save react-native-push-notification

yarn add react-native-push-notification

iOS向けの設定

iOSの手動インストールに従って、インストールを実施してください。

Android向けの設定

Androidの手動インストールに従って、インストールを実施してください。

デバイストークンを登録する

デバイストークンを取得してBaaS@rakuzaに登録します。デバイストークンをBaaS@rakuzaに登録することで、管理画面からデバイストークンに紐づく端末にプッシュ通知を送信することができます。

デバイストークン取得時にPushNotification.configureに設定したonRegisterメソッドが呼び出されます。

取得したデバイストークンはregisterPushDeviceTokenメソッドでBaaS@rakuzaに登録してください。

import RKZ from 'baasatrakuza'
import PushNotification from 'react-native-push-notification'

PushNotification.configure({
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },
  requestPermissions: true, // trueにすると、自動で通知許諾のリクエストが行われる（iOSのみ）

  // デバイストークン取得時のイベント
  async onRegister(token) {
    const userAccessToken = 'xxx'
    const deviceType =
        Platform.OS === 'ios' ? RKZ.DeviceType.IOS : RKZ.DeviceType.Android

    // デバイストークンをBaaS@rakuzaに登録
    await RKZ.User.registerPushDeviceToken(userAccessToken, token, deviceType)
  },
  // デバイストークンの取得に失敗した場合のイベント
  onRegistrationError(err) {
    console.error(err.message, err)
  },

  // ...
})

プッシュ通知を送信する

プッシュ通知を送信するを参照してください。

受信したプッシュ通知を処理する

受信したプッシュ通知の情報をハンドリングすることができます。

BaaS@rakuzaではカスタムペイロードとして以下の項目を送信しています。カスタムペイロードはプッシュ通知を受信した時や、通知バナーをタップした時に参照することができます。

項目名	概要	備考
news_id	お知らせID	※お知らせをプッシュ通知した場合のみ送信
news_tenant_id	お知らせを配信しているテナントID	※お知らせをプッシュ通知した場合のみ送信
url	URL
custom_vars	カスタム情報

プッシュ通知を受信、または通知バナーをタップすると、PushNotification.configureに設定したonNotificationメソッドが呼び出されます。カスタムペイロードは引数のnotification.dataから取得することができます。

PushNotification.configure({
  // ...
  onNotification(notification) {
    console.log('NOTIFICATION:', notification)
  },
})

注意

Androidでメッセージタイプがデータメッセージの場合、通知バナーが表示されません。通知バナーを表示するには、通知メッセージを選択してください。（メッセージタイプの選択方法は受信したプッシュ通知を表示するを参照してください）

また、フォアグラウンドの場合、標準の設定だと通知バナーが表示されません。フォアグラウンドで通知バナーを表示したい場合、AndroidManifest.xmlの以下の設定をtrueにしてください。

<meta-data
  android:name="com.dieam.reactnativepushnotification.notification_foreground"
  android:value="true"/>

注意

Androidでメッセージタイプがデータメッセージの場合、タイトルとメッセージの一部文字がHTMLエンティティに変換されます。 詳細は受信したプッシュ通知を表示するを参照してください。

デバイストークンをクリアする

ユーザーがログアウトするなど、デバイストークンが不要になった場合はクリアすることができます。

デバイストークンのクリアはclearPushDeviceTokenメソッドで行います。

const userAccessToken = 'xxx'

await RKZ.User.clearPushDeviceToken(userAccessToken)