接続が不安定な場合や信頼性が低い場合に、アプリやサイトの使用感がどのようになるかを理解し、それに応じて構築することが重要です。さまざまなツールが役立ちます。
低帯域幅と高レイテンシでテストする
モバイル デバイスでウェブを利用するユーザーの割合は 増加しています。自宅でも、 多くの人が固定ブロードバンドからモバイルに移行しています。
このコンテキストでは、接続が不安定な場合にアプリやサイトを使用するとどのような感じになるかを理解することが重要です。さまざまなソフトウェア ツールを使用して、低帯域幅と高レイテンシをエミュレートおよびシミュレートできます。
ネットワーク スロットリングをエミュレートする
サイトを構築または更新する際は、さまざまな接続条件で十分なパフォーマンスを確保する必要があります。いくつかのツールが役立ちます。
ブラウザツール
Chrome DevTools では、ネットワーク パネルのプリセットまたはカスタム設定を使用して、さまざまなアップロード / ダウンロード速度とラウンドトリップ時間でサイトをテストできます。基本については、ネットワーク パフォーマンスの分析のスタートガイドをご覧ください。
システム ツール
Network Link Conditioner は、Xcode 用の Hardware IO ツール をインストールすると Mac で利用できる設定パネルです。
デバイスのエミュレーション
Android Emulator を使用すると、Android でアプリ（ウェブブラウザやハイブリッド ウェブアプリなど）を実行しながら、さまざまなネットワーク条件をシミュレートできます。
iPhone の場合、Network Link Conditioner を使用して、ネットワーク状態の低下をシミュレートできます（上記を参照）。
さまざまな場所やネットワークからテストする
接続パフォーマンスは、サーバーの場所とネットワークの種類によって異なります。
WebPagetest は、さまざまなネットワークとホスト ロケーションを使用して、サイトの一連のパフォーマンス テストを実行できるオンライン サービスです。たとえば、インドのサーバーから 2G ネットワークでサイトを試したり、米国の都市からケーブルでサイトを試したりできます。
ロケーションを選択し、詳細設定から接続タイプを選択します。スクリプト（サイトへのログインなど）や RESTful API を使用して、テストを自動化することもできます。これにより、接続テストをビルドプロセスやパフォーマンス ロギングに組み込むことができます。
Fiddler は GeoEdge を介したグローバル プロキシをサポートしており、カスタムルールを使用してモデム速度をシミュレートできます。
障害のあるネットワークでテストする
ソフトウェア プロキシとハードウェア プロキシを使用すると、帯域幅のスロットリング、パケット遅延、ランダムなパケットロスなど、問題のあるモバイル ネットワークの状態をエミュレートできます。共有プロキシまたは障害のあるネットワークを使用すると、デベロッパー チームは実際のネットワーク テストをワークフローに組み込むことができます。
Facebook の Augmented Traffic Control（ATC）は、トラフィックをシェーピングし、ネットワーク状態の低下をエミュレートするために使用できる BSD ライセンスのアプリケーション セットです。
Facebook では、2G ユーザーがどのようにサービスを利用しているかを把握するために、2G Tuesdays という取り組みを導入しました。火曜日には、従業員に 2G 接続をシミュレートするオプションを提供するポップアップが表示されます。
Charles HTTP / HTTPS プロキシを使用すると、帯域幅とレイテンシを調整できます。Charles は商用ソフトウェアですが、無料試用版が用意されています。
Charles について詳しくは、codewithchris.com をご覧ください。
不安定な接続と「lie-fi」を処理する
lie-fi とは
lie-fi という用語は、少なくとも 2008 年（スマートフォンがこのような外観だった頃）にまでさかのぼり、見かけとは異なる接続性を指します。何らかの理由で接続が失われているにもかかわらず、ブラウザが接続されているかのように動作する。
接続性を誤って解釈すると、ブラウザ（または JavaScript）がリソースの取得を諦めて適切なフォールバックを選択するのではなく、リソースの取得を試み続けるため、エクスペリエンスが低下する可能性があります。Lie-fi は、実際にはオフラインよりも悪い状態です。デバイスが確実にオフラインであれば、JavaScript で適切な回避策を講じることができます。
Lie-Fi は、固定ブロードバンドからモバイルに移行するユーザーが増えるにつれて、より大きな問題になる可能性があります。最近の米国国勢調査データによると、固定ブロードバンドからの移行が進んでいます。次のグラフは、2013 年と 2015 年の自宅でのモバイル インターネットの使用状況を比較したものです。
タイムアウトを使用して断続的な接続を処理する
以前は、断続的な接続をテストするために XHR を使用したハック的な方法が使用されていましたが、Service Worker を使用すると、より信頼性の高い方法でネットワーク タイムアウトを設定できます。これは、Workbox を使用して、わずか数行のコードで実現できます。
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Workbox の詳細については、Jeff Posnick 氏の Chrome Dev Summit での講演「Workbox: Flexible PWA Libraries」をご覧ください。
タイムアウト機能は Fetch API 向けにも開発されており、Streams API はコンテンツ配信を最適化し、モノリシックなリクエストを回避するのに役立ちます。Jake Archibald が、Supercharging page load で lie-fi への対処について詳しく説明しています。