ADF LT

1. Service Workers で始める
PUSH 通知
中川 武憲 (@ww24)

2. 自己紹介
株式会社インフィニットループ
バイト戦士
北海道科学大学
創生工学部
情報フロンティア工学科
あいえるたん
@ww24中川武憲

3. Service Workers

4. Web Workers なら
聞いたことある

5. Web Workers
ブラウザ上の JavaScript でマルチスレッドを扱
う仕組み。
フロント(UI スレッド)とは別にバックグラウン
ドで処理を走らせることが可能。

6. ブラウザをフリーズさせない

7. Demo
π = 4 × arctan1 を利用して π の値を求める。
http://dev.ww24.jp/javascript/PI/

8. 本題

9. Service Workers
Web Workers はページを表示している間しか
バックグラウンドで動かせない！

10. Service Workers
Web Workers はページを開いている間しか
動かせない！
Service Workers ならページを閉じていても
稼働する。

11. Service Workers で出来る事
・Cache
ApplicationCache よりも高度なキャッシュ機能
・Push
PUSH 通知
・Sync
指定した任意のタイミングで起動
http://www.w3.org/TR/service-workers/

12. PUSH 通知
Chrome は 42 から対応

13. Web の PUSH 通知事情
今までも Notification API を使う事で、通知は可能。
WebSocket 等でリアルタイム通信を行い、
Notification API でネイティブのような通知を発行。

14. ただし、
ブラウザを開いている時だけ。

15. Service Worker
Worker
Worker を登録
http://www.html5rocks.com/ja/tutorials/service-worker/introduction/
①

16. ① register.js
navigator.serviceWorker.register("/service_worker.js", {
scope: "./"
}).then(function (serviceWorkerRegistration) {
// PUSH 通知を購読情報の取得
return serviceWorkerRegistration.pushManager.getSubscription();
}).then(function (subscription) {
if (subscription) {
console.log("subscription:", subscription.subscriptionId);
}
// PUSH 通知を購読していない場合に購読 (Permission が求められる)
return serviceWorkerRegistration.pushManager.subscribe();
}).then(function (subscription) {
console.log("subscription:", subscription.subscriptionId);
}).catch(function (err) {
console.error(err);
});

17. Service Worker
GCM
Server
Google Cloud Messaging
Chrome の場合
イベント通知
イベント通知
データ取得
イベ
ン
ト
通
知
スマホ等の
ブラウザ
②
③
④

18. ② push.js
const API_END_POINT = "https://android.googleapis.com/gcm/send";
request.post({
url: API_END_POINT,
headers: {
Authorization: "key=" + GCM_API_KEY
},
json: true,
body: {
registration_ids: registration_ids
}
}, function (err, req, data) {
if (req.statusCode !== 200) {
return callback && callback(err || new Error("status:" +
req.statusCode));
}
callback && callback(err, data);
});

19. ③ service_worker.js
self.addEventListener("push", function (event) {
// GCM から PUSH イベントが呼ばれる
var notification = self.registration.showNotification("YO!", {
body: "Hello Service Workers Push!",
icon: "/img/html5-badge.png",
tag: "hello-service-workers"
});
event.waitUntil(notification);
});

20. ④ service_worker.js
self.addEventListener("push", function (event) {
// fetch を使って通知データを取得
var promise = self.fetch("https://example.com/api/data", {
credentials: "include"
}).then(function (res) {
return res.text();
}).then(function (text) {
var data = JSON.parse(text);
return self.registration.showNotification(data.title, {
body: data.body,
icon: icon_path,
tag: "hello-service-workers"
});
});
event.waitUntil(promise);
});

21. まとめ
・Web でもネイティブアプリのような PUSH
通知が実現できる時代になる！？
・iOS Safari での対応が待たれる…。

22. 参考
・Push Notifications on the Open Web
http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web
・ServiceWorker API - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API
・Is ServiceWorker ready?
https://jakearchibald.github.io/isserviceworkerready/