Service workerとwebプッシュ通知

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 ありがとうございました