読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

PushNotificationIOS

React

f:id:mochizuki_p:20161029101755p:plain iOSでのプッシュ通知を設定する。パーミッションの設定やアイコンのバッジ番号も設定できる。 アプリのプッシュ通知機能を有効にするにはAppleのアプリ審査を通過したあとに、サーバーにプッシュ通知を発信する機能を追加しなければならない。

PushNotificationIOSライブラリに手動でアクセスするには

*Header Search Paths:に以下の設定を追加する

$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS

recursiveへの検索を有効化する。

最後にnotificationとregisterイベントへのサポートを有効にするにはAppDelegateの設定を変更しなければいけない。

AppDelegate.mの最初の箇所に

import “RCTPushNotificationManager.h”

を追加する。

そしてAppDelegateの実装に以下を追記する.

// Required to register for notifications - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings { [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; } // Required for the register event. - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; } // Required for the notification event. - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification { [RCTPushNotificationManager didReceiveRemoteNotification:notification]; } // Required for the localNotification event. - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { [RCTPushNotificationManager didReceiveLocalNotification:notification]; }

メソッド

static presentLocalNotification(details)

アプリ起動中のローカル通知の設定をする.

オブジェクト形式で以下の項目を指定する。

  • alertBody: プッシュ通知で表示されるメッセージ
  • alertAction:アクション通知で下に表示される。デフォルトはView
  • soundName:(任意)プッシュ通知の起動したときに再生されるサウンドを指定。
  • category(任意):プッシュ通知のカテゴリを指定する。アクション通知では必須
  • userInfo:(任意)追加の通知データ
  • applicationIconBadgeNumber:(任意)表示するアプリのアイコンバッジの番号、デフォルトでは0で、何も表示されない。

static scheduleLocalNotification(details)

将来時点で発火するプッシュ通知の設定をする。

オブジェクト形式で指定する。

  • fireDate: システムが通知を起動する。時間を設定する。
  • alertBody: プッシュ通知で表示されるメッセージ
  • alertAction:アクション通知で下に表示される。デフォルトはView
  • soundName:(任意)プッシュ通知の起動したときに再生されるサウンドを指定。
  • category:(任意)プッシュ通知のカテゴリを指定する。アクション通知では必須
  • userInfo:(任意)追加の通知データ
  • applicationIconBadgeNumber:(任意)表示するアプリのアイコンバッジの番号、デフォルトでは0で、なにも表示されない。

static cancelAllLocalNotification()

設定済みのローカル通知を全部キャンセルする。

static setApplicationIconBadgeNumber(number)

ホームスクリーンに表示されるアプリアイコンの番号バッジの数字を設定する。

static getApplicationIconBadgeNumber(callback)

現在ホームスクリーンに設定されているアプリアイコンの番号バッジの数字を表示する。

static cancelLocalNotification()

ローカル通知をキャンセルする。 キャンセルされる通知をuserInfoで限定することができる。

static addEventListenter(type, handler)

アプリが表示中またはバックグラウンドで起動中のときリモート通知、ローカル通知イベントを追加することができる。

指定可能なイベントは

notification: リモート通知を受けとったときに発火する。このコールバックはPushNotificationIOSのインスタンスとして起動する。 localNotificaiton:ローカル通知を受けとったときに発火する。このコールバックはPushNotificationIOSのインスタンスとして起動する。 register:リモート通知が登録されたときに発火する。コールバックは16進法形式のデバイストークンが渡されて起動する。

static removeEventListen(type, handler)

イベントリスナを解除する。メモリリークを防ぐためイベントリスナを登録した場合はcomponentWillUnmountで必ず実行すること

static requestPermissions(permissions?)

iOSの通知のパーミッションを変更を求めるダイアログボックスを表示する。デフォルトではすべてのパーミッションを要求する。しかし オブジェクト形式で以下の三種類のパーミッションを選択することができる。

  • alert
  • badge
  • sound

