expo-web(react-native-web)でFCMの実装

今回は、expo-webでFCMを実装したのでその備忘録としてこの記事を書きます。

offline supportを有効にする

expoでwebアプリを開発する場合ほとんどの場合PWAになると思います。
デフォルトではoffline supportが無効になっているので手動で有効にする必要があります。
コマンドでexpo customize:webを打つと５つくらいのファイル名が表示されます。
その中でwebpack.config.jsを選択してください。
そしてwebpack.config.jsを以下のように編集します。

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync({...env,offline:true}, argv);
  // Customize the config before returning it.
  return config;
};

4行目にoffline:trueを加えました。

ここは以下のサイトを参考にしました。
https://docs.expo.io/guides/progressive-web-apps/

service-workerの登録,push通知の受取処理

これは、海外の人で全く同じことをしていた人を見つけたのでその方のコードを有難く使わせてもらいました
参考にしたブログ↓
https://dev.to/gabrielnsd/push-notifications-using-firebase-in-pwas-built-with-expo-2elm

この方のブログを参考にすると、FirebaseConsoleからpush通知を送信するところまでできるようになります。

Cloud Functionsで自動的にpush通知を送信する。

上記までの方法だと、手動でその都度操作する必要があります。
例えば、チャットが届いたときやユーザーが一定の行動をとったときに通知が送信できません。
これには、①送信先ユーザーのtokenと②FCMのサーバーキーが必要です。
②は、FirebaseConsoleから設定→Cloud Messagingタブの一番上にサーバーキーから確認できます。
今回はFireStoreのmessages/{messagesID}/message/{messageID}にメッセージを保存し、これを起点に都度push通知を送信するようにします。
適時都合のいいように置き換えてください。

//受け取ったメッセージ
var message = data.message
//保存したユーザーのtoken
var token = user.token
//requestするjson
//今回は簡単にしています。
var message = JSON.stringify({
　　　　　"notification": {
                //push通知のタイトル
                "title": '新着メッセージです。',
                //push通知の本文
                "body": message,
            },
            //送信先のtoken
            "to": token
        })

const res = await fetch('https://fcm.googleapis.com/fcm/send',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    //server-keyのところを先ほど取得した各自のものに置き換えてください。
                    'Authorization': ['key', 'server-key'].join('='),
                },
                body: message
            })

これでメッセージが届いたら通知が行くようになります。
あくまでこれは簡単なものなので自分たちのサービスの合わせてカスタマイズする必要があると思います。
下は、bodyに含められるparameter一覧です。
https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages?hl=ja#Message

これで一通りFCMを扱えるようになると思います。

おわりに

service-workerとは何ぞやというところから始まり、コピペさせて頂いたブログを見つけるのさえかなり時間がかかりました
expo-webのpush通知の実装については情報が少ないと思うので皆さんの参考になればうれしいです。

引用・参考にしたサイトまとめ

//expo-webのoffline-supportの設定
https://docs.expo.io/guides/progressive-web-apps/
https://github.com/expo/fyi/blob/master/enabling-web-service-workers.md
//service-worker,push通知の受信処理
https://dev.to/gabrielnsd/push-notifications-using-firebase-in-pwas-built-with-expo-2elm
//FCMで設定できるパラメータ一覧
https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages?hl=ja#Message