개요

푸시 알림은 어떤 종류의 앱을 만들든 중요한 기능입니다. 새 앨범이 발매되거나, 세일이나 다른 제한된 시간 동안만 거래하거나, 친구 중 한 명이 메시지를 보냈던 등, 사용자에게 흥미를 줄 수 있는 어떤 것에 대해 알리는 것은 좋을 뿐만 아니라, 푸시 알림은 사용자 상호 작용을 증진시키고 전반적인 사용자 경험을 향상시키는 데 도움이 된다는 것이 입증 되었습니다.

관련 이벤트가 발생했을 때 사용자에게 알릴 수 있기를 원하든, 아니면 고객 참여 및 보존을 최적화하려고 하든 상관없이 Expo에서 푸시 알림을 구현하는 것이 매우 쉽습니다. 기본 기기 정보와 APNs(Apple Push Notification 서비스) 또는 FCM(Firebase Cloud Messaging)과 통신하는 모든 번거로움은 뒤에서 처리되므로 iOS와 안드로이드 알림을 동일하게 처리하여 프론트엔드 및 백엔드에서의 시간을 절약할 수 있습니다!

푸시 알림 설정에는 세 가지 주요 단계가 있으며, 프로세스의 각 부분에 대한 가이드를 제공합니다.

• 설정: 사용자 엑스포 푸시 토큰 가져오기
• 보내기: 알림을 보낼 때 토큰을 사용하여 엑스포의 푸시 API 호출
• 수신: 앱의 알림에 응답(열자마자 알림이 참조하는 특정 화면으로 이동)

사용

아래 snack은 expo 앱에서 푸시 알림을 등록, 전송 및 수신하는 방법에 대한 전체 예를 보여줍니다. 하지만 엑스포의 푸시 알림 서비스가 어떻게 작동하는지, 모범 사례가 무엇인지, 그리고 부딪히는 문제를 조사하는 방법을 이해할 수 있도록 안내서의 나머지 부분을 꼭 읽어보세요!

import Constants from 'expo-constants';
import * as Notifications from 'expo-notifications';
import React, { useState, useEffect, useRef } from 'react';
import { Text, View, Button, Platform } from 'react-native';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

export default function App() {
  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotificationsAsync().then(token => setExpoPushToken(token));

    // This listener is fired whenever a notification is received while the app is foregrounded
    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
      console.log(response);
    });

    return () => {
      Notifications.removeNotificationSubscription(notificationListener.current);
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-around',
      }}>
      <Text>Your expo push token: {expoPushToken}</Text>
      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
        <Text>Title: {notification && notification.request.content.title} </Text>
        <Text>Body: {notification && notification.request.content.body}</Text>
        <Text>Data: {notification && JSON.stringify(notification.request.content.data)}</Text>
      </View>
      <Button
        title="Press to Send Notification"
        onPress={async () => {
          await sendPushNotification(expoPushToken);
        }}
      />
    </View>
  );
}

// Can use this function below, OR use Expo's Push Notification Tool-> https://expo.dev/notifications
async function sendPushNotification(expoPushToken) {
  const message = {
    to: expoPushToken,
    sound: 'default',
    title: 'Original Title',
    body: 'And here is the body!',
    data: { someData: 'goes here' },
  };

  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Accept-encoding': 'gzip, deflate',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });
}

async function registerForPushNotificationsAsync() {
  let token;
  if (Constants.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);
  } else {
    alert('Must use physical device for Push Notifications');
  }

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

  return token;
}

테스트

물리적 장치에서 푸시 알림을 테스트하는 것이 좋습니다. iOS 시뮬레이터는 푸시 알림을 받을 수 없으며 Google Play Services가 설치되어 구성된 이미지를 실행하지 않는 한 안드로이드 에뮬레이터도 받을 수 없습니다. 또한 시뮬레이터에서 Notifications.Request permissionsAsync()를 호출하면 허용 여부에 관계없이 상태가 결정되지 않은 상태로 즉시 해결됩니다.

expo 푸시 알림 도구는 개발 중에 푸시 알림을 테스트하는 데도 유용합니다. 이를 통해 CLI를 사용하거나 테스트 서버를 작성할 필요 없이 장치에 테스트 알림을 쉽게 보낼 수 있습니다.