2015/06/29更新

[フロントエンド] ブラウザでPUSH通知を行えるようになった

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
先日、第9回 HTML5minutes! 〜triton-js〜に参加して、LTでPUSH通知の話をしてきました。ブラウザでプッシュ通知はなかなか面白いので、ブログでも紹介できたらと思います。




ブラウザでもPUSH通知を送れる

Chromeのバージョン42から、ブラウザでもPUSH通知を送れるようになりました。仕組みとしては以下のようなイメージで、フロントエンド実装、サーバー実装、GCM(Google Cloud Messaging)の3つを用いて実現することができます。
Push Notificationの購読フロー Push Notificationの送付フロー 実装自体もあまり難しいものではなく、例えばフロントエンドの実装部分で言えば、購読処理とPUSH受け取りは以下のように簡単に実装することができます。
// 購読処理(ページのJavaScript)
navigator.serviceWorker.ready.then(function (reg) {
    // 購読処理
    reg.pushManager.subscribe({
      userVisibleOnly: true
}).then(function (subscription) { console.debug('購読成功!!');
    // Serverに購読IDを通知
    sendSubscriptionIdToServer(subscription);
}); });
// PUSH受け取り(Service Worker)
self.addEventListener('push', function (event) {
  var title = 'Yay a message.';
  var body = 'We have received a push message.';
  var icon = './images/icon-192x192.png';
  var tag = 'simple-push-demo-notification-tag';
  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
})); });
また、PUSH配信の実装も、例えば以下のようなcurlコマンドで簡単に配信することができます(実際の実務ではサーバーから必要なユーザー分配信する形になります)。
curl
    --header "Authorization: key=<API_KEY>"
    --header "Content-Type: application/json" 
    https://android.googleapis.com/gcm/send 
    -d '{"registration_ids":["<購読ID>", "<購読ID>", ...]}'
あまり難しい実装もなく、ブラウザでPUSH通知が行えるのは素敵だなと思いました。


ちなみに僕の携わるスマホサイトで、現在このPUSH通知を受けられるユーザーはどれくらいいるのか気になったので、調べてみまたら、5%のユーザーが対象とわかりました(今時点ではまだ少ないですね)。
Androidユーザーは約半分ですが、多くの人はまだ「ブラウザ」を使っていて、Chrome利用者は少ないようです。しかしAndroidはどんどん進化していますので、PUSH通知がビジネス上でも重要になる日は近いと思ってます。



参考資料

ChromeでのPush通知を実装する上で、以下の記事を参照しました。ありがとうございます。

Push Notifications on the Open Web | HTML5 Rocks

ChromeでW3C Push APIを使ってみた | Qiita



最後に

Push通知は(ちゃんと使えば)ユーザーの利便性向上にもつながって良い機能なので、ぜひブラウザでも使えるようにノウハウを貯めていきたい次第です。ニュースサイトとかは早々に実装していったりするのでしょうか。これからのブラウザの進化が楽しみな今日この頃です。

最後になりますが本ブログでは、フロントエンドのネタを中心に情報を発信しています。気になった方はぜひ、RSSTwitterをフォローして頂けますと幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。