狠狠撸

狠狠撸Share a Scribd company logo
ServiceWorkerと
Webプッシュ通知
2015.01.29 @zaru
桜庭@ZARU
株式会社ベーシック CTO
GitHub: zaru
Twitter: @zaru
Qiita: zaru
会社でRuby書いたり、JavaScript書いたり、PHP書いたり、AWSでインフラ
作ったり、社内制度?開発文化を作ったりいろいろやってます。プログラミ
ングが大好きです。
個人では、Gem作ったり、ネタサービス作ったりしてます。
Service workerとwebフ?ッシュ通知
蚕颈颈迟补アドベントカレンダー2015
厂别谤惫颈肠别奥辞谤办别谤とは
Webプッシュ通知のパフォーマンス
ServiceWorkerの実装
开発の仕方
これからのWebプッシュ通知
デモ
アジェンダ
厂别谤惫颈肠别奥辞谤办别谤とは
今までの奥别产
これからのWeb
ServiceWorker
CacheAPI
Push Notification
FetchAPI
Background Sync API
ServiceWorker
JavaScriptで書かれたワーカー
ページの裏側で別スレッドで動く
URL単位のスコープでインストールされる
DOMにはさわれない
ページが閉じられていても動く
HTTPSでのみ動く
これからのWeb
ServiceWorker
CacheAPI
Push Notification
FetchAPI
Background Sync API
Webプッシュ通知
ネイティブアプリのように通知が出せる
バックグラウンドで受信可能
Chrome42? / Firefox44?対応
ServiceWorker
Webプッシュ通知の流れ
②endpointを送信
①プッシュの許可
③GCMへPOST
④ブラウザへPush
⑤通知の表示
P R
個人でWebプッシュ通知の
サービスを作りました
https://pushnate.com
Webプッシュ通知
パフォーマンス
Pushnateのサービスサイトで
実際に配信してみました
厂别谤惫颈肠别奥辞谤办别谤実装
ServiceWorkerライフサイクル
参照: http://www.html5rocks.com/ja/tutorials/service-worker/introduction/
ServiceWorkerのインストール
ServiceWorkerのscope
SWのスクリプトが配置されているディレクトリ以下のみ
scope設定が可能。scope対象のURLのみSWから操作が
可能
プッシュ通知の登録
得られるendpoint
https://android.googleapis.com/gcm/send/M:APbGOE7q(省略)
通知の表示
現時点で、表示するメッセージなどのデータ(payload)
を通知にのせることはできません。Chrome49 /
Firefox44でpayloadに対応予定。
今は、fetchで頑張る!
クリック时の挙动
GCMへのPOST
curl --header "Authorization: key=【APIキー】"
--header Content-Type:"application/json"
https://android.googleapis.com/gcm/send
-d "{"registration_ids":["【endpoint】"]}"
开発の仕方
ServiceWorker一覧
chrome://serviceworker-internals/
厂别谤惫颈肠别奥辞谤办别谤强制更新
これからの
Webプッシュ通知
プッシュ通知の表示時間
Chrome47からデフォルト20sec
requireInteraction: trueを指定することで固定にできる
Chrome48から、通知に
アクションボタンを設定できる。
アクションボタンの振り分け
颁丑谤辞尘别49から念愿の辫补测濒辞补诲蝉が…?!
Service workerとwebフ?ッシュ通知
時間が余ったらデモ
https://github.com/zaru/web-push-sample
# shutdown -h now
ありがとうございました

More Related Content

Service workerとwebフ?ッシュ通知