RoadMovie

write down memos or something I found about tech things

ReactNativeでプッシュ通知を実装する方法

この記事ではReactNativeでのプッシュ通知の実装方法を紹介したいと思います。


まず最初に全体の設計はこんな感じです。

Application

  • identifierをAPIサーバ(Backend)に送ります
  • AWS SNSから通知を受け取ります

Backend(ここでは例としてRailsを想定しています)

  • identifierをアプリから受け取ります
  • DBにidentifierを保存します ( endpoint_arn を保存しましょう)
  • endpoint_arn を登録して、トピックをサブスクライブします
  • いつ通知を送るのかをAWS SNSに教えます(cronなどでトリガーを用意するという意味です)

AWS SNS

  • endpoint_arn を保存します
  • トピックを作ります(ユーザーグループのようなものです)
  • 通知を送ります
    • 例えばAndroidアプリではFMC(firebase message cloud)を利用します

ライブラリ群

in ReactNative

アプリからidentifierを送る必要があります。ReactNativeではindex.android.jsindex.ios.jsに実装コードを書くのがよいのではないでしょうか。OS毎に設定が多少違うので、ここだとその差異を吸収しやすいと思います。

例としてスクリプトを載せておきます。

in Rails(Backend)

まず、aws-sdk-rails用にinitializerを用意するのが良いでしょう。


Controller内でidentifierを受け取るためのアクションを定義しておきましょう。もしそれが新規identifierであればAWS SNSに登録します。AWS SNSにリクエストを送るとendpoint_arnを受け取ることができます。DBに保存しておきましょう。


上記の Aws::Sns::DeviceTokenRegisterer.register(device_token) はサービス層に用意しています。endpoint_arn を登録するために呼んでいます。

ここでは、2つのトピックをendpointとしてサブスクライブしています。この記事の始めに書いた通り、トピックとはユーザーグループのようなものです。ここでは2つのトピックを作りました。ひとつはすべてのデバイスに対して、もうひとつはAndroidiOSのどちらかのみというものです。AWS SNSの設定に関してはAWSのdocumentを参照してみてください。


最後に、プッシュ通知イベントを発火します。下記、サンプルコードです。


これで全てです。それほど複雑ではないですよね。AWS SNSは便利ですし、比較的値段も安いです。ぜひ利用してみましょう。もし質問や意見、提案などございましたらぜひコメントに書いていただければと思います。

それでは。