ネイティブアプリのようにプッシュ通知を送ることができる、ServiceWorker + PushAPIについて。

1. ServiceWorkerと
Webプッシュ通知
2015.01.29 @zaru

2. 桜庭@ZARU
株式会社ベーシック CTO
GitHub: zaru
Twitter: @zaru
Qiita: zaru
会社でRuby書いたり、JavaScript書いたり、PHP書いたり、AWSでインフラ
作ったり、社内制度・開発文化を作ったりいろいろやってます。プログラミ
ングが大好きです。
個人では、Gem作ったり、ネタサービス作ったりしてます。

4. Qiitaアドベントカレンダー2015

5. ServiceWorkerとは
Webプッシュ通知のパフォーマンス
ServiceWorkerの実装
開発の仕方
これからのWebプッシュ通知
デモ
アジェンダ

6. ServiceWorkerとは

7. 今までのWeb

8. これからのWeb
ServiceWorker
CacheAPI
Push Notification
FetchAPI
Background Sync API

9. ServiceWorker
JavaScriptで書かれたワーカー
ページの裏側で別スレッドで動く
URL単位のスコープでインストールされる
DOMにはさわれない
ページが閉じられていても動く
HTTPSでのみ動く

10. これからのWeb
ServiceWorker
CacheAPI
Push Notification
FetchAPI
Background Sync API

11. Webプッシュ通知
ネイティブアプリのように通知が出せる
バックグラウンドで受信可能
Chrome42〜 / Firefox44〜対応

12. ServiceWorker
Webプッシュ通知の流れ
②endpointを送信
①プッシュの許可
③GCMへPOST
④ブラウザへPush
⑤通知の表示

13. P R

14. 個人でWebプッシュ通知の
サービスを作りました

15. https://pushnate.com

16. Webプッシュ通知
パフォーマンス

17. Pushnateのサービスサイトで
実際に配信してみました

18. ServiceWorker実装

19. ServiceWorkerライフサイクル
参照: http://www.html5rocks.com/ja/tutorials/service-worker/introduction/

20. ServiceWorkerのインストール
ServiceWorkerのscope
SWのスクリプトが配置されているディレクトリ以下のみ
scope設定が可能。scope対象のURLのみSWから操作が
可能

21. プッシュ通知の登録
得られるendpoint
https://android.googleapis.com/gcm/send/M:APbGOE7q（省略）

22. 通知の表示
現時点で、表示するメッセージなどのデータ（payload）
を通知にのせることはできません。Chrome49 /
Firefox44でpayloadに対応予定。
今は、fetchで頑張る！

23. クリック時の挙動

24. GCMへのPOST
curl --header "Authorization: key=【APIキー】"
--header Content-Type:"application/json"
https://android.googleapis.com/gcm/send
-d "{"registration_ids":["【endpoint】"]}"

25. 開発の仕方

26. ServiceWorker一覧
chrome://serviceworker-internals/

27. ServiceWorker強制更新

28. これからの
Webプッシュ通知

29. プッシュ通知の表示時間
Chrome47からデフォルト20sec
requireInteraction: trueを指定することで固定にできる

30. Chrome48から、通知に
アクションボタンを設定できる。

31. アクションボタンの振り分け

32. Chrome49から念願のpayloadsが…？！

34. 時間が余ったらデモ
https://github.com/zaru/web-push-sample

35. # shutdown -h now
ありがとうございました