WebPushAPI を使ってみよう

はじめに

免責 雰囲気で書いているので間違ってるかも まだDraft だから今後動かなくなるかも ※ 本スライドは2017 年6 月時点における上記の情報 をもとに作成されています。

WebPushAPI の詳細な仕様 https://www.w3.org/TR/push-api/

No content

基本的な実装方法は Dependencies に書いてある https://www.w3.org/TR/push-api/#dependencies

Dependencies にはいろいろ書 いてあるが、、、

以下の2 つを覚えればどうに かなる ServiceWorker Noti cation

プッシュ通知を送るために必 要な手順 1. ブラウザにサー ビスワー カー を登録する 2. 通知のパー ミッションを獲得する 3. サー バー からプッシュ通知を送るために必要なエ ンドポイントなどを取得する 4. エンドポイントに対してプッシュ通知の送る 以上のような手順でプッシュ通知を送ることができま す。

実際に実装してみました miyucy/miyucy.github.io

実装したのは３つだけ 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

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 のライフサイクルむずいよね

実際とても難しい https://developers.google.com/web/fundamentals/in stant-and-of ine/service-worker/lifecycle?hl=ja Service Worker のライフサイクルは、 最も複雑な 部分です。 その目的やメリットがわからない場合 は、 戦いを挑まれているかのようでしょう。 By Jake Archibald “ “

通知の許可をハンドル Notification.requestPermission(function (permission) { if (permission !== 'denied') { Noti cation.requestPermission でハンドルします

よくあるこんなやつ 通知を送っても良いかのパー ミッションを取得する API です。 リファレンス

requestPermission で3 種類の 状態が得られる denied granted default

Push 通知を導入するには鍵な どが必要 var applicationServerKey = urlBase64ToUint8Array('BFn...'); sw.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey, }).then(function (subscription) {

userVisibleOnly について bool をとるけど、 true にしないと、 正しく通知を受 け取れなかったはず

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. “ “

applicationServerKey の作り 方 楕円曲線暗号の公開鍵 ( 作り方は後述します) ArrayBuffer 型じゃないとエラー になるため、 URLsafe なBase64 からUInt8ArrayBuffer 型へ変換 しています

あと一歩 ここまで特にエラー が起こらなければ、 PushSubscription のインスタンスが取得できるはず。 あとは、 このインスタンスの情報を使って、Push 通 知を送るだけ。

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 を表示するだけ

簡単にするためgem 開発 miyucy/web_push

作成背景 もともとweb-push-libs/web-push があって勉強のた めに作ったgem web-push にはGCM 対応が入っているが、 不要なため web_push にはGCM 対応は入れていない

zaru/webpush web_push を作る前から存在してるgem。 こちらには GCM 対応などが入ってる well-documented なので通常はこっちを使ったらいい と思うよ

自作gem の使い方 https://github.com/miyucy/web_push#usage

まず鍵ペアをつくる 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

公開鍵のほうをsubscribe 時に 使用する serviceWorker.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: 'VAPID Public key(ArrayBuffer, Uint8Arra }).then((subscription) => { ... })

あとは好きな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:[email protected]', 'VAPID Public key(URL-Safe Base64 Stri 'VAPID Private key(URL-Safe Base64 Str webpush.send_notification("Payload String")

Demo

ちょっとしたバグのやりとり https://github.com/miyucy/web_push/issues/1 おかげでRuby v2.2 でも動作するようになりました

おしまい