プッシュ通知を受信する
iOSで画像などを添付したプッシュ通知に対応する場合
画像や動画などを添付したリッチプッシュ通知に対応するにはExtensionの作成が必要です。
詳しくは リッチプッシュ通知に対応する をご覧ください。
前提条件
事前に、 @react-native-karte/core
パッケージの導入を行う必要があります。
KARTE ではプッシュ通知の送信に、Firebase Cloud Messaging(以下FCM)を利用しています。
そのためFCM経由でプッシュ通知を送信するための各種設定を行う必要があります。
また受信側のアプリケーションでもFirebaseライブラリの導入などの対応が必要となります。
なお本ドキュメントでは、React Native Firebase を利用する前提で説明します。
これ以外のライブラリを利用する場合は、読み替えた上で導入を行ってください。
導入手順
STEP1: React Native Firebase を導入する
- SDKを導入する
導入に関しては、下記ドキュメントをご覧ください。
- Notification Composer で通知のテストを行う
Firebase の Notification Composer から通知メッセージを送信し、メッセージが受信できるか確認してください。
Send a notification message
STEP2: サービスアカウントの設定を行う
KARTEからFCMに対して通知の送信リクエストを行うために、KARTE側にサービスアカウントの設定を行う必要があります。
サービスアカウントを設定する
STEP3: React Native KARTE Notification を導入する
共通
npm または yarn を利用して @react-native-karte/notification
パッケージをインストールしてください。
npm install --save @react-native-karte/notification
yarn add @react-native-karte/notification
パッケージのインストールが完了したら、対応するプラットフォーム毎の導入手順に従い設定を進めてください。
iOS
Pod をインストールしてください。
npx pod-install ios
Android
導入にあたり必要な手順はありません。
STEP4: FCMトークンを送信する
KARTE からプッシュ通知を送信するためには、FCMトークンが必要となります。
そのためアプリケーションからKARTEにFCMトークンを送信する処理を実装します。
import { Notification } from '@react-native-karte/notification';
export default function App() {
React.useEffect(() => {
messaging()
.getToken()
.then((fcmToken) => {
// 取得したトークンをKARTEに送信
Notification.registerFCMToken(fcmToken);
})
.catch((e) => {
console.error(e);
});
messaging().onTokenRefresh((fcmToken) => {
// 更新されたトークンをKARTEに送信
Notification.registerFCMToken(fcmToken);
});
});
// ...
}
STEP5: プラットフォーム毎の実装
iOSの場合
受信したプッシュ通知をタップ(開封)した際、通知メッセージに含まれているリンクを開くためには下記の実装が必要となります。
※iOSではsetBackgroundMessageHandler
がトリガーされないため、アプリ未起動時(quit状態)では下記形式の実装が必要です
https://rnfirebase.io/messaging/usage#ios-background-limitation
import { Notification } from '@react-native-karte/notification';
export default function App() {
React.useEffect(() => {
// アプリ未起動状態から通知が開かれた際の処理
messaging()
.getInitialNotification()
.then((remoteMessage) => {
if (remoteMessage) {
const notification = Notification.create(remoteMessage);
if (notification) {
notification.handle();
}
}
});
// アプリ起動状態から通知が開かれた際の処理
messaging().onNotificationOpenedApp((remoteMessage) => {
if (remoteMessage) {
const notification = Notification.create(remoteMessage);
if (notification) {
notification.handle();
}
}
});
});
// ...
}
foreground時に受信した際に通知が表示されない場合
RNFBMessagingライブラリの実装・仕様の影響で、アプリがforegroundの際にKARTEの通知が自動で表示されないケースがあります。
その際はAndroid同様、onMessage
コールバックをハンドルし、ローカル通知を表示する必要があります。
import { Notification } from '@react-native-karte/notification';
export default function App() {
React.useEffect(() => {
messaging().onMessage((remoteMessage) => {
if (remoteMessage) {
const notification = Notification.create(remoteMessage);
if (notification) {
// ここでローカル通知を用いた表示を行います。
}
}
});
});
// ...
}
受信時のリンク遷移を制御したい場合
Universal Links等への対応でリンク遷移を制御したい場合には、独自にハンドリング処理を記述する必要があります。
※notification.hundle()
を呼び出す場合、内部的にUIApplication.openURL()を呼び出す形式となり、ブラウザに遷移します
import { Notification } from '@react-native-karte/notification';
export default function App() {
React.useEffect(() => {
// アプリ未起動状態から通知が開かれた際の処理
messaging()
.getInitialNotification()
.then((remoteMessage) => {
if (remoteMessage) {
const notification = Notification.create(remoteMessage);
if (notification) {
if (notification.url?.startsWith('https://example.com')) {
// 対応する画面を開く処理を書く
} else {
notification.handle();
}
}
}
});
// アプリ起動状態から通知が開かれた際の処理
messaging().onNotificationOpenedApp((remoteMessage) => {
if (remoteMessage) {
const notification = Notification.create(remoteMessage);
if (notification) {
if (notification.url?.startsWith('https://example.com')) {
// 対応する画面を開く処理を書く
} else {
notification.handle();
}
}
}
});
});
// ...
}
Androidの場合
KARTEから送信されるメッセージはデータメッセージとして送信されます。
データメッセージのため、アプリの状態(foreground / background)によって実装する処理が異なります。
※quit状態もbackgroundと同様のsetBackgroundMessageHandler
のハンドラで検知可能です。
https://rnfirebase.io/messaging/usage#message-handlers
foreground時に受信する場合の実装
import { Notification } from '@react-native-karte/notification';
export default function App() {
React.useEffect(() => {
messaging().onMessage((remoteMessage) => {
if (remoteMessage) {
const notification = Notification.create(remoteMessage);
if (notification) {
notification.show();
}
}
});
});
// ...
}
background時に受信する場合の実装
実装上の注意事項等については、React Native Firebaseのドキュメント もご確認ください。
import { Notification } from '@react-native-karte/notification';
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
const notification = Notification.create(remoteMessage);
if (notification) {
notification.show();
}
});
動作確認
最後に正しく導入が行われているか確認を行うためにテストメッセージを送信して確認を行います。
詳細については、下記ドキュメントをご覧ください。
テストメッセージを送信する
Updated 24 days ago