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