react-native 通知機能の実装方法

はじめに

この記事では、react-nativeを使用して、ラインのような通知の実装方法を記述します。

なお、記事は、一介の大学生が執筆したものです。内容に誤りが含まれる可能性があります。ご了承ください。

前提

この記事ではexpoで開発していることを前提にしています。expoを使用していない人は参考にならないかもしれません。

環境設定

ここでは、通知機能を実装するためにexpoでは少し異なる"開発環境"とExpoNotificationsについて説明します。

react-nativeで通知機能を実装するためには、開発環境にする必要があります。開発環境とは、あらゆるネイティブアプリの機能を設定できる環境です。これはexpo環境とは異なり、expoライブラリーを使えますが、QRコードでアクセスはできなくなります。

昔はexpoのみでも通知機能はできたらしいのですが、SDK 53からセキュリティ上使用できなくなったようです。

開発環境の作成方法

開発環境は以下のコードで作成できます。

bash

npx expo prebuild

この後開発したいosどっちかを実行してください。

bash

npx expo run:android
npx expo run:ios

これを行うことでいつも通り、osを開く画面が表示されるはずです。

この時エラーが出た場合、javaのバージョンが原因の可能性があります。なぜなら、Expo / React Nativeでは17が推奨されているからです。そのため、バージョンが正しいかどうか確認してください。

通知モジュールの導入

通知機能を追加するためにExpoNotificationsモジュールをインストールする必要があります。これはExpoで通知（ローカル・プッシュ）を扱うためのライブラリーです。

導入方法は以下の通りです。

bash

expo install expo-notifications

実際のコード

ここからは、実際にコードを提示し実装方法を述べます。

全体のコードとしては以下のコードとなります。

typescript

import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';


Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldShowBanner: true, 
    shouldShowList: true,  
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});


export async function setupNotifications() {
  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
    });
  }
}


export async function requestNotificationPermission() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') {
    alert('通知を許可してください');
    return false;
  }
  return true;
}


export async function sendNotificationAfter10Sec(taskName: string) {
  const ok = await requestNotificationPermission();
  if (!ok) return;

  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'タスクのお知らせです',
      body: taskName,
    },
    trigger: {
      type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
      seconds: 10,
      repeats: false,
    },
  });
}

ここから個別に説明します。

以下の部分は通知ハンドラーの設定を行っています。これを行うことで、通知音の有無などを行うことができます。ちなみにiosではshouldShowBannerとshouldShowListを設定しないと動きません。

typescript

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldShowBanner: true, 
    shouldShowList: true,  
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});

以下の部分は通知のユーザー許可を行っています。これを行わないと、iosでは通知が送られません。androidも13以降では必須です。

typescript

export async function requestNotificationPermission() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') {
    alert('通知を許可してください');
    return false;
  }
  return true;
}

以下の部分は実際に通知を設定しています。今回のコードでは、10秒後に通知を送るようにしています。Notifications.scheduleNotificationAsyncを用いることで通知を送れます。設定はそれぞれ以下の通りです。

プロパティ	説明
title	通知のタイトル
body	通知の本文
sound	通知音を鳴らすかどうか（iOS/Android）
badge	ホーム画面アイコンのバッジ数（iOSのみ）
data	通知に付与する追加データ
type	通知のトリガータイプ（TIME_INTERVAL / DATE / DAILY など）
seconds	TIME_INTERVALの場合の遅延秒数
repeats	繰り返すかどうか（true/false）
channelId	Android専用。通知チャンネルのID
date	DATEタイプの場合、通知を出す日時

typescript

export async function sendNotificationAfter10Sec(taskName: string) {
  const ok = await requestNotificationPermission();
  if (!ok) return;

  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'タスクのお知らせです',
      body: taskName,
    },
    trigger: {
      type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
      seconds: 10,
      repeats: false,
    },
  });
}

以上です。
間違ってたらごめんなさい。
特にjavaバージョンは注意してください。自分は一時間ぐらい沼りました。