Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebPushAPIを使ってみよう

 WebPushAPIを使ってみよう

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

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

発表者:宮内 勇樹

Medley Inc.

July 11, 2017
Tweet

More Decks by Medley Inc.

Other Decks in Technology

Transcript

  1. プッシュ通知を送るために必 要な手順 1. ブラウザにサー ビスワー カー を登録する 2. 通知のパー ミッションを獲得する

    3. サー バー からプッシュ通知を送るために必要なエ ンドポイントなどを取得する 4. エンドポイントに対してプッシュ通知の送る 以上のような手順でプッシュ通知を送ることができま す。
  2. 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 のライフサイクルむずいよね
  3. 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. “ “
  4. 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 を表示するだけ
  5. あとは好きな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")