ReactNative用SDKでPush配信をしたい

はじめに

Push通知配信をするにはSDKの導入が必要です
導入手順の詳細については 以下の記事を参照ください

Push通知の実装イメージ

「Push通知」を受信したときのイメージを、iOS端末とAndroid端末の場合でそれぞれご紹介します。

OSのバージョンや機種によって見栄えが異なることがあります。
iOS端末でのPush通知のイメージ

iOS端末でPush通知を受信したときの参考イメージをご紹介します。

ロック画面で受信した場合

ホーム画面で受信した場合

Push通知から起動し、ダイアログを表示した場合

Android端末でのPush通知のイメージ

Android端末でPush通知を受信したときの参考イメージをご紹介します。

ロック画面で受信した場合

ホーム画面で受信した場合

 

Push通知のAPI組み込み

APIの仕様について

Push通知の提供関数について

最初に b→dash の通知状態には「通知有効/通知解除/エラー」の3つの状態があります。

通知有効: b→dash 上で「通知が有効」な状態
通知解除: b→dash 上で「通知が無効」な状態
エラー : b→dash に同期を行おうとして失敗した状態

Javascript側で 「b→dash の通知メッセージ」を受け取るためには、「通知有効」にする必要があります。

各制御を行うのはBDashNotificationModule クラス内の下記関数となります。

API 説明
register() b→dash のPush通知を「通知有効」にしサーバへ同期します。b→dashと同期がとれた際、「通知有効/エラー」のステータスが「リスナー関数」に通知されます。
cancel() b→dash のPush通知を「通知無効」にしサーバへ同期します。b→dashと同期がとれた際、「通知解除/エラー」のステータスが「リスナー関数」に通知されます。
getToken( callback ) 現在の「通知トークン」をcallback関数で返却します。
setSound( enable ) true: サウンドを有効にします。
false: サウンドを無効にします。
(Android) APIレベル26以降「通知チャンネルの設定」が優先されるので、それ以前のOS向けに提供しています。
(iOS) Push通知を「フォアグラウンド」で受信したときに、サウンドを鳴らすかの設定になります。
setVibration( enable ) true: バイブを有効にします。
false: バイブを無効にします。
(Android) APIレベル26以降「通知チャンネルの設定」が優先されるので、それ以前のOS向けに提供しています。
(iOS) Push通知を「フォアグラウンド」で受信したときに、バイブレーションを鳴らすかの設定になります。
canSound( callback ) サウンドが有効かをcallback関数で返却します。
canVibration( callback ) バイブレーションが有効かをcallback関数で返却します。

iOSは、プラットフォーム仕様により各関数の初回呼び出し時に「ユーザー承諾ダイアログ」が表示されます。

スレッドセーフについて
Push通知を提供するBDashNotificationはスレッドセーフではありません。複数のスレッド(メインスレッド、ワーカースレッド)から同時に書き込む処理を行う場合、排他制御をする必要があります。React-Native 版は単一スレッドのため、ネイティブで利用する場合のみ意識する必要があります。

Push通知のリスナー/コールバック関数について

Push通知の「通知状態・通知メッセージ」を受け取るための「リスナー/コールバック関数」の設定や削除はBDashNotificationServiceクラス内の下記関数となります。

API 説明
constructor ( onEnable, onDisable, onError, onNotification ) 「Push通知のON/OFF状態・通知メッセージ」を受け取るためのインスタンスを生成し、引数で渡された「通知状態リスナーと通知メッセージコールバック関数」を紐づけるコンストラクタです。Pushの受信タイミングを逃さないように、導入アプリケーション内のコンストラクタで紐づける必要があります。複数のスクリーンで new を行ってインスタンス化し紐づけることは可能ですが、onNotification() だけはアプリケーション内で常に1つだけが有効になります。
constructor ( onEnable, onDisable, onError, onNotification ) onEnable() 通知状態リスナー関数 b→dashサーバへ同期を行った結果、Pushが有効(ON)になったときに呼び出されます。※
constructor ( onEnable, onDisable, onError, onNotification ) onEnable() 通知状態リスナー関数 b→dashサーバへ同期を行った結果、Pushが無効(OFF)になったときに呼び出されます。
constructor ( onEnable, onDisable, onError, onNotification ) onEnable() 通知状態リスナー関数 b→dashサーバへ同期を行った結果、同期そのものが失敗したときに呼び出されます。引数はエラー発生時の原因となるString型のメッセージです。※
constructor ( onEnable, onDisable, onError, onNotification ) onNotification(notify) 通知メッセージ コールバック関数 Push通知を受け取り「通知領域(通知センター)」から起動したときに、呼び出されます。
iOSではアクティブで受信したときも呼び出されます。
Androidはアクティブ受信は対応しておりません。
本メソッドに限りアプリケーションに紐づけられるのは一つだけになり、最後に紐づけたコールバック関数でオーバーライドされます。引数は以下の情報で構成されます。
options(object) {title: "通知タイトル", message: "通知メッセージ", isActive: true, param: "パラメータ"}
(isActiveについて)
true: フォアグラウンドでPush受信( iOS のみ )
false: バックグラウンドでPush受信後起動
removeStateListener() コンストラクタで設定した「通知リスナー」を削除します。 コンストラクタで設定した「通知リスナー」を削除します。
showDialog(options) 「Push通知のメッセージ」を受け取っときに、ダイアログでメッセージを表示します。独自のUI処理を行うときは呼び出さないようにします。本APIはiOSのみ対応しています。引数は onNotification(notify) と同じ構成となります。
options(object){title: "ダイアログタイトル", message: "ダイアログメッセージ", isActive: true, param: "パラメータ"}
(isActiveについて)
true: フォアグラウンドでPush受信
false: バックグラウンドでPush受信後起動

※iOSに関して、特定のタイミングによっては、コールバックが複数回呼ばれる可能性がございます

Push通知使用例

JavaScriptでのPush通知使用例となります。サンプルコードは以下の通りです。

import BDashNotification from './src/bdash/BDashNotificationService';
import BDashTrackerSDK from './src/bdash/BDashTrackerModule';

〜 省略

export default class UserApplicattion extends Component {

 constructor(props) {
     super(props);
     // 「通知状態のリスナー」「Push通知のコールバック」の登録
     this.notification = new BDashNotification(
         this.onEnable.bind(this),
         this.onDisable.bind(this),
         this.onError.bind(this),
         this.onNotification.bind(this)
     );
  }

  // 「通知状態のリスナー」の削除
  componentWillUnmount() {
     if( this.notification ){
         this.notification.removeStateListener();
     }
  }

  // 通知状態「登録成功」時に呼ばれる
   onEnable() {
       〜 省略
   }
   // 通知状態「登録失敗」時に呼ばれる
   onDisable() {
       〜 省略
   }
   // 通知状態「登録エラー」時に呼ばれる
   onError(error) {
       〜 省略
   }
   // Push経由で起動/フォアグラウンドでPush受信時に呼ばれる
   onNotification(notify) {

       // SDK の定型ダイアログで通知メッセージを表示( iOS のみ表示される )
       this.notification.showDialog(notify);

      // Push経由で起動された成果をTrackerを使用し送信
      if ( !notify.isActive ) {
         var options = {
             screenName: "スクリーン名",
             bootType: BDashTrackerSDK.BOOT_PUSH,
             bootValue: notify.param,
         };
         BDashTrackerSDK.sendScreen(options);
      }
   } 
}

※「BDashNotificationSDK」「BDashNotification」は任意の名称に変更可能です