Realtime FrameworkでWebPush通知をする


はじめに

Webプッシュ通知ってご存知ですか?

プッシュ通知はスマホアプリではよくありますよね。

簡単に言えば、Webプッシュ通知はそのWeb版です。


今回はこのRealtime FrameworkのWeb Push Notificationsを利用して、

自分のサイトへリンクを飛ばすWebプッシュ通知を実装できたので紹介します。


動作環境


公式サンプル

Web Push Notificationsのサンプルをこちらで試すことができます。

「SEND ME A PUSH NOTIFICATION」という青いボタンを押すとプッシュ通知が来るはずです。

f:id:turtley_fms:20171218151445p:plain


実装


通知をするための設定

Realtime FrameworkのAPIやFirebaseの設定などは、

公式のチュートリアルやコード内のコメントがとてもとてもとても親切なので、

こちらを参考にしてください。

github.com

(それでもわからなければこの記事にコメントしてくだされば対応するかもしれません)

GithubにあがっているコードをしてDLして編集していくことになります。


チュートリアルが完了したらサンプルと同じように実行できている状態になります。


通知内容の変更

ここではチュートリアルの先、

プッシュ通知の内容を変更する方法について説明します。


プッシュ通知の内容は

service-worker.js内のnotificationOptionsの値をいじることで変更することができます。

  • body:本文
  • icon:通知につくアイコン
  • click_url:プッシュ通知から飛ばされるページのurl

などいろいろパラメータがあります。


適当に変更してみました。

f:id:turtley_fms:20171218155244p:plain

f:id:turtley_fms:20171218155115p:plain

プッシュ通知をクリックすると、このブログのトップページに飛びます。


注意

ここで1つ注意があります。

cookieにService Workerの情報が残っていると、

変更が反映されない可能性があります。

コードを書き換えたのに変更されない時は、cookieを削除してみましょう。


おわりに

これでWebプッシュ通知ができるようになりました。

まだどこまで応用が利くのかははっきりしていませんが、

通知を送ってくれるWebサービスを作れるようになったわけです!

ユーザによっていろいろパラメータを変更できるようにできたら楽しそうですね。