Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
W3C Push の話
@shintaro tamaki
はじめに
本発表は、W3C Push APIを使用した、Push通知についてお話します。
2016年3月に私が実装した経験がもとになってます。
当時は今と比べて対応しているブラウザも少なく、
Amazon SNS、Firebase JavaSc...
ごあいさつ
● 玉木 信太郎
● 株式会社 ぐるなび
● twitter:@tamaki_shintaro
● github:ShintaroTamaki
アイコンの由来
前職で使っていたアカウントのアイコンが猫でした、個人のアカウントと区別す...
アジェンダ
● はじめに
● W3C Push とは
● W3C Push の仕組み
● ServiceWorkerとは
● 使えるブラウザ
● 実装するには
● 実装あるある
● 実装してみた感想
W3C Push とは
● ブラウザで実現できるPush通知
● JavascriptとHTTP通信が行える言語(curlコマンドでもOK)であれば実装で
きます
Webページ
W3C Push の仕組み
Webページにアクセスした際に、ServiceWrokerの登録を行う。
その際、GCM等で使うIDが発行されるので、発行されたIDを使ってGCMにリクエストを送ると、PC、
スマホのブラウザにPush...
ServiceWorkerとは ①
Service Worker の紹介
Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ペ
ージやユーザのインタラクションを必要としない機能を ...
ServiceWorkerとは ②
続き
● Service Worker は JavaScript Worker のひとつです。ですので DOM に直接アクセスできません。
Service Worker がコントロールするページとの通信は p...
使えるブラウザ
caniuseで確認できます。
http://caniuse.com/#search=service%20workers
実装するには
下記作業が必要となります・・・よね?
● 構成・アーキテクチャの検討
● 必要な機能の設計
Webページ
実装するには(構成・アーキテクチャ)
サービスとして提供するには下記が必要でした。
・通知したいタイミングで、Push通知を送信するバッチ
・IDを管理するDatabase、テーブル
・ServiceWorker登録時に発行される...
実装時の問題点
● 対応していないブラウザで
ServiceWorkerを登録しようとするとエラーに
当たり前ですが、JavascriptのCall順番によっては後続が動かないことになり
ます。
例:GoogleAnalyticsの計測とか
そ...
実装時の問題点
● PushAPIも対応していないブラウザでエラーになる
2016年2月の時点は
ServiceWerkerが使えるブラウザ=Push APIが使えるブラウザ
ではなかった
caniuseで確認しましょう
● ServiceWo...
実装時の問題点
● Opera問題
JavascriptでPush APIの機能を持っているか確認できるはずでしたが、正し
く応答を返さず、泣く泣くUserAgentで判定することになりました。
※ 現在はOperaもPushAPIが利用できる...
実装時の問題点
● Push通知サーバーの問題
ブラウザごとにPush通知用のサーバーが異なるため、ブラウザの情報もテー
ブルに登録する必要があり、UserAgentを登録することにしました。
バッチでUserAgentを判断し、ブラウザのバー...
実装時の問題点
● ペイロードが指定できない
Push通知のペイロードにメッセージ等を入れて自由に文言を設定したかった
のですが、ちょうどChrome 49の時にリリースしたため、対応できてません
でした。
・・・でも、ディレクターの要望により...
Webページ
実装時の問題点
要望をかなえるため下記機能を追加しました
・Push通知を受信した場合、特定のAPIをCallしメッセージを取得する
・Push送信をする際に、メッセージをRedisに保存する
ServiceWorker.js
G...
実装時の問題点
● ServiceWorkerからAPIへアクセスする
JQueryでなんとかなるだろうと思ってました。
が、ふたを開けてみると、JQueryってDOM(document.)使うんですよね~
いろいろ調べてServiceWork...
実装時の問題点
● 環境問題
当時は下記3環境がありました、環境毎にFetch APIのリクエスト先ドメイン
を変える必要がありました。
○ localhost
○ ステージング
○ 本番
ServiceWorkerは登録されたらアップデートし...
実装時の問題点
● 謎のCPU100%
ServiceWorkerのテスト中に謎のファンが高速に、後でプログラムミスだと
は分かったのですが、ブラウザが動かないので、まずブラウザを閉じてから
解析をすることに
※ この問題簡単にデバッグできない...
実装してみた感想
● 仕様的な問題もあり、意外と工数がかかった
当初見積もり3週間程度、実際は1.5か月程度
→ 初ものは何かと問題が多いです、バッファをしっかりと
● ServiceWorkerはChromeのディベロッパーツールでデバッグで...
一緒に働いてくれるエンジニア募集中
https://corporate.gnavi.co.jp/recruit/career/
Upcoming SlideShare
Loading in …5
×

