Expo+ReactNativeでユーザにプッシュ通知をリモートで送る

Webサイトとアプリの大きな違いの一つはプッシュ通知です。プッシュ通知をうまく使うとユーザが離脱しにくくなります。通知は大きく２種類あります。

①ローカル通知
②リモート通知

この記事では②のリモート通知について解説します。

必要なpackageのインストール
送信ツールで試す
バックエンドの実装

必要なpackageのインストール

プッシュ通知のメインの機能にexpo-notificationsを使います。expo-deviceでは実機かシュミレータか？をチェックするために使います。expo-constantsはプロジェクトIDを取得するために使います

Terminal

npx expo install expo-notifications expo-device expo-constants

ExpoPushTokenの取得

プッシュ通知を有効にするにはユーザから許可をもらわないといけません。下記のような画面です。

許可を押してもらうと「ExpoPushToken」が取得できます。このリモート通知するにはExpoPushTokenが必要になります。

javascript

import Constants from 'expo-constants';
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
 
 // 中略
const getToken = async () => {
  // シュミレーターの場合はnullを返す
  if (!Device.isDevice)  return null

  // 現在の権限を取得
  const { status: existingStatus } = await Notifications.getPermissionsAsync()
  let finalStatus = existingStatus

  // grantedは「許可済み」それ以外の時は、権限をリクエストする
  if (existingStatus !== 'granted') {
    // 上の画像のメッセージが表示される
    const { status } = await Notifications.requestPermissionsAsync()
    finalStatus = status
  }
  if (finalStatus !== 'granted') {
    return
  }

  // ExpoPushTokenの取得
  const token = await Notifications.getExpoPushTokenAsync({
    projectId: Constants.expoConfig.extra.eas.projectId,
  })
  return token
}

上で取得した、expoPushTokenをDBなどに保存しておきます。