🚀
ReactNative(EXPO)でチャットの通知機能の作り方
まずは、packageのインストール
expo install expo-notification
次に通知の許可申請を行い、ユーザーのpushTokenをDBに格納する
※実機でないとpushTokenDataが取得できないので注意。
import * as Notifications from "expo-notifications";
useEffect(() => {
const configurePushNotifications = async () => {
const { status } = await Notifications.getPermissionsAsync();
let finalStatus = status;
if (status !== "granted") {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== "granted") {
return;
}
const pushTokenData = await Notifications.getExpoPushTokenAsync();
//supabaseを使っているので、profileにexpoのtokenを格納
const { error } = await supabase
.from("profile")
.update([{ notification_token: pushTokenData.data }])
.eq("user_id", user?.user?.id);
if (error) {
Alert.alert("Error", error.message);
return;
}
};
configurePushNotifications();
if (Platform.OS === "android") {
Notifications.setNotificationChannelAsync("default", {
name: "default",
importance: Notifications.AndroidImportance.DEFAULT,
vibrationPattern: [0, 250, 250, 250],
lightColor: "#FF231F7C",
});
}
}, []);
logに出たExponentPushToken[_846319chqvicvqayicqetqiucvqi]などをhttps://expo.dev/notifications
に記載する。
これでpush notificationを押せば、ひとまずexpoの通知を受け取れる。
チャットを送信するときに相手に通知を行う
やることは
- 該当ユーザーのpushTokenを取得する
- そのpushTokenを何らかのトリガーのタイミングで送る。(今回の場合はチャットでメッセージを送信する際に送る)
//該当ユーザーのtokenを取得する
useEffect(() => {
const fetchOppositeUserToken = async () => {
const { data: token, error } = await supabase
.from("profile")
.select("notification_token")
.eq("user_id", user_id);
setOppositeUserToken(token[0].notification_token);
};
fetchOppositeUserToken();
}, []);
//該当のユーザーのtokenがnullの可能性があるので存在した場合のみ。
if (oppositeUserToken) {
fetch("https://exp.host/--/api/v2/push/send", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
to: oppositeUserToken,
title: nickName,
body: messages[0].text,
data: {
screenName: "Chat",
params: {
user_id: user?.user?.id,
nickname: props.route.params.nickname,
image: props.route.params.image,
},
},
}),
});
}
上記のように設定すると受け取る側は下記のように通知が送られます！
通知を受け取ったユーザーがその通知をクリックし、該当の画面へ遷移する
受け取った側が対象の画面に行くにはdataの中の情報を追記しなければなりません。
stacknavigatorで設定したscreenNameと該当の画面で必要とされるpropsもここに記載しなければクラッシュします。
body: JSON.stringify({
to: oppositeUserToken,
title: nickName,
body: messages[0].text,
data: {
screenName: "Chat",
params: {
user_id: user?.user?.id,
nickname: props.route.params.nickname,
image: props.route.params.image,
},
},
}),
という感じで簡単に通知は設定できます。
個人サービスで旅行マッチングアプリを作ってます！
旅行にご興味あれば登録してみてください！！
Travel Patch
Discussion