웹앱 서비스 푸시 알림 배너 클릭 시, 해당 게시물 페이지 딥링크 관련 질문 [React Native]

Question

푸시 알림 기능 개발을 처음 해봐서 질문합니다.웹앱 서비스서 유저가 작성한 게시물에 좋아요가 눌리거나, 코멘트가 달려 해당 유저에게 알림이 갈 때, 유저가 기기에서 알림 배너를 누르면 웹앱이 실행되면서 웹뷰에서 좋아요가 눌리거나, 코멘트가 달린 페이지로 이동이 되도록 딥링크를 구현하고자 하는데 백엔드에서 알림을 보낼때 data에 url은 담아서 같이 보내지 않는 상황인데 어떻게 하면 알림 배너를 클릭시 해당 게시물 페이지로 이동이 되도록 할 수 있을까요??Background Message received: { "messageId": "1759674787118690", "data": { "deep_link": "123", "click_action": "qna", "time": "1759707186", "title": "test", "body": "tset" }, "contentAvailable": true, "notification": { "body": "tset", "sound": "default", "title": "test" }, "from": "105344699730" }데이터는 윗 로그처럼 와서 click_action이 게시물 분류(blog, qna 등), deep_link가 해당 게시물의 id(게시물을 작성한 유저 id x)를 사용해서 구현해야 될거 같은데 어떤 방법으로 구현해야 될지 잘 모르겠어서 질문합니다.FCM과 연동하여 expo에서 지원하는 expo-notifications 모듈을 사용하여 개발하고 있습니다.

Ganymede Ganymedian · Answer

한줄로 대답해 드리자면, 페이로드의 데이터를 파싱해서 리다이랙션 해주는 게 최선입니다.Expo Notification 에 data 를 포함해 전송하는 것 까지는 잘 하셨는데,data payload 를 처리하는 건 앱에서 처리해줘야 합니다.하지만 앱의 상태,foreground,background,terminated각각에 대해 처리해야 할 코드를 추가해줘야 합니다.이 작업을 담당하는 Provider 를 최대한 상위 레벨 스코프에서 추가해줘야 합니다.도움이 될 지는 모르겠습니다만, 마침 제가 공부하고 정리중인 프로젝트의 미완의 레포가 있어서 해당 프로바이더의 코드를 추가합니다.https://github.com/KangWoosung/Expo-Chat-Notification/blob/main/contexts/NotificationProvider.tsx요점은, deel_link 에 해당하는 URL 을 찾아서 redirect 해주는 겁니다.제 코드는 이렇습니다. /** When the user taps the notification */ responseListener.current = Notifications.addNotificationResponseReceivedListener((response) => { const data = response.notification.request.content.data; // Handle the deepLink if (data?.deepLink) { Linking.openURL(data.deepLink); } });

Ganymede Ganymedian · Answer

1.payload 는 일반적인 용어로, API 요청시 함께 전달되는 데이터, 콜백 펑션에 함께 전달되는 데이터, reducer 에 전달되는 데이터 등입니다.글쓴 님의 경우, Background Message received로 찍힌 전체 데이터가 payload 이고,api 에 따라, payload.data.deep_link 또는, received.data.deep_link 등으로 목적 데이터에 접근할 수 있습니다.2.terminated 는 앱 비정상 크래시, 배터리 방전, 기타 디바이스 불능 상태로, OS 에서 앱의 state 를 판별할 수 없는 상태를 말합니다. 기종에 따라, 리붓 직후도 포함됩니다.3.Linking.openURL(data.deepLink);이 코드가 리다이랙센 코드인에요..RN-Expo 프로젝트에서는 보통 expo-router 를 쓰고, router.push(target)을 쓰지만, 말씀하신 케이스에 대해서는, 스코프 문제가 있습니다. router 를 쓸 수 없는 곳에서 리다이렉션 처리를 해야 하는 상황이기 때문에, 또다른 라이브러리인, expo-linking 을 사용했던 겁니다.리다이렉션, 라우팅이 안되는 프레임워크는 없겠죠.리다이렉션을, 현재 코드로 보면 파라메터 만으로 처리하신 것 같은데, 전체 url 로 처리해서 expo 에 전달해보는 게 좋을 것 같습니다.예를 들어서,"deep_link": "YOUR_APP_NAME://app/landingPage/123",이렇게 말이죠.제 조언은 여기까지로 하죠. 즐거운 추석 되기실...

