ExpoでローカルPush通知を実装する

memoirの振り返りの日程通知の機能が欲しかったのでexpo-notificationsのローカルPush機能で実装してみました。

Pull Request

github.com

実装

実装は以下のドキュメントを参考に作成

docs.expo.io

まず、以下でNotificationのパーミッションの許可を行い

import * as Notifications from 'expo-notifications';

略）

      const { status: existingStatus } = await Notifications.getPermissionsAsync();
      let finalStatus = existingStatus;

      if (existingStatus !== 'granted') {
        const { status } = await Notifications.requestPermissionsAsync();
        finalStatus = status;
      }

以下でローカルPush通知の設定ができます。 以下の例だとtrigger.seconds: 10なので、10秒後に指定したPush通知を受信します。

          Notifications.scheduleNotificationAsync({
            content: {
              body: 'ふりかえりの時間になりました',
            },
            trigger: {
               seconds: 10,
            },
          });

今回は以下の画面のように曜日と時間を指定して毎週Push通知を受信できるように実装します。

このような場合は以下のように設定すれば 毎週月曜日の19:00に「ふりかえりの時間になりました」のPush通知を受信するようになります。

          Notifications.scheduleNotificationAsync({
            content: {
              body: 'ふりかえりの時間になりました',
            },
            trigger: {
              weekday: 2,
              hour: 19,
              minute: 0,
              repeats: true,
            },
          });

• weekday : 曜日の指定（1が日曜日で、7が土曜日です）
• hour : 時間
• minute : 分
• repeats : trueで繰り返し実行

また、通知をOFFにしてい場合は以下を実行すれば通知をキャンセルできます。

Notifications.cancelAllScheduledNotificationsAsync();

ローカルPush通知なので、設定値は AsyncStorage で端末に保存するように実装は完了です。 以下の画像のように指定した日時にPush通知を受信できるようになりました。