Expo 알림 수신 & 알림

hwakyungChoi·2021년 9월 22일

Expo expo-notification notification receiving

이제 앱에 알림을 보낼 수 있습니다! 당신이 원하는 것이 순전히 정보 제공이었다면, 여기서 멈출 수 있습니다. 그러나 엑스포에서는 알림에 따라 UI를 업데이트하거나 알림이 선택된 경우 특정 화면으로 이동할 수 있습니다.
Expo의 대부분의 경우와 마찬가지로 알림 처리도 모든 플랫폼에서 간단하고 간단합니다. 알림 API를 사용하여 수신기를 추가하기만 하면 됩니다.

import React from 'react';
import { Text, View } from 'react-native';
import * as Notifications from 'expo-notifications';

// This refers to the function defined earlier in this guide, in Push Notifications Set Up
import registerForPushNotificationsAsync from './registerForPushNotificationsAsync';

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

export default class App extends React.Component {
  state = {
    notification: {},
  };

  componentDidMount() {
    registerForPushNotificationsAsync();

    Notifications.addNotificationReceivedListener(this._handleNotification);
    
    Notifications.addNotificationResponseReceivedListener(this._handleNotificationResponse);
  }

  _handleNotification = notification => {
    this.setState({ notification: notification });
  };

  _handleNotificationResponse = response => {
    console.log(response);
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Your expo push token: {this.state.expoPushToken}</Text>
        <View style={{ alignItems: 'center', justifyContent: 'center' }}>
          <Text>Title: {this.state.notification.request.content.title}</Text>
          <Text>Body: {this.state.notification.request.content.body}</Text>
          <Text>Data: {JSON.stringify(this.state.notification.request.content.data)}</Text>
        </View>
      </View>
    );
  }
}

Foreground 알림 동작

중요 참고: 앱이 Foreground 되는 동안 알림이 수신될 때의 동작을 설정하려면 Notifications.setNotificationHandler을 사용합니다. 알콜백을 사용하여 다음과 같은 옵션을 설정할 수 있습니다.

shouldShowAlert
shouldPlaySound
shouldSetBadge

닫힌 알림 동작

안드로이드에서는 특정 OS 수준 설정(일반적으로 성능과 배터리 최적화 중심으로)을 설정하여 앱이 닫힐 때 알림이 전달되지 않도록 할 수 있습니다. 이러한 설정 중 하나는 OnePlus 장치의 "Deep Clear" 옵션입니다.

알림 이벤트 수신자

addNotificationReceivedListener 및 addNotificationRespeceivedListener를 사용하여 추가된 이벤트 수신자는 각각 알림을 받거나 상호 작용할 때 개체를 수신합니다. 이러한 개체에 대한 자세한 내용은 설명서를 참조하시길 바랍니다.
이를 위한 두 가지 subscription이 있으므로 앱이 열려 있거나 foreground되어 있는 동안 알림이 들어오는 경우와 앱이 백그라운드 또는 닫히는 동안 알림이 들어오는 경우 및 사용자가 알림을 탭하는 경우를 쉽게 해결할 수 있습니다.

알림

엑스포 알림은 푸시 알림 토큰을 가져오고 알림을 표시, 예약, 수신 및 응답할 수 있는 API를 제공합니다.

특징들

📣 일정 지정일 또는 향후 일정에 대한 일회성 알림
🔁 일정 시간 간격 내에 알림 반복 예약(또는 iOS의 달력 날짜 매치)
💯 애플리케이션 배지 아이콘 번호 가져오기 및 설정
📲 기본 장치 푸시 토큰을 가져와 FCM 및 APNs로 푸시 알림을 보내기
😎 Expo 푸시 토큰을 가져와 Expo와 함께 푸시 알림을 보내기
📬 전면 및 배경에서 수신 알림 청취
👆 알림으로 상호 작용 청취
🎛 앱이 포그라운드에 있을 때 알림 처리
🔕 알림 센터/트레이의 알림을 해제.
🗂 안드로이드 알림 채널 생성, 업데이트, 삭제,
🎨 안드로이드에서 알림에 사용할 사용자 지정 아이콘 및 색상을 설정

설치

expo install expo-notifications

bare React Native 앱에서 설치하는 경우 다음 추가 설치 지침도 따라야 합니다.

플러그인 설정 구성(옵션)

EAS 빌드를 사용하는 경우, 안드로이드 알림 아이콘과 색조를 설정하고, 사용자 지정 푸시 알림 소리를 추가하고, 엑스포 알림 구성 플러그인(구성 플러그인)을 사용하여 iOS 알림 환경을 설정할 수 있습니다. 설정하려면 아래와 같이 app.json 또는 app.config.js의 플러그인 배열에 구성 플러그인을 추가한 다음 앱을 다시 작성하시길 바랍니다.

{
  "expo": {
    ...
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./local/path/to/myNotificationIcon.png",
          "color": "#ffffff",
          "sounds": ["./local/path/to/mySound.wav", "./local/path/to/myOtherSound.wav"],
          "mode": "production"
        }
      ]
    ],
  }
}

안드로이드

안드로이드의 경우 이 모듈은 장치 부팅에 가입할 수 있는 권한이 필요합니다. 장치 시작(재) 직후 예약된 알림을 설정하는 데 사용됩니다. RECEIVE_BOOT_COMPLETED 권한이 자동으로 추가됩니다.
Expo Go 앱에서 프로젝트를 실행하지 않는 한 Expo로 만들어진 모든 관리형 워크플로우 안드로이드 앱에는 Firebase Cloud Messaging이 필요합니다. 사용자 자신의 FCM 자격 증명을 사용하여 푸시 알림을 받도록 엑스포 안드로이드 앱을 설정하려면 이 안내서를 자세히 따르시길 바랍니다.

일반적인 문제/알려진 문제

APNs 및 FCM을 통해 직접 알림 전송

Expo의 푸시 알림 서비스를 사용하지 않고 대신 Apple 및 Firebase와 직접 통신하려면 두 플랫폼에서 서로 다른 형식을 제공하면 예기치 않은 동작이 발생할 수 있으므로 페이로드 형식에 각별히 유의하면서 이 가이드를 자세히 읽어보아야 합니다.

iOS에서 푸시 토큰을 가져오는 데 오랜 시간이 소요됨

getDevicePushTokenAsync 및 getExpoPushTokenAsync는 iOS에서 확인하는 데 시간이 오래 걸릴 수 있습니다. 이는 애플의 "Push 알림 문제 해결" 기술 노트에 명시된 대로 엑스포 알림의 통제를 벗어난 것입니다.

이것이 반드시 오류 조건은 아닙니다. 이 시스템은 기지국이나 Wi-Fi 액세스 지점의 범위를 벗어나거나 비행기 모드일 수 있기 때문에 인터넷 연결이 전혀 되지 않을 수 있습니다. 이를 오류로 간주하는 대신 정상적으로 계속하여 푸시 알림에 의존하는 기능만 사용하지 않도록 설정해야 합니다.

앞서 언급한 바와 같이 이러한 문제의 가장 일반적인 원인은 잘못된 인터넷 연결(푸시 토큰을 가져오려면 인터넷 연결이 필요합니다) 또는 앱 ID 또는 프로비저닝 프로필의 잘못된 구성입니다.
여기 사람들이 이 문제를 해결했다고 주장하는 몇 가지 방법들이 있습니다. 아마도 이것들 중 하나가 여러분이 문제를 해결하는 데 도움이 될 것입니다!