これからのHTML5の「つながる」

清⽔智⾏ (Tomoyuki SHIMIZU)
これからのHTML5の「つながる」 
– Push API, …and so on
qiita.com/tomoyukilabs
@othersight
fb.me/othersight

HTTP(S), WebSocket
HTTP(S), WebSocket

ブラウザ終了時 ⇒ 受信できない

HTTP(S)以外のプロトコル
Bluetooth Smart
NFC

+ プッシュ通知
+ HTTP(S)以外の通信⼿段

コードレベルの解説はQiitaを参照
qiita.com/tomoyukilabs

ブラウザが閉じていると 
プッシュ通知を受けられない
Service Workerで 
バックグラウンド受信

Service Worker
W3C Working Draft

Webサーバ
Service Worker
(JavaScript)
Webアプリ
プッシュ通知 
サービス
register
Cache
fetch HTTP(S)
push
openWindow
focus
ブラウザが閉じていても 
必要に応じて動作

navigator.serviceWorker.register(scriptUrl, options).then(!
function(registration) { … }!
);!
navigator.serviceWorker.ready.then(!
function(registration) { … })!
);
self.addEventListener(eventType, function(event) {!
event.waitUntil(promise);!
});
Webアプリ側
Service Worker側

Service Workerスクリプトの制約
n  Window配下のオブジェクトやメソッド等はほぼ利⽤不可
l  XMLHttpRequest, localStorage, document.cookie, etc.
n  IndexedDBは利⽤可能
l  受信したプッシュ通知を⼀時的に保存する等に利⽤可能
n  HTTP(S)通信にはXMLHttpRequestではなくFetch APIを利⽤
l  (self.)fetch(url).then(…)

Service Worker × Push API
W3C Working Draft

Google APIサーバ Webサーバ
User Agent (ブラウザ)
1) 登録 4) プッシュ通知
2) registration_id登録
(HTTP POST等)
3) プッシュ通知
(HTTP POST)
Google Cloud 
Messaging (GCM)

Webサーバ
User Agent (ブラウザ)
1) 登録
(HTTP/2)
(HTTP/2 Server Push)
2) endpoint登録 
(HTTP POST等)
(HTTP POST)
プッシュ通知 
サービス
Web Push Protocol
(Internet Draft)

実装中
現在は暫定的にGCMを利⽤
対応済み
Web Push Protocol

navigator.serviceWorker.ready.then(!
function(registration) {!
registration.pushManager.…!
});!
});
self.addEventListener(‘push’, function(event) {!
if(‘data’ in event) { var data = event.data.json(); … }!
else { … }!
event.waitUntil(promise);!
});
Webアプリ側
Service Worker側

PushManager
n  registration.pushManager.subscribe(options): 
プッシュ通知の購読を登録
n  registration.pushManager.getSubscription(): 
プッシュ通知の登録情報を取得
いずれも、PromiseでPushSubscriptionオブジェクトを取得

PushSubscription
n  pushSubscription.endpoint: 
プッシュサービスのエンドポイントのURL 
(WebサーバからHTTP POSTする際に指定するURL)
n  pushSubscription.unsubscribe(): 
プッシュ通知の購読を解除(結果はPromiseで取得)
n  pushSubscription.getKey(encriptionName): 
プッシュ通知の送信に必要な受信側の公開鍵を取得 
(Web Pushに対応しているブラウザで利⽤可能)

GCMのURL + ‘/’ +
registration_id
https://android.googleapis.com/gcm/send/…
MozillaのPushサーバのURL
https://updates.push.services.mozilla.com/push/…
PushSubscription.endpoint
これらのURLにWebサーバからHTTP POSTで 
プッシュ通知の内容を送信

Web Push Protocol:
メッセージの暗号化が必須
中間者攻撃を防ぐための対策
(受信者(ブラウザ)と送信者(サーバ)だけの秘密にする)
n  ECDH (楕円曲線ディフィー・ヘルマン)で暗号鍵を共有
n  128ビットAES-GCM⽅式でメッセージ本体を暗号化

Push APIでのGCM:
メッセージ本体の送信は⾮対応
鍵交換と暗号化の仕組みに対応していないため
(メッセージをService Workerのfetchで取得するか、 
もしくは、Web Push対応まで待つか)

公開鍵
秘密鍵
公開鍵
秘密鍵
? ?
共通鍵
× ×
ECDHによる安全な鍵共有
ブラウザが⽣成
getKey(‘p256dh’)
Webサーバで作成
ブラウザに共有

共通鍵
AES-GCMによる暗号化
HMAC-SHA-256等
Salt 平⽂
128ビットAES-GCM
HTTPヘッダに
付与
暗号⽂
公開鍵
salt
プッシュサーバ
Web Push
(HTTP/2)

とりあえず試すには:
Node.jsで動作するWeb Pushデモ(by Mozilla)
github.com/chrisdavidmills/push-api-demo
詳細は後⽇Qiitaにて執筆予定

HTTP(S)以外の 
通信⼿段

Web Bluetooth
W3C Community Group Report
navigator.bluetooth.requestDevice({!
filters: [{ services: [ … ] }]!
}).then(function(device) { device.connectGATT(); })!
.then(function(server) { server.getPrimaryService( … ); })!
.then( … );!
Bluetooth SmartのGATTサーバとの通信に対応

部分サポート
≧ 45 (Chrome OS)
≧ 48 (Chrome for Android)
実装中
Web Bluetooth

Web NFC API
W3C Community Group Report
navigator.nfc.push(message).then( … );!
!
navigator.nfc.watch(function(message) {!
…!
});!
NFCのタグ読取りやpeer-to-peerデータ交換に対応

実装中
対応検討中
Web NFC API

n  ブラウザを開いていなくてもWebアプリがバックグ
ラウンドで通信・連携できる時代に
l Service Worker, Push API, …
n  Webアプリが通信できる相⼿デバイスが今後⼤幅に
拡⼤する⽅向に
l Web Bluetooth, Web NFC API, …
n  ⼀⽅で、セキュリティやプライバシーに対する要件
が今後さらに強化される⽅向に
l  HTTPS必須化, 鍵共有と暗号化, パーミッション管理の強化, …

これからのHTML5の「つながる」

More Related Content

Similar to これからのHTML5の「つながる」 (20)

これからのHTML5の「つながる」