Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0

Share

Download to read offline

Service workerとwebプッシュ通知

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Service workerとwebプッシュ通知

  1. 1. ServiceWorkerと Webプッシュ通知 2015.01.29 @zaru
  2. 2. 桜庭@ZARU 株式会社ベーシック CTO GitHub: zaru Twitter: @zaru Qiita: zaru 会社でRuby書いたり、JavaScript書いたり、PHP書いたり、AWSでインフラ 作ったり、社内制度・開発文化を作ったりいろいろやってます。プログラミ ングが大好きです。 個人では、Gem作ったり、ネタサービス作ったりしてます。
  3. 3. Qiitaアドベントカレンダー2015
  4. 4. ServiceWorkerとは Webプッシュ通知のパフォーマンス ServiceWorkerの実装 開発の仕方 これからのWebプッシュ通知 デモ アジェンダ
  5. 5. ServiceWorkerとは
  6. 6. 今までのWeb
  7. 7. これからのWeb ServiceWorker CacheAPI Push Notification FetchAPI Background Sync API
  8. 8. ServiceWorker JavaScriptで書かれたワーカー ページの裏側で別スレッドで動く URL単位のスコープでインストールされる DOMにはさわれない ページが閉じられていても動く HTTPSでのみ動く
  9. 9. これからのWeb ServiceWorker CacheAPI Push Notification FetchAPI Background Sync API
  10. 10. Webプッシュ通知 ネイティブアプリのように通知が出せる バックグラウンドで受信可能 Chrome42〜 / Firefox44〜対応
  11. 11. ServiceWorker Webプッシュ通知の流れ ②endpointを送信 ①プッシュの許可 ③GCMへPOST ④ブラウザへPush ⑤通知の表示
  12. 12. P R
  13. 13. 個人でWebプッシュ通知の サービスを作りました
  14. 14. https://pushnate.com
  15. 15. Webプッシュ通知 パフォーマンス
  16. 16. Pushnateのサービスサイトで 実際に配信してみました
  17. 17. ServiceWorker実装
  18. 18. ServiceWorkerライフサイクル 参照: http://www.html5rocks.com/ja/tutorials/service-worker/introduction/
  19. 19. ServiceWorkerのインストール ServiceWorkerのscope SWのスクリプトが配置されているディレクトリ以下のみ scope設定が可能。scope対象のURLのみSWから操作が 可能
  20. 20. プッシュ通知の登録 得られるendpoint https://android.googleapis.com/gcm/send/M:APbGOE7q(省略)
  21. 21. 通知の表示 現時点で、表示するメッセージなどのデータ(payload) を通知にのせることはできません。Chrome49 / Firefox44でpayloadに対応予定。 今は、fetchで頑張る!
  22. 22. クリック時の挙動
  23. 23. GCMへのPOST curl --header "Authorization: key=【APIキー】" --header Content-Type:"application/json" https://android.googleapis.com/gcm/send -d "{"registration_ids":["【endpoint】"]}"
  24. 24. 開発の仕方
  25. 25. ServiceWorker一覧 chrome://serviceworker-internals/
  26. 26. ServiceWorker強制更新
  27. 27. これからの Webプッシュ通知
  28. 28. プッシュ通知の表示時間 Chrome47からデフォルト20sec requireInteraction: trueを指定することで固定にできる
  29. 29. Chrome48から、通知に アクションボタンを設定できる。
  30. 30. アクションボタンの振り分け
  31. 31. Chrome49から念願のpayloadsが…?!
  32. 32. 時間が余ったらデモ https://github.com/zaru/web-push-sample
  33. 33. # shutdown -h now ありがとうございました

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

Views

Total views

3,287

On Slideshare

0

From embeds

0

Number of embeds

85

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×