jtop · Answer

@Ganymede Ganymedian 현재 저는 expo 환경에서 react-navigation을 이용하여 스크린 구성 및 라우팅 처리 하도록 구현했는데 이런경우에는 어떻게 처리하면 될까요?관련 코드 공유합니다.index.tsimport { registerRootComponent } from "expo"; import messaging from "@react-native-firebase/messaging"; import "expo-dev-client"; import * as Notifications from "expo-notifications"; import App from "./App"; // background message handler messaging().setBackgroundMessageHandler(async (remoteMessage) => { console.log( "Background Message received:", JSON.stringify(remoteMessage, null, 5) ); }); // foreground message handler messaging().onMessage(async (remoteMessage) => { console.log( "Foreground Message received:", JSON.stringify(remoteMessage, null, 5) ); await Notifications.scheduleNotificationAsync({ content: { title: remoteMessage.notification?.title, body: remoteMessage.notification?.body, data: remoteMessage.data, sound: "default", priority: Notifications.AndroidNotificationPriority.MAX, }, trigger: null, }); }); // registerRootComponent calls AppRegistry.registerComponent('main', () => App); // It also ensures that whether you load the app in Expo Go or in a native build, // the environment is set up appropriately registerRootComponent(App);getFcmToken.tsimport crashlytics from "@react-native-firebase/crashlytics"; import messaging from "@react-native-firebase/messaging"; import requestNotificationPermission from "./requestNotificationPermission"; const getFcmToken = async () => { try { const hasPermission = await requestNotificationPermission(); if (!hasPermission) { console.log("No permission for push notifications"); return; } const fcmToken = await messaging().getToken(); return fcmToken; } catch (error) { crashlytics().recordError(error as Error); console.log("FCM Token 발급 오류: ", error); } }; export default getFcmToken; requestNotificationPermission.tsimport messaging from "@react-native-firebase/messaging"; import { Platform } from "react-native"; const requestNotificationPermission = async () => { if (Platform.OS === "ios") { const authStatus = await messaging().requestPermission(); const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL; if (enabled) { console.log("Authorization status:", authStatus); } return enabled; } return true; }; export default requestNotificationPermission; App.tsx SplashScreen.preventAutoHideAsync(); SplashScreen.setOptions({ duration: 1000, fade: true, }); Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldShowAlert: true, shouldPlaySound: true, shouldSetBadge: true, }), }); const Stack = createStackNavigator(); function App() { // Logic const KAKAO_NATIVE_APP_KEY = process.env.EXPO_PUBLIC_KAKAO_NATIVE_APP_KEY; const GOOGLE_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID; const navigationRef = useNavigationContainerRef(); const routeNameRef = useRef(null); const [firstLaunch, setFirstLaunch] = useState(null); const [appIsReady, setAppIsReady] = useState(false); useEffect(() => { const init = async () => { if (!KAKAO_NATIVE_APP_KEY) { return; } if (!GOOGLE_CLIENT_ID) { return; } try { initializeKakaoSDK(KAKAO_NATIVE_APP_KEY); GoogleSignin.configure({ iosClientId: GOOGLE_CLIENT_ID }); await new Promise((resolve) => setTimeout(resolve, 2000)); } catch (error) { console.warn(error); } finally { setAppIsReady(true); } }; init(); }, []); const onLayoutRootView = useCallback(() => { SplashScreen.hideAsync(); }, [appIsReady]); useEffect(() => { AsyncStorage.getItem("launched").then((value) => { if (value === null) { AsyncStorage.setItem("launched", "true"); setFirstLaunch(true); } else { setFirstLaunch(false); } }); }, []); useEffect(() => { async function initNotifications() { if (Device.isDevice) { // 권한 확인 및 요청 const { status: existingStatus } = await Notifications.getPermissionsAsync(); let finalStatus = existingStatus; if (existingStatus !== "granted") { const { status } = await Notifications.requestPermissionsAsync(); finalStatus = status; } if (finalStatus !== "granted") { console.log("알림 권한 거부됨"); return; } // Android 알림 채널 생성 if (Platform.OS === "android") { await Notifications.setNotificationChannelAsync("default", { name: "default", importance: Notifications.AndroidImportance.MAX, vibrationPattern: [0, 250, 250, 250], lightColor: "#6952F9", }); } } else { console.log("실기기에서만 알림 작동"); } } initNotifications(); }, []); if (!appIsReady) { return null; } if (firstLaunch == null) { return null; } /* * 어플 실행이 처음인 경우: Onboarding * 어플 실행이 처음이 아닌 경우: WebView */ // View return ( { if (navigationRef.current) { routeNameRef.current = navigationRef.current.getCurrentRoute()?.name || "WebView"; } }} onStateChange={async () => { if (!navigationRef.current) return; const previousRouteName = routeNameRef.current; const currentRoute = navigationRef.current.getCurrentRoute(); if (!currentRoute || !currentRoute.name) return; const currentRouteName = currentRoute.name; if (previousRouteName !== currentRouteName) { const analytics = getAnalytics(); await logScreenView(analytics, { screen_name: currentRouteName, screen_class: currentRouteName, }); } routeNameRef.current = currentRouteName; }} > ); } export default HotUpdater.wrap({ source: getUpdateSource( "https://hot-updater-bbtqvmqjxq-du.a.run.app/api/check-update", { updateStrategy: "fingerprint", } ), fallbackComponent: ({ progress, status }) => ( {/* You can put a splash image here. */} {status === "UPDATING" ? "Updating..." : "Checking for Update..."} {progress > 0 ? ( {Math.round(progress * 100)}% ) : null} ), })(App); WebViewScreen.tsx const deviceHeight = Dimensions.get("window").height; const deviceWidth = Dimensions.get("window").width; const WebViewScreen = () => { // Logic const webviewURL = process.env.EXPO_PUBLIC_WEB_URL; const navigation = useNavigation>(); const [navState, setNavState] = useState(); const webviewRef = useRef(null); const onMessage = async (event: WebViewMessageEvent) => { try { const message = JSON.parse(event.nativeEvent.data); console.log(message); switch (message.action) { case "getAlbum": let limit = 1; switch (message.type) { case "Blog": limit = 10; break; case "Q&A": limit = 5; break; case "Profile": default: limit = 1; } navigation.navigate("Album", { limit, webviewRef }); break; case "getSocialLogin": switch (message.type) { case "Kakao": await handleKakaoLogin(webviewRef); break; case "Google": await handleGoogleLogin(webviewRef); break; case "Apple": await handleAppleLogin(webviewRef); break; } break; case "requestFcmToken": const fcmToken = await getFcmToken(); if (!fcmToken) { console.log("fcmToken 발급 x"); return; } webviewRef.current?.postMessage( JSON.stringify({ type: "fcmTokenReady", token: fcmToken, }) ); break; case "shareContent": await shareContent(message.title, message.url, message.imageUrl); break; default: break; } } catch (error) { crashlytics().recordError(error as Error); console.error("onMessage 에러:", error); } }; useEffect(() => { const cangoBack = navState?.canGoBack; const onPress = () => { if (cangoBack) { webviewRef.current?.goBack(); return true; } else { Alert.alert( "K-Buddy", "Are you sure you want to close the app?", [ { text: "Cancel", style: "cancel", onPress: () => {}, }, { text: "Yes", style: "destructive", onPress: () => BackHandler.exitApp(), }, ], { cancelable: true } ); return true; } }; BackHandler.addEventListener("hardwareBackPress", onPress); return () => { BackHandler.removeEventListener("hardwareBackPress", onPress); }; }, [navState?.canGoBack]); // View return ( { webviewRef.current?.reload(); }} onNavigationStateChange={(navState: WebViewNavigation) => { setNavState(navState); }} /> ); }; const styles = StyleSheet.create({ webview: { flex: 1, width: deviceWidth, height: deviceHeight, }, }); export default WebViewScreen;

