はじめに
Flutter for Webでプッシュ通知を実装する機会があったので、その記録です！
For Webでの記事はなかなか出てこないので、参考になれば幸いです！
今回のサンプルコードは以下にあるので、こちらも合わせてご確認ください。
概要
Flutterといいましたが、ほぼJavaScriptでの実装になります。具体的には、通知の権限確認や購読の処理を記述したJavaScriptの関数を用意して、その関数をjsというパッケージを通して呼び出す形になります。
Flutterから呼び出す関数の作成
まずは、Flutterから呼び出すJavaScriptの関数を作成します。
/webディレクトリ内に作成してください。今回は、/web/scripts/web-push.jsというファイルを作成し、以下3つの関数をまとめて記述しています。
通知をサポートしているかを確認する関数
既に通知を購読しているかをチェックする関数
通知を購読する関数
今回は、公開鍵(vapidPublicKey)を環境ごとに分けたかったので、Dart-defineで管理し、JavaScriptの関数に引数で渡しています。
処理の結果を、Stringのステータスコードにして返却しています。問題なく購読が完了した場合には、サブスクリプションの情報も合わせて返却しています。
通知を受信した時に実行される関数の作成
同じく/webディレクトリ内に作成してください。今回は、/web/scripts/service-worker.jsというファイルを作成しました。
通知がタップされた際には、ルートの画面を表示するシンプルな処理になっています。
JavaScriptファイルの読み込み
/webディレクトリ内に用意されているindex.htmlに、先ほど作成したJavaScriptファイルを読み込む記述を追加します。
web-push.jsの読み込み
</head>の直前に<script src="scripts/web-push.js" defer></script>を追加します。
service-worker.jsの読み込み
既存の処理に追記します。addEventListener内の関数の最後に、navigator.serviceWorker.register("/scripts/service-worker.js")を追加します。これで、ServiceWorkerが追加され、通知を受信できるようになります。
これで、JavaScriptの準備は完了です！
必要パッケージの追加
冒頭で紹介したjsパッケージをFlutterプロジェクトに追加します。
flutter pub add js
JavaScriptの関数を呼びだせるように
最初に作成した3つの関数を、jsパッケージを通して呼び出せるようにします。
今回は、/lib/libs/jsというディレクトリを作成し、関数1つにつき1つのサブディレクトリを作成しました。
jsパッケージを使用すると、以下のようにJavaScriptの関数を呼び出すことができます。
その他の関数の呼び出しについては、GitHubのサンプルコードを参考にしてください。
jsパッケージをiOS, Android環境でインポートするとエラーになるため、以下のように分岐してインポートできるようにしています。
通知を購読する
いよいよ最後です！
以下のように、先に作成したそれぞれの関数を使用することで、通知を実装することができます。
動かしてみる
ボタンをタップすると、権限を求める表示がでるので、許可します。
開発者ツールで通知を送信してみると、、、 通知が届きました！🎉
Discussion