ReactNative で Firebase を利用し push notification を送る方法について紹介します。
構成
環境
- Android 7.1.1
- iOS 10.3.1
- Android Studio 2.3.2
- XCode 8.3.3
利用サービス
- Firebase
利用ライブラリ
- react-native-fcm
実装
Firebase の登録
以下のマニュアルにそって登録します。
Android用とiOS用をともに作成してください。
「Android パッケージ名」と「iOS バンドル ID」に入る「com.example.app」の部分は自分自身が作成しているアプリのものと同じものにしてください。
設定ファイルがそれぞれ作成されるのでダウンロードしておきます。
証明書の準備
Android
とくにありません。
iOS
以下のマニュアルにそって準備します。
example.p12について以下の手順で設定します。
- Firebase のプロジェクトの「設定」「クラウド メッセージング」から「iOS アプリの設定」で対象のアプリケーションを選択し「APNs 証明書」で「開発用 APNs 証明書」を設定します。
example.mobileprovisionについて以下の手順で設定します。
-
path/to/ios/example.xcodeprojを開く - General の Signing の Automatically manage Signing のチェックを外す
- 以下に
example.mobileprovisionを import する- General の Signing(Debug)
- General の Signing(Release)
- Build Settings の Signing の Code Signing Identity の項目をすべて Certificates された iOS Developer の設定に変更する
-
Cleanで確認する -
Buildで確認する
react-native-fcm の利用
以下のマニュアルにそって利用します。
以下の項目はすべて設定/実装しなければいけません。
- Installation
- Configure Firebase Console
- Android Configuration
- Config for notification and click_action in Android
- IOS Configuration
- Usage
※注1 僕はreact-native link react-native-fcmを実行すればもう何もしなくてもいいのでは……と思い込んでおりハマってしまいました
※注2 場合によってはreact-native link react-native-fcmした際に他のライブラリのリンク内容が上書きされて消されることがあるので、導入時に挙動がおかしくなった場合は差分を確認してみましょう
実行確認
Android
- 動作環境 エミュレーター
- 通知は届きます
- 動作環境 実機
- 通知は届きます
- アプリケーションを起動します（デバッグ実行します）
- アプリケーションをバックグラウンド状態にします（ホームボタンを押すなど）
- Firebase からメッセージを送信します
- メッセージが通知されます
- 通知部分にドロイド君が表示されてメッセージが通知されます
iOS
- 動作環境 エミュレーター
- 通知は届きません
- 動作環境 実機
- 通知は届きます
- アプリケーションを起動します（デバッグ実行します）
- プッシュ通知の許可を求められるので許可します
- Firebase からメッセージを送信します
- メッセージが通知されます
以上になります。
僕はアプリ開発に不慣れなこともあり、いろいろとつらみがありました（笑）
○○がわからない、○○にひっかかる、などあれば、なんなりとコメントどうぞ:)