ここでtrueとして指定された値だけパーミッションが変更される。このメソッドの返り値は変更後のパーミッションの状態である。

static abandonPermissions()

Apple Push Notification service経由で届くリモート通知をすべて解除する。

このメソッドを使用するのは新バージョンのアプリでリモート通知を廃止するなどの限られた場合のみに限定すべきでしょう。 このメソッドで通知を解除してもユーザーはiOSの設定画面から通知を再設定できます。

static checkPermission(callback)

どのプッシュ通知が有効化されているか確認する。コールバックは許可されている通知=trueという形式で返却される。

  • alert: boolean
  • badge: boolean
  • sound: boolean

static getInitialNotification()

アプリがプッシュ通知によって起動した場合、このメソッドで通知のオブジェクトを取得できる。

constructor(notiveNotif)

通常は使用しない

getMessage()

nortificationオブジェクトから通知のメッセージを取得するためのエイリアス

getSound()

apsオブジェクトからサウンドの文字列を取得する

getAlert

通知のメッセージをapsオブジェクトから取得する。

getBadgeCount()

apsオブジェクトからバッジのカウント番号を取得する

getData()

notifのデータオブジェクトを取得する。

'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { AlertIOS, PushNotificationIOS, StyleSheet, Text, TouchableHighlight, View, } = ReactNative; var Button = React.createClass({ render: function() { return ( <TouchableHighlight underlayColor={'white'} style={styles.button}         onPress={this.props.onPress}> <Text style={styles.buttonLabel}> {this.props.label} </Text> </TouchableHighlight> ); } }); class NotificationExample extends React.Component { componentWillMount() { // Add listener for push notifications PushNotificationIOS.addEventListener('notification', this._onNotification); // Add listener for local notifications PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification); } componentWillUnmount() { // Remove listener for push notifications PushNotificationIOS.removeEventListener('notification', this._onNotification); // Remove listener for local notifications PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification); } render() { return ( <View> <Button onPress={this._sendNotification} label="Send fake notification" />          <Button onPress={this._sendLocalNotification} label="Send fake local notification" /> </View> ); } _sendNotification() { require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', { aps: { alert: 'Sample notification', badge: '+1', sound: 'default', category: 'REACT_NATIVE' }, }); } _sendLocalNotification() { require('RCTDeviceEventEmitter').emit('localNotificationReceived', { aps: { alert: 'Sample local notification', badge: '+1', sound: 'default', category: 'REACT_NATIVE' }, }); } _onNotification(notification) { AlertIOS.alert( 'Push Notification Received', 'Alert message: ' + notification.getMessage(), [{ text: 'Dismiss', onPress: null, }] ); } _onLocalNotification(notification){ AlertIOS.alert( 'Local Notification Received', 'Alert message: ' + notification.getMessage(), [{ text: 'Dismiss', onPress: null, }] ); } } class NotificationPermissionExample extends React.Component { state: any; constructor(props) { super(props); this.state = {permissions: null}; } render() { return ( <View> <Button onPress={this._showPermissions.bind(this)} label="Show enabled permissions" /> <Text> {JSON.stringify(this.state.permissions)} </Text> </View> ); } _showPermissions() { PushNotificationIOS.checkPermissions((permissions) => { this.setState({permissions}); }); } } var styles = StyleSheet.create({ button: { padding: 10, alignItems: 'center', justifyContent: 'center', }, buttonLabel: { color: 'blue', }, }); exports.title = 'PushNotificationIOS'; exports.description = 'Apple PushNotification and badge value'; exports.examples = [ { title: 'Badge Number', render(): ReactElement<any> { PushNotificationIOS.requestPermissions(); return ( <View> <Button onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)} label="Set app's icon badge to 42" /> <Button onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)} label="Clear app's icon badge" /> </View> ); }, }, { title: 'Push Notifications', render(): ReactElement<any> { return <NotificationExample />; } }, { title: 'Notifications Permissions', render(): ReactElement<any> { return <NotificationPermissionExample />; } }];