メール整理できないあなたへおくるWeb Push通知

このエントリーをはてなブックマークに追加
こんにちわ。ishikawaです。

私の会社のメールアドレスには毎日、社内の人からのメール以外に、
  • システムのアラートメール
  • 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

図:sw.jsというServiceWorkerが登録されたところ


③プッシュサービスに通知購読要求を行います。
(この時、事前に生成した公開鍵を一緒に送ります)
 → プッシュサービスからエンドポイントURL、通知内容を暗号化するための公開鍵、共有鍵等が返されます。

④エンドポイントURL等をアプリケーションサーバに送信します。
 → アプリケーションサーバ側では送信された情報を保存しておきます。


アプリケーションサーバ側の実装

⑤プッシュサービスにプッシュ通知送信します。
→ プッシュサービスでは事前に送られた公開鍵を使って署名の検証が行われます。

⑥プッシュサービスからブラウザに通知が送信されます。
→ ブラウザではServiceWorkerが起動し、デスクトップ通知が行われます。


通知された内容



通知内容はタイトル、本文、アイコンの他にもURLを指定し、クリックされたら特定のURLを新しいタブで開くなど、任意のアクションも登録することができます。


感想

実際に実装してみて、メールのように読みたいときに自由に取り出して、読むといったことはできないものの、Webアプリケーションに組み込んでいくと効果的にユーザへ情報を伝えることができ、また、特定のアクションを登録しておくことで、操作性の向上や面白いユーザ体験が提供できるようにも思いました。
ただし、たくさんの通知を送ってしまうと、スパムにもなりかねないため、キュー等を利用し、たくさん送らないような仕組みのサービス提供が必須になります。

かなりざっくりとした内容の紹介になってしまいましたが、
詳しいことを知りたい方は以下の参考にした本、サイト等を確認ください。

良い通知ライフを!!


参考にした本/サイト



次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...