Realtime FrameworkでWebPush通知をする
はじめに
Webプッシュ通知ってご存知ですか?
プッシュ通知はスマホアプリではよくありますよね。
簡単に言えば、Webプッシュ通知はそのWeb版です。
今回はこのRealtime FrameworkのWeb Push Notificationsを利用して、
自分のサイトへリンクを飛ばすWebプッシュ通知を実装できたので紹介します。
動作環境
OS
ブラウザ
Google Chrome 63.0.3239.84
Safariは実行不可
公式サンプル
Web Push Notificationsのサンプルをこちらで試すことができます。
「SEND ME A PUSH NOTIFICATION」という青いボタンを押すとプッシュ通知が来るはずです。
実装
通知をするための設定
Realtime FrameworkのAPIやFirebaseの設定などは、
公式のチュートリアルやコード内のコメントがとてもとてもとても親切なので、
こちらを参考にしてください。
(それでもわからなければこの記事にコメントしてくだされば対応するかもしれません)
GithubにあがっているコードをしてDLして編集していくことになります。
チュートリアルが完了したらサンプルと同じように実行できている状態になります。
通知内容の変更
ここではチュートリアルの先、
プッシュ通知の内容を変更する方法について説明します。
プッシュ通知の内容は
service-worker.js
内のnotificationOptions
の値をいじることで変更することができます。
body
:本文icon
:通知につくアイコンclick_url
:プッシュ通知から飛ばされるページのurl
などいろいろパラメータがあります。
適当に変更してみました。
プッシュ通知をクリックすると、このブログのトップページに飛びます。
注意
ここで1つ注意があります。
cookieにService Workerの情報が残っていると、
変更が反映されない可能性があります。
コードを書き換えたのに変更されない時は、cookieを削除してみましょう。
おわりに
これでWebプッシュ通知ができるようになりました。
まだどこまで応用が利くのかははっきりしていませんが、
通知を送ってくれるWebサービスを作れるようになったわけです!
ユーザによっていろいろパラメータを変更できるようにできたら楽しそうですね。