狠狠撸

W3C Push の話
＠shintaro tamaki

はじめに
本発表は、W3C Push APIを使用した、Push通知についてお話します。
2016年3月に私が実装した経験がもとになってます。
当時は今と比べて対応しているブラウザも少なく、
Amazon SNS、Firebase JavaScript SDKのような実装を簡単にしてくれる
ツールも対応してませんでした。
その際の苦労話も含め発表することで、
今後Push APIを使おうと検討されている方々の参考になれば幸いです。

ごあいさつ
● 玉木信太郎
● 株式会社ぐるなび
● 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.js
ID
GCM等
Push通知
登録
アクセス

ServiceWorkerとは ①
Service Worker の紹介
Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ペ
ージやユーザのインタラクションを必要としない機能を Web にもたらします。すでに現在、プッシュ通
知やバックグラウンド同期が提供されています。さらに将来は定期的な同期、ジオフェンシングなども
導入されるでしょう。このチュートリアルで説明する機能は、ネットワークリクエストへの介入や処理
機能と、レスポンスをプログラムから操作できるキャッシュ機能です。

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の記事を読みましょう。

使えるブラウザ
caniuseで確認できます。
http://caniuse.com/#search=service%20workers

実装するには
下記作業が必要となります???よね？
● 構成?アーキテクチャの検討
● 必要な機能の設計

Webページ
実装するには（構成?アーキテクチャ）
サービスとして提供するには下記が必要でした。
?通知したいタイミングで、Push通知を送信するバッチ
?IDを管理するDatabase、テーブル
?ServiceWorker登録時に発行されるIDをDatabaseに保管するJavascriptのリクエストと受信用API
ServiceWorker.js
GCM等
Push通知
登録
API
DB
バッチ

実装時の問題点
● 対応していないブラウザで
ServiceWorkerを登録しようとするとエラーに
当たり前ですが、JavascriptのCall順番によっては後続が動かないことになり
ます。
例：GoogleAnalyticsの計測とか
そのため、ServiceWorkerが使えることを確認して登録することが必要
チェック用のファンクションがあるので、それをCallしてください。

● PushAPIも対応していないブラウザでエラーになる
2016年2月の時点は
ServiceWerkerが使えるブラウザ＝Push APIが使えるブラウザ
ではなかった
caniuseで確認しましょう
● ServiceWorker
http://caniuse.com/#search=service%20workers
● Push API
http://caniuse.com/#search=Push%20API

● Opera問題
JavascriptでPush APIの機能を持っているか確認できるはずでしたが、正し
く応答を返さず、泣く泣くUserAgentで判定することになりました。
※ 现在は翱辫别谤补も笔耻蝉丑础笔滨が利用できるので、判定の必要はありません。

● Push通知サーバーの問題
ブラウザごとにPush通知用のサーバーが異なるため、ブラウザの情報もテー
ブルに登録する必要があり、UserAgentを登録することにしました。
バッチでUserAgentを判断し、ブラウザのバージョンも判定し処理を分けて
ました。

● ペイロードが指定できない
Push通知のペイロードにメッセージ等を入れて自由に文言を設定したかった
のですが、ちょうどChrome 49の時にリリースしたため、対応できてません
でした。
???でも、ディレクターの要望によりやりたいと???
なので最終的な構成は次のスライドのようになります

Webページ
要望をかなえるため下記機能を追加しました
?Push通知を受信した場合、特定のAPIをCallしメッセージを取得する
?Push送信をする際に、メッセージをRedisに保存する
ServiceWorker.js
GCM等
Push通知
登録
API
DB
バッチ
API Redis
Push通知

● ServiceWorkerからAPIへアクセスする
JQueryでなんとかなるだろうと思ってました。
が、ふたを開けてみると、JQueryってDOM（document.）使うんですよね～
いろいろ調べてServiceWorkerのFetch APIを使うことでリクエストできるよ
うになりましたが、さらなる問題が???

● 環境問題
当時は下記3環境がありました、環境毎にFetch APIのリクエスト先ドメイン
を変える必要がありました。
○ localhost
○ ステージング
○ 本番
ServiceWorkerは登録されたらアップデートしないと更新できないので、登
録時にドメインをセットしておかなければいけません。とはいえ、3環境の
ドメインを用意したServiceWorker.jsを用意するのも今後のメンテナンス性
に問題があるので、ドメイン部分を置換してリリースする仕組みを作成して

● 謎のCPU100％
ServiceWorkerのテスト中に謎のファンが高速に、後でプログラムミスだと
は分かったのですが、ブラウザが動かないので、まずブラウザを閉じてから
解析をすることに
※ この問題簡単にデバッグできないじゃん???

実装してみた感想
● 仕様的な問題もあり、意外と工数がかかった
当初見積もり3週間程度、実際は1.5か月程度
→ 初ものは何かと問題が多いです、バッファをしっかりと
● ServiceWorkerはChromeのディベロッパーツールでデバッグできたので実装
の間違いに気づきやすかった
→ Breakとコンソールログ重要
● DOM（document）を使わないJavascriptが新鮮なのでちょくちょくミスする
→ ServiceWorkerとブラウザのJSで頭の切り替えが必要です

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

狠狠撸

W3C Push の話

More Related Content

W3C Push の話