Upload
zaru-sakuraba
View
1.205
Download
0
Embed Size (px)
Citation preview
ServiceWorkerとWebプッシュ通知
2015.01.29 @zaru
桜庭@ZARU株式会社ベーシック CTO
GitHub: zaruTwitter: @zaruQiita: zaru
会社でRuby書いたり、JavaScript書いたり、PHP書いたり、AWSでインフラ作ったり、社内制度・開発文化を作ったりいろいろやってます。プログラミングが大好きです。
個人では、Gem作ったり、ネタサービス作ったりしてます。
Qiitaアドベントカレンダー2015
ServiceWorkerとは
Webプッシュ通知のパフォーマンス
ServiceWorkerの実装
開発の仕方
これからのWebプッシュ通知
デモ
アジェンダ
ServiceWorkerとは
今までのWeb
これからのWeb
ServiceWorker
CacheAPI
Push NotificationFetchAPI
Background Sync API
ServiceWorker
JavaScriptで書かれたワーカー
ページの裏側で別スレッドで動く
URL単位のスコープでインストールされる
DOMにはさわれない
ページが閉じられていても動く
HTTPSでのみ動く
これからのWeb
ServiceWorker
CacheAPI
Push NotificationFetchAPI
Background Sync API
Webプッシュ通知
ネイティブアプリのように通知が出せる
バックグラウンドで受信可能
Chrome42〜 / Firefox44〜対応
ServiceWorker
Webプッシュ通知の流れ
②endpointを送信
①プッシュの許可
③GCMへPOST
④ブラウザへPush
⑤通知の表示
P R
個人でWebプッシュ通知の
サービスを作りました
https://pushnate.com
Webプッシュ通知パフォーマンス
Pushnateのサービスサイトで実際に配信してみました
ServiceWorker実装
ServiceWorkerライフサイクル
参照: http://www.html5rocks.com/ja/tutorials/service-worker/introduction/
ServiceWorkerのインストール
ServiceWorkerのscope
SWのスクリプトが配置されているディレクトリ以下のみ
scope設定が可能。scope対象のURLのみSWから操作が
可能
プッシュ通知の登録
得られるendpointhttps://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/
ServiceWorker強制更新
これからのWebプッシュ通知
プッシュ通知の表示時間
Chrome47からデフォルト20secrequireInteraction: trueを指定することで固定にできる
Chrome48から、通知に
アクションボタンを設定できる。
アクションボタンの振り分け
Chrome49から念願のpayloadsが…?!
時間が余ったらデモ
https://github.com/zaru/web-push-sample
# shutdown -h now ありがとうございました