最高のネットワークアクセスにしようぜ！
JavaScriptからサーバに通信するときに気をつけること
気をつけること
- 接続のタイムアウト
- 自動再接続
- 通信前の回線接続確認
- 通信の遅延
- 通信失敗時の対応
- 複数の通信を一つにまとめる
- ローディングを表示する頻度
- WebWorkerでの通信
接続のタイムアウト
接続のタイムアウト
- ブラウザの標準設定は使わない
- アクセスする内容によってタイムアウト時間を変える
- XHR.timeoutは結構いいけど要確認
XHR.timeout
- 元々IEの独自仕様
- Chromeでも最近サポートされた
- 「xhr.timeout = 0」は「タイムアウトしない」指定なので注意
（setTimeoutと動きが違います）
- 'timeout' in xhrでpolyfillを
自動再接続
自動再接続
- 基本的にはユーザに確認せずにどんどん切断、接続を行う
- ただし、その場合コネクション管理はしっかりと
（ブラウザでセッション数の制限がある）
- バッテリー消費やネットワーク負荷に関してはまだどう考えていいかわからない
- ネットワークタイプによって接続方法を変えられればベスト？
ネットワークタイプの判別
- Android標準ブラウザ2.2以降、Firefoxで取得可能
- ネットワーク速度、従量課金の有無が取れる
（どこまでまじめに実装されてるか知らないけど。。。）
- navigator.connectionで検索してW3Cとかからどうぞ
（使ったことないので互換情報とか不明）
通信前の回線接続確認
回線接続確認
- navigator.onLine
- 「ネット、つながってますか？」
- 同期的に判断できるので、「既存のサイトでネット切れてたら遷移前に確認」とか後付も可能
- Android 2系以外は割と正確に取れる
（Android 2系もpolyfill可能）
- 「つながってなかった時どうする？」は別の問題としてある
（ユーザとしてどうなってほしい？）
通信の遅延
通信の遅延
- 通信内容の優先度付と、間引き
- 特に通知系は注意
- ユーザが判断できない速度で通知が来ても意味が無い
- あえて待ちを入れることで判断してもらう余裕をもたせる
- throttle
通信失敗時の対応
通信失敗時の対応
- ユーザとして「失敗しました」はつらい
- 「再送する」ボタンがほしい
- 再送して問題ないなら勝手に再送してほしい
- 投稿系でもサーバ側で2重投稿防止して勝手に再送してほしい
- Ajaxライブラリが送信パラメータ保持してると実装楽
複数の通信を一つにまとめる
複数の通信を一つにまとめる
- バッチリクエスト
- 「クライアントが送りたい形式」と「サーバが受け取りたい形式」の折衷案
- 初期化時の通信もまとめられるといい
- APIサーバとクライアントの中間にnodeとかいると実装しやすい
ローディングを表示する頻度
ローディングを表示する頻度
- 「ローディング画面がちらつく問題」
- 「ajax」->「ajaxの結果を処理」->「ajax」とかやると発生
- 「通信開始からローディング表示前に300msの待ちを入れる」のと、「通信終了後、ローディング非表示前に300msの待ちを入れる」ので回避できる
- できればローディングゲージを実装も検討
（同じ問題はあるけど）
WebWorkerでの通信
WebWorkerでの通信
- Worker内にもXMLHTTPRequest objectは存在する
- JSONでデータを取得するのであればJSON.parseには効果あるか？
- Workerの起動にもコストはかかるのでどこまで有効かわからない
- SSEとかWebSocketとかの常時接続系APIはWorker内がいいかも
- SharedWorker、Workerの使い回しも検討
ご清聴ありがとうございました