🎅 はじめに 🎅
アドベントカレンダー参加したいなということで・・・
今日は、「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 に関して！
最後まで読んでいただきありがとうございました！