W3C Push の話

1,006 views

Published on

ブラウザだけで使るPush通知の下記について語ります。

W3C Push とは
W3C Push の仕組み
ServiceWorkerとは
使えるブラウザ
実装するには
実装あるある
実装してみた感想

一緒に働いてくれるエンジニア募集中
https://corporate.gnavi.co.jp/recruit/career/

Published in: Technology
  • Be the first to comment

W3C Push の話

  1. 1. W3C Push の話 @shintaro tamaki
  2. 2. はじめに 本発表は、W3C Push APIを使用した、Push通知についてお話します。 2016年3月に私が実装した経験がもとになってます。 当時は今と比べて対応しているブラウザも少なく、 Amazon SNS、Firebase JavaScript SDKのような実装を簡単にしてくれる ツールも対応してませんでした。 その際の苦労話も含め発表することで、 今後Push APIを使おうと検討されている方々の参考になれば幸いです。
  3. 3. ごあいさつ ● 玉木 信太郎 ● 株式会社 ぐるなび ● twitter:@tamaki_shintaro ● github:ShintaroTamaki アイコンの由来 前職で使っていたアカウントのアイコンが猫でした、個人のアカウントと区別するため、犬のアイコンに したところ、こっちのアイコンが目立つことに・・・ ちなみに猫派です
  4. 4. アジェンダ ● はじめに ● W3C Push とは ● W3C Push の仕組み ● ServiceWorkerとは ● 使えるブラウザ ● 実装するには ● 実装あるある ● 実装してみた感想
  5. 5. W3C Push とは ● ブラウザで実現できるPush通知 ● JavascriptとHTTP通信が行える言語(curlコマンドでもOK)であれば実装で きます
  6. 6. Webページ W3C Push の仕組み Webページにアクセスした際に、ServiceWrokerの登録を行う。 その際、GCM等で使うIDが発行されるので、発行されたIDを使ってGCMにリクエストを送ると、PC、 スマホのブラウザにPush通知が送信できます。 ServiceWorker.js ID GCM等 Push通知 登録 アクセス
  7. 7. ServiceWorkerとは ① Service Worker の紹介 Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ペ ージやユーザのインタラクションを必要としない機能を Web にもたらします。すでに現在、プッシュ通 知やバックグラウンド同期が提供されています。さらに将来は定期的な同期、ジオフェンシングなども 導入されるでしょう。このチュートリアルで説明する機能は、ネットワークリクエストへの介入や処理 機能と、レスポンスをプログラムから操作できるキャッシュ機能です。
  8. 8. ServiceWorkerとは ② 続き ● Service Worker は JavaScript Worker のひとつです。ですので DOM に直接アクセスできません。 Service Worker がコントロールするページとの通信は postMessage インターフェースから送られ るメッセージに返信することで行えます。DOM を操作したい場合は、コントロールするページ経 由で行えます。 ● Service Worker はプログラム可能なネットワークプロキシです。ページからのネットワークリクエ ストをコントロールできます。 ● Service Worker は使用されていない間は終了され、必要な時になったら起動します。ですので onfetch、onmessage ハンドラ内でグローバルに設定したステートに依存できません。持続的で再 利用可能な情報を Service Worker のライフサイクル間で共有したい場合は、IndexedDB API API にアクセスしなければいけません。 ● Service Worker は JavaScript の Promises を多用します。Promises についてよく知らない方はこ の記事を読むのをいったん止めて、Jake Archibaldの記事を読みましょう。
  9. 9. 使えるブラウザ caniuseで確認できます。 http://caniuse.com/#search=service%20workers
  10. 10. 実装するには 下記作業が必要となります・・・よね? ● 構成・アーキテクチャの検討 ● 必要な機能の設計
  11. 11. Webページ 実装するには(構成・アーキテクチャ) サービスとして提供するには下記が必要でした。 ・通知したいタイミングで、Push通知を送信するバッチ ・IDを管理するDatabase、テーブル ・ServiceWorker登録時に発行されるIDをDatabaseに保管するJavascriptのリクエストと受信用API ServiceWorker.js GCM等 Push通知 登録 API DB バッチ
  12. 12. 実装時の問題点 ● 対応していないブラウザで ServiceWorkerを登録しようとするとエラーに 当たり前ですが、JavascriptのCall順番によっては後続が動かないことになり ます。 例:GoogleAnalyticsの計測とか そのため、ServiceWorkerが使えることを確認して登録することが必要 チェック用のファンクションがあるので、それをCallしてください。
  13. 13. 実装時の問題点 ● PushAPIも対応していないブラウザでエラーになる 2016年2月の時点は ServiceWerkerが使えるブラウザ=Push APIが使えるブラウザ ではなかった caniuseで確認しましょう ● ServiceWorker http://caniuse.com/#search=service%20workers ● Push API http://caniuse.com/#search=Push%20API
  14. 14. 実装時の問題点 ● Opera問題 JavascriptでPush APIの機能を持っているか確認できるはずでしたが、正し く応答を返さず、泣く泣くUserAgentで判定することになりました。 ※ 現在はOperaもPushAPIが利用できるので、判定の必要はありません。
  15. 15. 実装時の問題点 ● Push通知サーバーの問題 ブラウザごとにPush通知用のサーバーが異なるため、ブラウザの情報もテー ブルに登録する必要があり、UserAgentを登録することにしました。 バッチでUserAgentを判断し、ブラウザのバージョンも判定し処理を分けて ました。
  16. 16. 実装時の問題点 ● ペイロードが指定できない Push通知のペイロードにメッセージ等を入れて自由に文言を設定したかった のですが、ちょうどChrome 49の時にリリースしたため、対応できてません でした。 ・・・でも、ディレクターの要望によりやりたいと・・・ なので最終的な構成は次のスライドのようになります
  17. 17. Webページ 実装時の問題点 要望をかなえるため下記機能を追加しました ・Push通知を受信した場合、特定のAPIをCallしメッセージを取得する ・Push送信をする際に、メッセージをRedisに保存する ServiceWorker.js GCM等 Push通知 登録 API DB バッチ API Redis Push通知
  18. 18. 実装時の問題点 ● ServiceWorkerからAPIへアクセスする JQueryでなんとかなるだろうと思ってました。 が、ふたを開けてみると、JQueryってDOM(document.)使うんですよね~ いろいろ調べてServiceWorkerのFetch APIを使うことでリクエストできるよ うになりましたが、さらなる問題が・・・
  19. 19. 実装時の問題点 ● 環境問題 当時は下記3環境がありました、環境毎にFetch APIのリクエスト先ドメイン を変える必要がありました。 ○ localhost ○ ステージング ○ 本番 ServiceWorkerは登録されたらアップデートしないと更新できないので、登 録時にドメインをセットしておかなければいけません。とはいえ、3環境の ドメインを用意したServiceWorker.jsを用意するのも今後のメンテナンス性 に問題があるので、ドメイン部分を置換してリリースする仕組みを作成して
  20. 20. 実装時の問題点 ● 謎のCPU100% ServiceWorkerのテスト中に謎のファンが高速に、後でプログラムミスだと は分かったのですが、ブラウザが動かないので、まずブラウザを閉じてから 解析をすることに ※ この問題簡単にデバッグできないじゃん・・・
  21. 21. 実装してみた感想 ● 仕様的な問題もあり、意外と工数がかかった 当初見積もり3週間程度、実際は1.5か月程度 → 初ものは何かと問題が多いです、バッファをしっかりと ● ServiceWorkerはChromeのディベロッパーツールでデバッグできたので実装 の間違いに気づきやすかった → Breakとコンソールログ重要 ● DOM(document)を使わないJavascriptが新鮮なのでちょくちょくミスする → ServiceWorkerとブラウザのJSで頭の切り替えが必要です
  22. 22. 一緒に働いてくれるエンジニア募集中 https://corporate.gnavi.co.jp/recruit/career/

×