対応PR

backend

Expo Pushのtokenを保存 by wheatandcat · Pull Request #8 · wheatandcat/PeperomiaBackend · GitHub
テスト用のPush通知APIを実装 by wheatandcat · Pull Request #11 · wheatandcat/PeperomiaBackend · GitHub
cron.yamlで当日のスケジュールをPush通知を送信する by wheatandcat · Pull Request #15 · wheatandcat/PeperomiaBackend · GitHub
ユーザーにロールを追加 by wheatandcat · Pull Request #17 · wheatandcat/PeperomiaBackend · GitHub

web

debug用のPush通知画面を作成 by wheatandcat · Pull Request #36 · wheatandcat/PeperomiaWeb · GitHub

アプリ

ExpoでのPush通知実装

ExpoでPush通知を使用する場合は、expo-notificationsを使用します。

Push Notifications - Expo Documentation

Push通知処理は画像の通りで大部分はExpo内に内包されているので、簡単に実装できます。

expoのpush notificationのsdkが各言語でサポートされているので、今回はGo言語を使用して実装しました。

GitHub - oliveroneill/exponent-server-sdk-golang: Exponent push notification go library

実装の流れ

アプリでExpo Push Tokenを取得

github.com

    if (!Constants.isDevice) {
      Alert.alert('端末から実行してくだださい');
      return false;
    }

    const { status: existingStatus } = await Permissions.getAsync(
      Permissions.NOTIFICATIONS
    );

    let finalStatus = existingStatus;
    if (existingStatus !== Permissions.PermissionStatus.GRANTED) {
      const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
      finalStatus = status;
    }

    if (finalStatus !== 'granted') {
      Alert.alert('Push通知のトークンの取得に失敗しました');
      return false;
    }

    const { data: token } = await Notifications.getExpoPushTokenAsync();

    if (Platform.OS === 'android') {
      Notifications.setNotificationChannelAsync('default', {
        name: 'default',
        importance: Notifications.AndroidImportance.MAX,
        vibrationPattern: [0, 250, 250, 250],
        lightColor: '#FF231F7C',
      });
    }

Notifications.getExpoPushTokenAsync() でPush通知に必要なトークンを取得できます。

backendでExpo Push Tokenを保存して、Push通知を実装

上記で取得したExpoPushTokenを保存して

https://github.com/wheatandcat/PeperomiaBackend/pull/8

テスト用のPush通知APIを実装

https://github.com/wheatandcat/PeperomiaBackend/pull/11

https://app.swaggerhub.com/apis-docs/wheatandcat/peperomia/1.0.0#/

f:id:wheatandcat:20200701190847p:plain

webにテスト用のPush通知を送るデバック機能を実装

ユーザーにadminの権限を制御追加してPush通知を送るデバック機能を実装

https://github.com/wheatandcat/PeperomiaWeb/pull/36/files

スクリーンショット 2020-06-25 21 15 43

IMG_FC212D7DA4B5-1

アプリでPush通知から画面遷移する機能を実装

https://github.com/wheatandcat/Peperomia/pull/653

さらに、Expo SDK 38で書き方が変わったので対応

https://github.com/wheatandcat/Peperomia/pull/654

以下、Push通知のリスナーを追加して、ハンドラーの先で画面遷移の処理を追加して実装

  React.useEffect(() => {
    const subscription1 = Notifications.addNotificationReceivedListener(
      handleNotificationReceived
    );
    const subscription2 = Notifications.addNotificationResponseReceivedListener(
      handleNotificationResponseReceived
    );

    return () => {
      subscription1.remove();
      subscription2.remove();
    };
  }, [handleNotificationReceived, handleNotificationResponseReceived]);

こんな感じで動きます