WebPushについて簡単整理

WebPush

WebPushについて私なりに理解したことを最大限簡単に書いてみます。

WebPushとは

ブラウザに対してサーバからプッシュ通知ができる技術です。
他のウェブページを見ていても通知が来ます。ブラウザによっては、ブラウザを立ち上げなくても通知が来ます。
専用アプリは不要です。ウェブページ(html, jsp...)とjsだけでプッシュ通知できます。
通知がたくさん来ると、ユーザに迷惑でしょうが、うまく使えば色々な使い方ができそうですね。

プッシュ通知の流れ

プッシュ通知は以下の流れで動作します。
標準のWebPush APIを利用すると仮定します。
AP ServerはApplication ServerでTomcatなどのコンテナーを表します。

ユーザ > Browser

  • ユーザがBrowserでウェブページにアクセスします。
  • Browserからプッシュ通知を許可するかどうかの選択を求めるダイアログが表示されます。
  • ユーザが許可を選択します。

Browser > PushServer > Browser

  • ユーザがBrowserでプッシュ通知の購読ボタンを押します。
  • BrowserからPushServerに購読をリクエストします。
  • PushServerはEndPoint(URL)をBrowserに返します。

Browser > AP Server > DB

  • BrowserはPushServerから受け取ったEndPointとユーザキーなどをAP Serverに送ります。
  • AP ServerはEndPointとユーザキーなどをDBに保存します。

AP Server > PushServer > Browser

  • AP Serverの使用者はEndPoint宛にメッセージを送り、メッセージはPushServerに届きます。
  • PushServerはBrowserにメッセージ送り、Browserはメッセージを通知ダイアログで表示します。

PushServer

ブラウザの利用者にプッシュ通知を送るためにはEndPointというURLにメッセージを送る必要があります。
EndPointはPushServerのURLを表し、ユーザごとにユニークでドメインもブラウザごとに違います。
WebPushを標準的な方法で利用すると、特にEndPointが何者か意識する必要はありません。
Push APIの購読メソッドを呼び出すと、EndPointが返ってきますが、そのEndPoint宛にメッセージを送れば、
該当ブラウザにプッシュ通知が表示されます。

サポートするブラウザ

Chrome、Firefox、SafariがWebPushをサポートします。
ブラウザのバージョンは大体2016年7月以降のものなら、WebPushの標準的な使い方ができます。
ChromeとFirefoxは検証できましたが、SafariはMacがないので、分かりません。
またSafariは少々サポート(アイコン未サポート..)が足りないようです。
MicrosoftのEdgeは開発中だそうです。
従いまして、今のところChromeとFirefoxが確実にサポートすると考えればいいと思います。

実装方法の違い

Firefoxでは特に意識する必要はありません。
Chromeの場合、バージョン52未満ではChrome専用で行わなければならないもの(例 : ID取得、manifest.jsonファイル)があります。
今はChrome 52以降なら、Web Pushプロトコル標準をサポートしているため、ブラウザ依存なしで実装できます。

より多くのブラウザをサポートするためにChromeの旧バージョンもサポートすべきか?と悩むところですが、
私は必要ないのでは?と思います。
なぜかというと、IEならまだしも、ChromeとFirefoxは知らぬ間に自動更新してくれますし、
ブラウザシェアを見ると、ほとんどのChromeユーザは52以降のバージョンを使用中だからです。
(WebブラウザシェアランキングTOP10(日本国内・世界) – ソフトウェアテスト・第三者検証ならウェブレッジ)

ですので、近々なくなるChrome依存のコードは要らないのでは?と思います。

サンプル

以下のgithubのサンプルが役立ちました。
Javaベースですが、標準的なAPIを使用しているので、他の言語への適用は問題ないと思います。
github.com
WebPushの標準的な実装だけでなく、古いバージョンのChromeにも対応しています。
暗号化する部分が複雑ですが、ただWebPushを利用するだけなら、スキップし、実際通信する部分だけを参照しても問題ないと思います。

実装ポイント

  • プッシュ通知の許可や購読を行うjsは該当ウェブサイトと別のドメインにあってもいい。
  • 通知を行うjsは該当ウェブサイトに配置する必要がある。
  • 通知を行うjsはブラウザでService Workerとして常駐することになる。つまり、該当ウェブサイトを去ってもずっとブラウザのメモリに残って通知が来ることを待つ。
  • Service Workerとして登録された通知を行うjsの更新に注意する必要がある。期限を設定し、うまく更新されるか確認しよう。