Push通知の実装をした後、すぐにExpo SDK38でexpo-notificationsが書き換わって、もろもろ書き換えてたら結構実装に時間がかかった
https://blog.expo.io/expo-sdk-38-is-now-available-ab6cd30ca2ee
対応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
アプリ
- Expo Pushトークンの保存 by wheatandcat · Pull Request #614 · wheatandcat/Peperomia · GitHub
- Push通知実装 by wheatandcat · Pull Request #653 · wheatandcat/Peperomia · GitHub
- Expo SDK 38にバージョンアップ by wheatandcat · Pull Request #654 · wheatandcat/Peperomia · 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を取得
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#/
webにテスト用のPush通知を送るデバック機能を実装
ユーザーにadminの権限を制御追加してPush通知を送るデバック機能を実装
https://github.com/wheatandcat/PeperomiaWeb/pull/36/files
アプリでPush通知から画面遷移する機能を実装
アプリで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]);
こんな感じで動きます
backendでカレンダー情報をもとにPush通知を送る
当日のスケジュールをPush通知を送信する
https://github.com/wheatandcat/PeperomiaBackend/pull/15
このAPIをcron.yamlに設定して定期的に実行しています
ガチでやるならPush通知の処理はのCloud Tasksに送ると良さそうです（これは後で試してみます）
ここまでやって、やっとやりたいことが実装できました 。実装量多くて時間がかかった
