スマホ機能

通知の利用

expo-notification

スマホへの通知はデバイスがAndroidなのかiOSなのかで違いがあります。一方、Expoにはこの違いを吸収し、統一的に利用できる（どちらのデバイスにも通知が行える）expo-notificationsパッケージがあります。なお、expo-notificationsパッケージを使う場合にはExpoのアカウントを作成し、ログインしている必要があります。

トークンの取得

expo-notificationsでのトークン取得は許可申請とトークン取得という手順になります。
※Androidの場合はデフォルトで通知が許可されているので確認メッセージは表示されません。

  async getToken() {
    // 通知許可
    const res = await Notifications.requestPermissionsAsync();
    if (res.status !== 'granted') {
      return;
    }
  
    // Expoの通知システムで使うトークンを取得する
    const result = await Notifications.getExpoPushTokenAsync();
    const token = result.data;
    console.log(token);
    this.setState({token});
  }

expo-notificationsでは「https://exp.host/--/api/v2/push/send」というURLにPOSTリクエストを送信することで通知を依頼します。このPOSTリクエストはexpo-notificationsに用意されている関数ではなく、fetch関数などを使用してHTTPリクエストを送信します。

  sendNotification() {
    // 通知メッセージ。今回は自分から自分に送信する
    const message = {
      // 通知の送信先
      to: this.state.token,
      // 通知のタイトル
      title: 'テスト',
      // 通知の本文
      body: '通知のテストです。',
      // 任意の追加データ
      data: { id: '1234' }
    };
    // Expoが用意している通知サーバにメッセージを送信する
    fetch('https://exp.host/--/api/v2/push/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // メッセージ全体をJSONにして送る
      body: JSON.stringify(message)
    });
  }

取得したトークンに通知が送れるかを確認したい場合はプログラムを作成しなくてもExpoで用意されているPush notification tool（https://expo.io/notifications）が利用できます。

通知の受信

通知はアプリがフォアグラウンドのとき（ユーザーが現在アプリを利用しているとき）に来るとは限りません。また、アプリがフォアグラウンドのときであればOSによる通知は表示せずにアプリ固有の通知表示を行いたいという場合も考えられます。expo-notificationsではアプリフォアグラウンド時に通知が来た際の挙動をsetNotificationHandler関数で設定します。

// setNotificationHandler関数にはオブジェクトを渡す
// オブジェクトのプロパティは関数
Notifications.setNotificationHandler({
  // handleNotificationで指定する関数は受信した通知を引数に受け取りPromiseを返す
  // PromiseはNotificationBehaviorと呼ばれるオブジェクトをresolveする
  // 通常は以下のようにasyncを付けたアロー関数で固定のオブジェクトを返せばよい
  handleNotification: async () => ({
    // OSの通知を表示するか
    shouldShowAlert: true,
    // 通知が来たときに音を鳴らすか
    shouldPlaySound: false,
    // アイコンにバッジ（通知数など）を表示するか
    shouldSetBadge: false
  }),
  // 他にhandleSuccess, handleErrorを指定できるがあまり使われない
});

アプリで通知を受け取るにはリスナー（listener）を設定します。expo-notificationsでは次の二つのリスナーを設定できます。

Androidではapp.jsonで以下のようにuseNextNotificationsApiをtrueに設定しないとリスナーが呼び出されません。

{
  "expo": {
    他の設定
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "useNextNotificationsApi": true
    },
    他の設定
  }
}