このエントリーでは、ExpoのPush Notifications APIの実装、そしてプッシュ通知のテスト送信まで一連を紹介したい。

難しいのでは？と思ったあなたも大丈夫。

私は最近までプッシュ通知とは無縁のマークアップエンジニアで、スマホアプリ開発の経験といってもハイブリッドアプリ開発に携わった程度のものだ。プッシュ通知にどのような手続きが必要なのか全く無知な状態だったわけだが、テスト送信までした所感として、「簡単」だと言い切れる。

というのも結局は手続きというものはなく、証明書作成が不要だ。またAPNs/GCMといったプッシュ通知サービスへのリクエストもExpoが良しなにこなしてくれるため、条件分岐も不要だ。

ともあれ体感してもらうのが早かろうと思う。

[aside type=”normal”] 補足
プッシュ通知の確認は実機端末で行うため、Expo Clientアプリのインストールが必須。 [/aside]

コーディング

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Notifications } from 'expo';
import * as Permissions from 'expo-permissions';
import Constants from 'expo-constants';
export default class App extends React.Component {
  registerForPushNotificationsAsync = async () => {
    // 実機端末か否かを判定
    if (Constants.isDevice) {
      const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
      let finalStatus = existingStatus;
      // ユーザーによる通知の許可or許可しないが決定していないときのみ
      if (existingStatus !== 'granted') {
        const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
        finalStatus = status;
      }
      // ユーザーが通知許可しなかった場合は処理を抜ける
      if (finalStatus !== 'granted') return;
      // デバイストークンを取得する
      let token = await Notifications.getExpoPushTokenAsync();
      alert(token);
    } else {
      alert('プッシュ通知は、実機端末を使用してください。');
    }
  };
  componentDidMount() {
    this.registerForPushNotificationsAsync();
  }
  render () {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

重要なAPIは、NotificationsとPermissions、Constantsの3つ。デバイストークンを取得するまでの処理が記述されている。トークン取得に関わる処理はregisterForPushNotificationsAsync()メソッドに書かれていて、Appコンポーネントがマウントされた時点で、実行される。

デバイストークンを取得

プッシュ通知は「”◯◯”は通知を送信します。よろしいですか？」のアラートを許可することでデバイストークンが得られる。アラートに「ExponentPushToken[**********]」が表示されていれば、ひとまず成功だ。デバイストークンはテスト送信ツールに入力するため、メモしておこう。

プッシュ通知をテスト送信

「Push notifications tool」に通知したい内容を入力する。EXPO PUSH TOKEN (FROM YOUR APP)のデバイストークンが必須項目で、あとは適宜必要なものは入力するとよい。今回のプッシュ通知は、MESSAGE TITLEとMESSAGE BODYのみ入力している。Send a notificationボタンをクリックすれば、プッシュ通知サービスに送られる。

• EXPO PUSH TOKEN (FROM YOUR APP)
• MESSAGE TITLE
• MESSAGE BODY
• Play sound
• JSON DATA
• TTL (SECONDS)
• IMAGE
• AUDIO (IOS ONLY)
• VIDEO (IOS ONLY)

iOS

• MESSAGE SUBTITLE
• MESSAGE CATEGORY
• BADGE COUNT
• Content available (for background update notifications)
• Display the notification when the app is in foreground

Android

• Channel ID

プッシュ通知を確認

「Push notifications tool」のSend a notificationボタンをクリックして、まもなくプッシュ通知が表示される。以下キャプチャは、おなじみのプッシュ通知が届いたときのものだ。

まとめ

ExpoのPush Notifications APIの実装、そしてプッシュ通知のテスト送信までの紹介だった。今回の内容では、「Push notifications tool」にデバイストークンを入力する都合上、アラートで視認する必要があった。実際は、サーバーに送るなり、Firebaseに送るなりしておくようだ。機会があったら、それら内容を含めたエントリーを書こうと思う。

プッシュ通知について簡単かもしれないと感じてもらえたならば有り難い。