Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Service Workers で始める
PUSH 通知
中川 武憲 (@ww24)
自己紹介
株式会社インフィニットループ
バイト戦士
北海道科学大学
創生工学部
情報フロンティア工学科
あいえるたん
@ww24中川武憲
Service Workers
Web Workers なら
聞いたことある
Web Workers
ブラウザ上の JavaScript でマルチスレッドを扱
う仕組み。
フロント(UI スレッド)とは別にバックグラウン
ドで処理を走らせることが可能。
ブラウザをフリーズさせない
Demo
π = 4 × arctan1 を利用して π の値を求める。
http://dev.ww24.jp/javascript/PI/
本題
Service Workers
Web Workers はページを表示している間しか
バックグラウンドで動かせない!
Service Workers
Web Workers はページを開いている間しか
動かせない!
Service Workers ならページを閉じていても
稼働する。
Service Workers で出来る事
・Cache
 ApplicationCache よりも高度なキャッシュ機能
・Push
 PUSH 通知
・Sync
 指定した任意のタイミングで起動
http://www.w3.org/TR/se...
PUSH 通知
Chrome は 42 から対応
Web の PUSH 通知事情
今までも Notification API を使う事で、通知は可能。
WebSocket 等でリアルタイム通信を行い、
Notification API でネイティブのような通知を発行。
ただし、
ブラウザを開いている時だけ。
Service Worker
Worker
Worker を登録
http://www.html5rocks.com/ja/tutorials/service-worker/introduction/
①
① register.js
navigator.serviceWorker.register("/service_worker.js", {
scope: "./"
}).then(function (serviceWorkerRegistra...
Service Worker
GCM
Server
Google Cloud Messaging
Chrome の場合
イベント通知
イベント通知
データ取得
イベ
ン
ト
通
知
スマホ等の

ブラウザ
②
③
④
② push.js
const API_END_POINT = "https://android.googleapis.com/gcm/send";
request.post({
url: API_END_POINT,
headers: {
A...
③ service_worker.js
self.addEventListener("push", function (event) {
// GCM から PUSH イベントが呼ばれる
var notification = self.regi...
④ service_worker.js
self.addEventListener("push", function (event) {
// fetch を使って通知データを取得
var promise = self.fetch("https...
まとめ
・Web でもネイティブアプリのような PUSH
通知が実現できる時代になる!?
・iOS Safari での対応が待たれる…。
参考
・Push Notifications on the Open Web
http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web
・ServiceWorke...
Nächste SlideShare
Wird geladen in …5
×

Service Workers

ADF LT

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Service Workers

  1. 1. Service Workers で始める PUSH 通知 中川 武憲 (@ww24)
  2. 2. 自己紹介 株式会社インフィニットループ バイト戦士 北海道科学大学 創生工学部 情報フロンティア工学科 あいえるたん @ww24中川武憲
  3. 3. Service Workers
  4. 4. Web Workers なら 聞いたことある
  5. 5. Web Workers ブラウザ上の JavaScript でマルチスレッドを扱 う仕組み。 フロント(UI スレッド)とは別にバックグラウン ドで処理を走らせることが可能。
  6. 6. ブラウザをフリーズさせない
  7. 7. Demo π = 4 × arctan1 を利用して π の値を求める。 http://dev.ww24.jp/javascript/PI/
  8. 8. 本題
  9. 9. Service Workers Web Workers はページを表示している間しか バックグラウンドで動かせない!
  10. 10. Service Workers Web Workers はページを開いている間しか 動かせない! Service Workers ならページを閉じていても 稼働する。
  11. 11. Service Workers で出来る事 ・Cache  ApplicationCache よりも高度なキャッシュ機能 ・Push  PUSH 通知 ・Sync  指定した任意のタイミングで起動 http://www.w3.org/TR/service-workers/
  12. 12. PUSH 通知 Chrome は 42 から対応
  13. 13. Web の PUSH 通知事情 今までも Notification API を使う事で、通知は可能。 WebSocket 等でリアルタイム通信を行い、 Notification API でネイティブのような通知を発行。
  14. 14. ただし、 ブラウザを開いている時だけ。
  15. 15. Service Worker Worker Worker を登録 http://www.html5rocks.com/ja/tutorials/service-worker/introduction/ ①
  16. 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. 17. Service Worker GCM Server Google Cloud Messaging Chrome の場合 イベント通知 イベント通知 データ取得 イベ ン ト 通 知 スマホ等の
 ブラウザ ② ③ ④
  18. 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. 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. 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. 21. まとめ ・Web でもネイティブアプリのような PUSH 通知が実現できる時代になる!? ・iOS Safari での対応が待たれる…。
  22. 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/

×