yagisukeのWebなブログ

フロントエンドとサーバーサイドをさまようエンジニア

第6話: HTTPウェブプッシュ の雑多なメモ 〜 REAL WORLD HTTP第7章より 〜

yagisuke.hatenadiary.com の第6話<最終回>です。

HTTPウェブプッシュ

HTTPウェブプッシュは、ウェブサイトにスマホアプリのような通知機能を提供する仕組みです。 HTTPウェブプッシュはその機能の特性上、ブラウザが起動していなかったり、 オフラインでも、ユーザに通知を送れる必要があります。

サイバーエージェントさんのFRESH!というサービスで使われているです。 f:id:yagi_suke:20180127211148p:plain 画像: https://developers.cyberagent.co.jp/blog/archives/9772/

実装方法や困ったことも記載していて面白そうな記事になっているのでオススメしておきます。 - https://developers.cyberagent.co.jp/blog/archives/9662/

また、ディレクターがHTTPウェブプッシュを導入することで考えていたことも別記事になっていて面白そうです。 - https://developers.cyberagent.co.jp/blog/archives/9772/

Service Worker

ブラウザがないのになぜ通信できるのか。 その秘密は、オフラインのアプリを実現・サポートするために作られた Service Workerという機能にあります。

Service Workerは、ブラウザがWebページのスクリプトとは別のプロセスでスクリプトを バックグラウンドで実行できる機能のことです。現在登録されているイベントは以下の通りとなっています。

呼ばれるタイミング イベント名
インストール時 activate
フロントエンドからのpostMessage() message
フロントエンドがサーバーにアクセス fetch
プッシュ通知受信 push

HTTPウェブプッシュの流れ

引用元: http://d.hatena.ne.jp/jovi0608/20141204/1417697480

どのような仕組みで行われるのか、その概要を一枚の図にしました。 ちょっとごちゃごちゃ説明文を図に書いていますが登場人物は3人、

  • クライアント(ブラウザには、Webアプリケーション(Web App)、Service Worker、Push APIが動いています)
  • Webアプリケーションのサーバ(app.example.jp)
  • プッシュサーバ(push.example.jp) です。

f:id:yagi_suke:20180127211153p:plain 画像: http://d.hatena.ne.jp/jovi0608/20141204/1417697480

ざっとした流れは、

  1. クライアントからプッシュサーバの登録情報(endopoint, registrationID)をアプリサーバに通知。 (Push Serviceにアプリサーバがリクエストを送ることができるようになる)
  2. アプリサーバが、プッシュ通知をHTTP PUTのリクエストボディに付けてプッシュサーバに送信。
  3. プッシュサーバは、プッシュ通知をチャネルで区別し、送信クライアントを選定。
  4. プッシュサーバは、HTTP/2のサーバプッシュやFCM(Firebase Cloud Messaging)など利用してクライアントにプッシュ通知をSSEで送信。
  5. クライアントは、プッシュサーバからプッシュ通知を受けると、Service Worker上でPushイベントが発生。
  6. プッシュされたデータはキャッシュ更新なり、クライアント上でいかようにでも処理することができる。

といった流れになります。

事前作業が必要

上記1に入る前に、ブラウザを起動するときに、プッシュ通知の利用許諾を取る必要があります。 - プッシュ通知はオプトイン(承諾が必要ってこと) - 承諾されればプッシュサービスを利用登録する - サービスのIDと、送信用の鍵(プッシュサービスがブラウザを特定するためのもの)を取得

承諾されて有効になるとService Workerで登録したpushイベントで 通知が受け取れるようになります。

補足:
現状ウェブプッシュはプッシュサービスと連携することで実現しています。 プッシュサービスはChromeの場合はGoogle社の通知サービス、 Firefoxの場合はMozilla社の通知サービスを利用します。

緊急度の設定

Urgencyヘッダーをリクエスト時に付与すると、不必要なメッセージをフィルタリングできます。 メッセージ送信、および送信のときに付与します。 以下のように設定可能な値を示します。 省略時はnormalになります。

緊急度 バイスの状態 用途
very-low 電源がつながっていてWiFi接続あり 広告
low 電源がつながっているか、WiFiあり 話題の更新
normal 電源がつながっておらず、WiFiもない チャットやカレンダーのメッセージ
high バッテリー残量が少ない 電話の着信、もしくは時間厳守の通知

引用元や参考情報