プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【react-native】FirebaseのFCMでpush通知をする方法

はじめに

このあたりの知見が全くない方向け。
Firebaseすごいってよく聞くけど触ってなかった方や、react-nativeでのpush通知の仕組みがよくわかってない方など。

push通知とは

アプリ内通知であれば普通にイメージが湧きますが、端末への通知ってどうすれば?となったときに、いろいろよしなにしてくれるのがFirebase。

使うモジュールについて

Firebaseのアプリ内通知のことは「FCM(Firebase Cloud Messaging)」と呼ばれていて、これを使うことで端末へのpush通知ができる。

おおまかに書くと、アプリ側で必要な処理は以下の2つ。

・アプリ起動時に端末のトークンをサーバーサイドに保存する処理
・通知を受け取ったときの処理

使用するパッケージを調べてみると「react-native-fcm」と「react-native-firebase」が見つかるが、前者は現時点でもう2年以上メンテナンスされていなく、非推奨とされています。react-native-fcmでできることは全てreact-native-firebaseで済むのでそっちをチェックしてねと書いてあるので後者を使う。

既存プロジェクトで前者が使われてることなどもあると思うので注意。ゆくゆくは移行が必要。

iOS用、Android用のプロジェクト設定

npmのreact-native-firebaseをインストールしたのち、iOS用、Android用の各ソースに依存関係等の設定を追記してあげる必要があります。

各ソースへの設定は以下の記事が大変参考になりました。
https://dev-yakuza.github.io/react-native/react-native-firebase-fcm

ReacNativeのソースの記述

react-native側の記述は以下の記事が参考になりました。
https://qiita.com/mildsummer/items/0ace4fcc9f1609713fec

やってみた所感

思った以上にハマりどころがなかったです。
もっとビルドでコケたりなんだりというのが起こるかと思っていましたが。

ただ、細かい操作(アプリ外から通知を開いた際、アプリ内から通知を開いた際)などの処理はまだ追えていないという部分はあります。