React Native Cloud Messaging

React NativeにてCloud Messagingの実装方法についてまとめます。

概要

この記事は公式サイト を参考に作成したものであるため、 公式サイトの副読本として読むことを推奨する。

インストール

このモジュールを使用するためには @react-native-firebase/app がすでに設定されている必要がある。 この app モジュールをインストールするためには、 公式サイト を参照してほしい。

# appモジュールのインストール
yarn add @react-native-firebase/app

# messagingモジュールのインストール
yarn add @react-native-firebase/messaging

# podのインストール
npx pod-install

 このモジュールの役割

React Native Firebase はAndroidとiOS両方のためにFirebase Cloud Messaging(FCM) をネイティブで使用できる機能を提供する。 FCMはコストが発生しないサービスで、サーバーとデバイス間またはデバイスとデバイス間の通信を可能にする。 そしてこの React Native Firebase MessagingモジュールはFCMを使用するための簡潔なJavaScript API を提供する。

またこのモジュールでは基本的なローカルプッシュ通知もサポートしている。

使用方法

iOS パーミッションの設定

iOS ではユーザーが明示的に通知を許可しない限り、notification(またはalert)を含んだペイロードが送られてきても通知を表示することはできない。 このモジュールでは requestPermission というユーザーへパーミッションの許可を確認するためのダイアログを表示する関数を提供している。

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
}

Androidではパーミッションを必要としないため、Androidでこの関数を呼び出しても常に成功(パーミッション済み)を返す。

メッセージの受信

FCM メッセージは実機の

FCM messages can be sent to real Android/iOS devices and Android emulators (iOS simulators however do not handle cloud messages) via a number of methods (see below). A message is simply a payload of data which can be used however you see fit within your application.

Common use-cases for handling messages could be:

©Tsurutan. All Rights Reserved.