Ganymede Ganymedian · Answer

Native Push Notification 은,FCM, APNs 두 메인 마켓플레이스의 오피셜 서비스 API 에 요청하는 방법,그리고 이를 대행해주는 무료 API 인 Expo Notification 서버에 요청하는 방법,이렇게 두가지가 있습니다. 유료 상용 서비스도 있지만 논외로합시다. 그리고, Notification 은 아직 원칙적으로 무료..-Apple 개발자계정비용 100$/y- 로 유지되고 있습니다.2번 방법을 사용한다고 해도, FCM, APNs 에 개발자가 직접 계정과 앱 등록, 설정등을 완료해줘야 한다는 조건은 같습니다. 즉, FCM, APNs 에 인증과 설정이 완료된 앱의 식별 키를 Expo 서버에 등록한다는 개념이라고 이해하면 될 것 같습니다. Expo 가 게이트웨이가 되긴 하지만, App--FCM/APNs 간 신용관계는 미리 해결되어 있다는 설정인 것이죠.Expo Notification 서버는, ‘한 곳에서 일원화 관리’ 라는 장점과 편리함을 제공한다는 점만 다를 뿐입니다.FCM, APNs 모두, 앱 ID, 디바이스 ID 를 관리하고 토큰을 발행합니다. 그리고 Expo 역시 push_token 이라는 걸 자체적으로 디바이스에게 발행해주는데, push_token 이 바로, ‘앱-디바이스’ 의 식별 토큰이기도 하고 타겟 어드레스이기도 합니다.환경이 Expo 라면, Expo Notification 을 이용하시는 게 좋습니다. 개발 작업에 레이어 하나가 추가되긴 하지만, 하나의 단점을 수많은 장점이 커버하고도 남음이 있습니다. 일단 디바이스의 push_token 을 확보한다면 Web 에서 테스트 노티피케이션을 날려볼 수도 있습니다.https://expo.dev/notifications.보여주신 index.ts 로만 봐서는 FCM 과 Expo Notification 이 혼재되어 있는데…. Notification 에 대한 개념 정리가 아직 부족한 것 같습니다. 어떤 의도로 짜여진 코드인지 이해하기 어렵습니다. 노티피케이션 트리거는 Expo.Notification 인데, 정작 Expo Notification 에 필요한 push_token 이 보이지 않습니다.그리고, 코드 모두를 제가 도저히 알아볼 수가 없을 것 같습니다. 전체적으로 이해가 부족한 상태에서 사용된 코드로 보이는데, 황금연휴의 한 가운데인 저녁에, 코드 표현 조차 지원되지 않는 게시판에서, 굳이 제 뇌의 메모리를 두배 이상 소모하면서, 읽고싶다는 생각이 들지는 않습니다. 제게 노력을 요구하기 보다는, 제가 앞서 올려드린 제 레포지토리의 프로바이더.. NotificationProvider.tsx 를 읽고 이해하려는 노력이 더 값질 것 같다는 생각이 듭니다. 프로바이더에는, push_token 을 확보하고, 로컬스토리지에 캐시하고, DB 에 저장하는 코드까지 구현되어 있습니다.실제로 Expo Notification Server 에 노티피케이션을 전송하는 코드는, 단순한 fetch 와 PAYLOAD 일 뿐입니다. 생각보다 단순합니다.제 레포지토리에서는, pending 테이블을 두고, Supabase 에서 엣지 펑션으로 스케쥴 타임 인터벌, 15초~30초 단위로 전송하는 방식을 택하고 있습니다. 전송코드가 Supabase 의 엣지 펑션에 위치하고 있기 때문에 코드베이스에는 노티피케이션 전송 코드가 원래 없습니다만, 미래에도 이해하기 위해서 /db/edgeFunctions 에 해당 엣지 펑션들의 코드를 남겨 두었습니다. 이 모듈들은 코드베이스에서 사용되지는 않습니다.그리고, 잔소리로 들릴 수 있겠지만, 노티피케이션을 실시간으로 열어두는 건, 옳지 않습니다. 악의적이거나 반복적인 이벤트 발생이, 또다른 사용자의 네거티브 경험을 만들 수 있습니다. 카톡 노티피케이션이 밀리초단위로 들어오는 경험은 원천적으로 없죠. 이런 이유로, 특별한 경우가 아니라면 펜딩 테이블을 두고 노티피케이션을 구현하는 것이 맞습니다. 이 외에도, 노티피케이션과 관련한 문제들이 좀 더 있습니다. 그리고 이런 문제들은 난이도도 좀 높은 편입니다..

웹앱 서비스 푸시 알림 배너 클릭 시, 해당 게시물 페이지 딥링크 관련 질문 [React Native]

4개의 답변

#push-notification 목록