WebPushAPIを使ってみよう

メドレー開発部TechLunchで発表した内容を掲載しました。

メドレーで開発部では、隔週で社内勉強会が開かれています。
今回は、「WebPushAPIを使ってみよう」というタイトルで、https://www.w3.org/TR/push-api/ の実装例を紹介し、WebPushAPIについて勉強しました。

発表者：宮内 勇樹

Transcript

1. WebPushAPI を使ってみよう
2. はじめに
3. 免責 雰囲気で書いているので間違ってるかも まだDraft だから今後動かなくなるかも ※ 本スライドは2017 年6 月時点における上記の情報 をもとに作成されています。
4. WebPushAPI の詳細な仕様 https://www.w3.org/TR/push-api/
6. 基本的な実装方法は Dependencies に書いてある https://www.w3.org/TR/push-api/#dependencies
7. Dependencies にはいろいろ書 いてあるが、、、
8. 以下の2 つを覚えればどうに かなる ServiceWorker Noti cation
9. プッシュ通知を送るために必 要な手順 1. ブラウザにサー ビスワー カー を登録する 2. 通知のパー ミッションを獲得する 3. サー バー からプッシュ通知を送るために必要なエ ンドポイントなどを取得する 4. エンドポイントに対してプッシュ通知の送る 以上のような手順でプッシュ通知を送ることができま す。
10. 実際に実装してみました miyucy/miyucy.github.io
11. 実装したのは３つだけ https://github.com/miyucy/miyucy.github.io/blob/ master/push.html https://github.com/miyucy/miyucy.github.io/blob/ master/push.js https://github.com/miyucy/miyucy.github.io/blob/ master/push-sw.js
12. push.js var sw = navigator.serviceWorker; sw.getRegistration().then(function(_) { sw.register("/push-sw.js", { scope: "/" }).then(function(_) { sw.ready.then(function(sw) { // : }); }); }); ※ スライドだと読みにくいので改変してます Service worker のライフサイクルむずいよね
13. 実際とても難しい https://developers.google.com/web/fundamentals/in stant-and-of ine/service-worker/lifecycle?hl=ja Service Worker のライフサイクルは、 最も複雑な 部分です。 その目的やメリットがわからない場合 は、 戦いを挑まれているかのようでしょう。 By Jake Archibald “ “
14. 通知の許可をハンドル Notification.requestPermission(function (permission) { if (permission !== 'denied') { Noti cation.requestPermission でハンドルします
15. よくあるこんなやつ 通知を送っても良いかのパー ミッションを取得する API です。 リファレンス
16. requestPermission で3 種類の 状態が得られる denied granted default
17. Push 通知を導入するには鍵な どが必要 var applicationServerKey = urlBase64ToUint8Array('BFn...'); sw.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey, }).then(function (subscription) {
18. userVisibleOnly について bool をとるけど、 true にしないと、 正しく通知を受 け取れなかったはず
19. applicationServerKey につい て リファレンス applicationServerKey: A public key your push server will use to send messages to client apps via a push server. This value is part of a signing key pair generated by your application server and usable with elliptic curve digital signature (ECDSA) over the P-256 curve. “ “
20. applicationServerKey の作り 方 楕円曲線暗号の公開鍵 ( 作り方は後述します) ArrayBuffer 型じゃないとエラー になるため、 URLsafe なBase64 からUInt8ArrayBuffer 型へ変換 しています
21. あと一歩 ここまで特にエラー が起こらなければ、 PushSubscription のインスタンスが取得できるはず。 あとは、 このインスタンスの情報を使って、Push 通 知を送るだけ。
22. Push 通知を受け取り表示 push-ws.js self.addEventListener('push', function (event) { var json = event.data.json(); self.registration.showNotification(json.title, { body: json.body, icon: json.icon }); }); addEventListener でpush イベントをlisten する デー タが来たら、Noti cation を表示するだけ
23. 簡単にするためgem 開発 miyucy/web_push
24. 作成背景 もともとweb-push-libs/web-push があって勉強のた めに作ったgem web-push にはGCM 対応が入っているが、 不要なため web_push にはGCM 対応は入れていない
25. zaru/webpush web_push を作る前から存在してるgem。 こちらには GCM 対応などが入ってる well-documented なので通常はこっちを使ったらいい と思うよ
26. 自作gem の使い方 https://github.com/miyucy/web_push#usage
27. まず鍵ペアをつくる pkey = WebPush::Utils.generate_vapid_pkey vapid_private_key = Base64.urlsafe_encode64(pkey.private_key.to_ vapid_public_key = Base64.urlsafe_encode64(pkey.public_key.to_bn
28. 公開鍵のほうをsubscribe 時に 使用する serviceWorker.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: 'VAPID Public key(ArrayBuffer, Uint8Arra }).then((subscription) => { ... })
29. あとは好きなpayload を送る だけ subscription = { endpoint: 'https://example.com/...', keys: { p256dh: 'URL-Safe Base64 String', auth: 'URL-Safe Base64 String', } } webpush = WebPush.new(subscription) webpush.set_vapid_details('mailto:sender@example.com', 'VAPID Public key(URL-Safe Base64 Stri 'VAPID Private key(URL-Safe Base64 Str webpush.send_notification("Payload String")
30. Demo
31. ちょっとしたバグのやりとり https://github.com/miyucy/web_push/issues/1 おかげでRuby v2.2 でも動作するようになりました
32. おしまい