受信側がTokenをFCMに発行してもらって、そのTokenを用いて送信側がFCMを経由してPush通知を送るといった仕組みです。私の中ではメッセージの中継局みたいなイメージ。クロスプラットフォームなのでWebのみならずAndroid、iOS、Unityに対応しています。Apps(PWA)って何?PWAは、モバイルのネイティブアプリ(※)と同等のUXを提供し、かつ高速・高信頼性の高いパフォーマンスを提供するWebアプリを指す。言えば、スマートフォンのアプリと同じ機能をもったWebページ、アプリのこと。そこには高パフォーマンスだったり、Push通知だったり、インストール可能だったり、デスクトップで動作したりモバイルで動作したり、レスポンシブデザインだったり、色んな特徴が含まれる。(PWAを調べていくとやたらUXやUX向上という文字があちこちに見られ、UXについて意識させられる。)参考:PWAについて提唱しているGoogleのページページ下のほうにプログレッシブWebアプリのチェックリストのリンクとかがある。※ネイティブアプリ...AndroidやiOS等の環境に特化した専用のアプリ。Workerって何?Webページとは別にブラウザのバックグラウンドで実行するスクリプト。独自のライフサイクルで動いていて、定期的なバックグラウンド同期や、バックグラウンド時のプッシュ通知など、リッチなオフラインUXを提供する。APIを利用)等条件あり。Workerの登録を行う必要がある。前述のPWAを実現するためには、なくてはならない技術です。APIって何?ユーザーに表示するシステム通知を制御する仕組み。Webページがアイドル状態でもバックグラウンドでも通知を表示することができる。通知をカスタマイズすることができる。Push通知をコントロールするのに活用しました。APIFCMのドキュメントを読んで気づいたこと「エピローグ」で後述しますが、WebPushを実装するにあたり、かなり遠回りをしてしまいFCMのドキュメントをちゃんと読んでいないことを後悔しました。そこであらためて読んで気づいたことを記載します。送信メッセージのタイプは「通知メッセージ」(または表示メッセージとも言うらしい)「データメッセージ」の二つの種類があって、ざっくり説明すると通知メッセージ...SDKによって自動的に処理データメッセージ...クライアントアプリによって処理とあります。実際に動かしてみるまで何のことやらさっぱり分からず...ちょっとはまってしまいました。通知の表示を処理する場合は、通知メッセージを使用します。メッセージを使用します。ペイロードを含む通知メッセージを送信できます。ペイロードが処理されます。ドキュメントに記載されていますが、フォアグランドやバックグラウンド時等、場合によって通知メッセージを使用したり、データペイロードを使用したりよきにはからってくれるものだと解釈して、どちらも実装していました。通知メッセージでも受信した際にクリックされたことを簡単に知ることができると思っていて、クライアントアプリ側でかなり苦戦してしまいました。プロトコル通知ペイロード」だと、click_actionに宛先を指定することになり、フィールド名というかパラメータ名が違っていたりします。「完全に閉じられているか」(以下、クローズと呼ぶことにします。)の状態によって異なる、と言っています。両方に記述してみて、一度のPush送信で通知が2つ表示されてしまったり...この時点でかなり混乱していました。Workerでやってしまおうと思ったのです。記述が一箇所で済む表示する内容も統一できるクライアント側で好きにデザインできるクリックする先(自分のURL)を送信側が知る必要もなくなる(これはかなり楽)クリックしたかどうかも取得できる!(大事!)我ながらいい方法だな、と思ったのでした。通知メッセージの通知ペイロードは送らずにデータメッセージのペイロードのみ送信側から送ることにしました。(これ、重要)まあ、フォアグラウンド時は別にPush通知は出す必要ないよって場合、それ以外では表示だけならSDKがよきにはからってくれるから楽だし、それでいいよって場合には少々面倒くさいので、あまりおすすめはしません...実装編それでは実装してみようと思います。Textなアプリを作ってみる」で作ったVueアプリを使って、Clientアプリで何か発話されたら、HostアプリにPush通知が届くようにしてみます。送信側やその他の箇所は割愛します。詳しくは、GitHub:ソースコードはこちらで公開しています。https://github.com/sgi-chang/useServiceWorkerWithNotificationを見て下さい。受信側のFCM設定の箇所クライアントアプリ内で以下を実装します。通知の受信許可をリクエストする...一番最初に受信許可を聞く現在の登録トークンの取得トークン更新のモニタリング...トークンが更新されたら呼ばれるソース内の「process.env.VUE_APP_FIREBASE_PUBLIC_VAPID_KEY」の箇所は、ご自身の設定した鍵情報に置き換えてください。詳細は以下のページをご参照下さい。Workerで実装します。ファイル名は「firebase-messaging-sw.js」でpublicフォルダの下に置きます。ServiceWorker、受信の実装FCMから通知を受信すると呼ばれます。このタイミングでNotificationに値をつめたり、通知内容を実装します。'メッセージが届いています。'メッセージが届いています。表示した通知がclickしたら呼ばれます。ここでクリック時の処理を実装します。focusフォアグラウンド、バックグラウンド、クローズに合わせてページの表示方法を変えます。Workerが登録されず確認することはできません。Pushを試すことができます。詳細は下記のページ等をご参照下さい。参考:ウェブアプリへのプッシュ通知の追加まとめ送信メッセージは「データメッセージ」のみで送る。Workerで実装できる。アプリ側は、Tokenの登録や認証情報の設定だけでよい。快適なUX向上に役に立つのではないかと思います。簡単に実装できると思って飛びついてしまい、気づいたときには何が何やら分からない状態になってしまいました。備忘録もかねて書いてみることにしました。UX向上にお役に立てれば嬉しいです。通知は検知できているのに、何をやってもnotificationの表示ができずにはまってしまいました。原因は、OS(Windows10)の設定のアプリの通知がオフになっていたことでした。Notificationはブラウザの世界で完結しているものと思い込んでいたので、かなり衝撃でした。修行が足りません...最後までお読み頂き、誠にありがとうございます。ブラウザsgi-changUXデザインセンター(UXDC)所属のエンジニア。フロントエンド、Web技術全般に携わる。UXDCの先輩方からUXデザインについて学び、UX(を意識した)エンジニア目指して日々奮闘中。特徴:隙あらば韻を踏みたがる。いいくだらないこと(もの)が大好き。クレスコのUXデザインクレスコでは、より良いユーザー体験を実現するために、良いUXを量産する仕組みの設計/アドバイス/コンサルティング等の支援を行っています。/設計など、さまざまな局面で幅広いご支援を行っています。Webマーケティング、UX/UIデザイン、ビジュアルデザイン、ユーザビリティ評価/改善についてのお問い合わせ・ご相談は、お気軽にどうぞ。