Chrome Push Notification でメッセージに本文を載せる方法

2015/04/28 現在、Chrome (M42) では Push Notification にてメッセージの本文を変える事が出来ません。 これは、現在の仕様では GCM からの payload に任意のデータを載せる事が出来ないためです。したがって、毎回同じメッセージを表示する事になってしまいます。

これでは迷惑な通知にしかなりませんね。対策を探していたら偶然見つかったのでここに書きます。

次のような処理の流れにてメッセージの本文を変えることが出来ます。

1. Push Notification を受け取る。
2. Service Worker 上の push イベントが起こります。
   • Service Worker は、通知のメッセージを取得する API を叩きます。
     • ここで即座に showNotification() をするのではなく、API を叩いてデータを取ってきて、その上で表示を行なうのがみそです
     • タイトル、本文、アイコン URL、タップ時の遷移先 URL あたりを載せると良いと思います。
   • 取得した通知データを用いて、本文を表示します。
   • （パラメータとしては、subscriptionId を使うことが出来ます。）

元ネタは Roost という、まんま Chrome, Safari 向けの通知を提供しているスタートアップのコードです。 Roost の Service Worker のソースへのリンクを載っけておくので、上記の処理を実装したい方は各自参考にしてください。

https://dl.dropboxusercontent.com/u/7817937/roost-chrome/roost_worker.js