私の会社のメールアドレスには毎日、社内の人からのメール以外に、
- システムのアラートメール
- GitHub、BackLog、Jenkins、Pivotalといった業務で利用しているサービスからの通知
こまめに受信トレイを整理する人もいれば、私のように受信トレイの中の新着メールのうち、タイトルだけ見て必要なメールには目を通し、その他はほったらかしていつの間にか受信トレイに未読メールが溜まってすごい件数になっている人もいると思います。
Webアプリケーションでもっと簡易的で、軽量な通知機能はないか探してみたところ、現在、仕様策定が進められているWeb Push APIによるプッシュ通知を知りました。
これはメールアドレスやアカウントを登録しなくてもユーザになんらかの情報を伝えることが可能になります。
利用の流れについては、簡単に以下のとおりです。
利用の流れ
登場人物
- ブラウザ(&Service Worker)
- プッシュサービス(各ブラウザベンダが提供)
- アプリケーションサーバ
事前準備
鍵ペアを生成
- アプリケーションサーバでは秘密鍵を使って署名します。
- プッシュサービスは公開鍵を使って署名を検証します。
ブラウザ側の実装
①Notifications APIを使い、ユーザからデスクトップ通知許可を得ます。
②ServiceWorkerを登録します。(実体は下記のようなJavaScriptファイル)
登録されたServiceWorker(sw.js)
self.addEventListener('install', function( event ){ self.skipWaiting(); console.log('Installed', event); }); self.addEventListener('activate', function( event ){ console.log('Activated', event); }); self.addEventListener('push', function( event ){ console.log('Message Received', event); if (!event.data) { return; } let data = event.data.json(); //payload event.waitUntil( self.registration.showNotification( data.title, { body: data.body, icon: data.images, data: {url: data.url} } ) ); }); self.addEventListener('notificationclick', function( event ){ let notification = event.notification; let url = notification.data.url; event.waitUntil(self.clients.openWindow(url)); });
Chromeでは以下のURLにアクセスすると、登録されたServiceWorkerが確認できます。
chrome://serviceworker-internals
chrome://serviceworker-internals
図:sw.jsというServiceWorkerが登録されたところ
③プッシュサービスに通知購読要求を行います。
(この時、事前に生成した公開鍵を一緒に送ります)
(この時、事前に生成した公開鍵を一緒に送ります)
→ プッシュサービスからエンドポイントURL、通知内容を暗号化するための公開鍵、共有鍵等が返されます。
④エンドポイントURL等をアプリケーションサーバに送信します。
→ アプリケーションサーバ側では送信された情報を保存しておきます。
アプリケーションサーバ側の実装
⑤プッシュサービスにプッシュ通知送信します。→ プッシュサービスでは事前に送られた公開鍵を使って署名の検証が行われます。
⑥プッシュサービスからブラウザに通知が送信されます。
→ ブラウザではServiceWorkerが起動し、デスクトップ通知が行われます。
通知された内容
通知内容はタイトル、本文、アイコンの他にもURLを指定し、クリックされたら特定のURLを新しいタブで開くなど、任意のアクションも登録することができます。
感想
実際に実装してみて、メールのように読みたいときに自由に取り出して、読むといったことはできないものの、Webアプリケーションに組み込んでいくと効果的にユーザへ情報を伝えることができ、また、特定のアクションを登録しておくことで、操作性の向上や面白いユーザ体験が提供できるようにも思いました。ただし、たくさんの通知を送ってしまうと、スパムにもなりかねないため、キュー等を利用し、たくさん送らないような仕組みのサービス提供が必須になります。
かなりざっくりとした内容の紹介になってしまいましたが、
詳しいことを知りたい方は以下の参考にした本、サイト等を確認ください。
良い通知ライフを!!