🎅 はじめに 🎅

アドベントカレンダー参加したいなということで・・・
今日は、「Flutter × webView で開発したサービスに個別通知機能を追加」した話をします。
同じような境遇の方がいたら、ぜひ実装方針参考にしてみてください。
また、他の方法がある方はアドバイスお願いします。

🎁 個別通知を実装したい！ 🎁

高速な検証をする上で、昨今、webviewを活用したアプリリリースが流行っています。

モバイルの開発よりも学習コストが低く、ウェブ系のエンジニアが世の中的に多いため、この形式でリリースする手法が採用の容易さなどから、ベンチャー界隈で増えています。React Nativeを用いた開発ももちろんその一環です。我々の場合、ゆくゆくのリプレイスも考慮しつつ、Flutterを採用しました。

Flutterを採用した場合、プッシュ通知を実装する上で、Firebase Cloud Message（FCM）を用いるのが王道だと言われています。

しかしながら、webviewで実装したモバイルアプリの場合、個別プッシュ通知を実装するのは非常にめんどくさいです。それが今回の本題です。

全てをモバイルで実装するのと違い、webviewで実装すると、UserIDはウェブクライアント側に保持し、プッシュ通知を送るためのFcmTokenはアプリ側に保持する形になります。

つまり、表面にUserID、裏側にFcmTokenという状況が生まれます。これが厄介。。。
UserIDとFcmTokenが紐付けられたテーブルを作成したいけど、一緒にしてAPIを叩けない。

そんな時に、便利な JavaScript Channelというものがあります。これは、ウェブクライアント側が持っている情報をflutter側に送り、イベント発火時にflutter側で所定の動作をすることができるというものです。（逆で、モバイル側からウェブ側に情報を送ることもできます）。

今回の課題を解決する上で、このJavaScript Channelを用いて、UserIDをモバイルクライアント側に送信して、イベント発火した際に、サーバサイドにUserIDと既に保持したFcmTokenをサーバにPOSTする、この形で無事個別通知ができる準備が整いました！

その後は、サーバサイドからFcmTokenを用いて指定の通知を送るようにすれば完成！

上みたいなgem入れればすぐ送れますね！

今回は、Flutterのwebviewを用いたアプリで個別通知をする際の辛さを書きました。

Flutterで全て実装する場合は、このようなMobileとWebの行き来はないです。一方で、スピード感のある開発をする場合、webViewを用いてリリースするケースも増えています。

個別プッシュ通知の実現には今回のような方法が一個あるので、是非試してみてください。

webview実装のアプリケーションをリリースする際の注意点！

JavaScript Channel に関して！

最後まで読んでいただきありがとうございました！