js-expo
プッシュ通知 (Expo)¶
FCMの設定 (Android)¶
FCMの設定 (Android) を参考に、Firebaseプロジェクトの設定を行ってください。
APNs証明書の設定 (iOS)¶
APNs証明書の設定 (iOS) を参考に、APNs証明書をRepro管理画面に登録してください。
React Native Firebase をインストールする (Android)¶
Repro ではプッシュ通知を受信する際、Android 環境では Firebase Cloud Messaging を利用しています。 この利用のため、React Native Firebase を導入してください。
npm install @react-native-firebase/app
npm install @react-native-firebase/messaging
導入方法の詳細は以下を参考にしてください。
React Native Firebase の設定 (iOSプロジェクトを含む場合)¶
Android および iOS のプロジェクトを同時に開発している場合のみ、以下の設定を行ってください。
expo-build-properties をインストールしてください。
npx expo install expo-build-properties
また、 app.json 内に以下の項目を追加してください。
{
"expo": {
"plugins": [
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
],
]
}
}
チャネルの設定を追加する (Android)¶
app.json ファイルを編集する を参考に、app.json ファイルにプッシュ通知のチャネルの設定を追加してください。
また必要に応じてその他の項目も設定してください。
google-services.json ファイルを配置する (Android)¶
FCMの設定 (Android) を参考に、Firebase Console から google-services.json ファイルをダウンロードしてください。
次に、ダウンロードした google-services.json ファイルをプロジェクトの assets ディレクトリにコピーしてください。
その後、プロジェクト内 app.json の expo.android に "googleServicesFile": "./assets/google-services.json" を追記してください。
{
"expo": {
"android": {
"googleServicesFile": "./assets/google-services.json"
}
}
}
Expo Notifications をインストールする (iOS/Android)¶
プロジェクトに対し、以下の通り Expo Notifications をインストールしてください。
npx expo install expo-notifications
Entitlementsの設定を行う (iOS)¶
プロジェクト内 app.json の expo.ios に "entitlements": "aps-environment" を追記してください。
aps-environment の値は環境によって適宜変更してください。
{
"expo": {
"ios": {
"entitlements": {
"aps-environment": "development"
}
}
}
}
プッシュトークンをReproに送信する処理を実装する (iOS/Android)¶
プッシュ通知の宛先を指定するためにプッシュトークンをReproに送信します。
デバイストークンを取得する処理を追加し、 Repro.setPushToken を利用し値をセットしてください。
import { useEffect } from 'react';
import * as Notifications from 'expo-notifications';
import Repro from 'react-native-repro';
...
useEffect(() => {
Notifications.getDevicePushTokenAsync().then(token => {
Repro.setPushToken(token.data);
})
.catch((e) => {
...
});
...
});