ネットワーク情報APIを使用してレスポンシブWebサイトを改善する方法

キーテイクアウト

• ネットワーク情報APIは、メーターであるかどうか、帯域幅の見積もりなど、ユーザーのネットワーク接続に関する情報を提供することにより、レスポンシブWebサイトでのユーザーエクスペリエンスを大幅に向上させることができます。この情報は、画像、ビデオ、フォントなどなどのリソースを条件付きにロードするために使用でき、遅い接続またはメーターの接続でも最適なパフォーマンスを確保できます。
ネットワーク情報APIの実装には、JavaScriptを使用してAPIのプロパティとメソッドにアクセスすることが含まれます。 APIオブジェクトはNavigator.Connectionによって返され、帯域幅とメーターの2つの読み取り専用プロパティを提供します。これらのプロパティを使用して、ユーザーの接続ステータスに基づいて高解像度の画像またはその他の大きな資産を条件付けてロードできます。
• 潜在的な利点にもかかわらず、Network Information APIは現在、ブラウザのサポートが限られており、変更される可能性があります。ただし、ページが大きくなりすぎてモバイルネットワークのロードが遅くなるのを防ぐのに役立つため、モバイルに優しいWebサイトやアプリケーションを検討する価値があります。 APIが変更された場合、サイトが適切に反応し続けることを確認するために、関連する関数に更新を行うことができます。
レスポンシブWebデザインがWebに革命をもたらしました。単一のサイトは、さまざまなデバイスや画面で表示されると、レイアウトを適合させることができます。必要なのは、画面のサイズを検出し、代替スタイルまたはスタイルシートをロードするためのいくつかのメディアクエリだけです。 ただし、画面サイズを使用してブラウザ機能を検出することは、ラジオを見ることで車の速度を判断することに似ています。最新のスマートフォンとタブレットにはますます大きな解像度があり、典型的なデスクトップビューを喜んで表示します。そのビューが多数のフォント、画像、またはその他の資産を追加する場合、モバイルユーザーは、劣化した（
• および高価な
）を受け取ることができます。

ネットワーク情報api ネットワーク情報APIが役立つ場合があります。これは、ユーザーが従量課金などのメーター接続に搭載されているかどうかを示し、帯域幅の見積もりを提供します。この情報を使用すると、画像、ビデオ、フォント、その他のリソースを条件付きで読み込むことができます。基本レベルでは、メディアクエリをオーバーライドして、モバイルレイアウトが限られたネットワークに保持されるようにすることができます。 ブラウザサポート

ネットワーク情報APIドラフト仕様が2011年にリリースされているにもかかわらず、この時点ではFirefoxとChromeのみが実験的サポートを提供しています。ベンダーコンセンサスが得られるまで、APIは変更される場合があります。

帯域幅の評価は困難です。移動するにつれて頻繁に変更されるか、モバイルネットワークとWi-Fiネットワークを切り替えることができます。ネットワーク容量は良好かもしれませんが、特定のサーバーへの接続が存在することはありません。帯域幅の見積もりを最新の状態に保つことは、プロセッサであり、ネットワーク集約型である場合があります。

接続が計算されているかどうかをデバイスはどのようにして知ることができますか？速いWi-Fiでさえ、私が言及できるいくつかのホテルや空港では、滑dic的に恐ろしいコストを持っているかもしれません。 1つのオプションは、新しい接続が作成されたときにデバイスがあなたにプロンプ​​トを表示することです。

幸いなことに、オブジェクト検出を使用して、APIの存在を検出できます。 API Basics

ネットワーク情報APIオブジェクトは、navigator.connectionによって返されます。クロスブラウザーの互換性を確保するには、次のことが必要です。

IEは通常、非修正APIを実装していますが、そのリストにnavigator.msconnectionを追加することをお勧めします。 私たちのつながり オブジェクトは、2つの読み取り専用プロパティを提供します。

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

帯域幅 - MB/sの現在の帯域幅の推定を表す二重（1秒あたりのメガバイト）。ユーザーが決定できない場合は、ユーザーがオフラインで無限である場合、値はゼロになります。ほとんどのネットワークプロバイダーは1秒あたりのメガビットで値を引用し、典型的な忙しいモ​​バイル3G接続は約400Mbps〜 = 400,000ビット/s〜 = 50kb/s〜 = 0.05mb/s。
• メーター - ユーザーの接続が制限の対象となることを意味するブール値と、可能な限り帯域幅の使用は制限されるべきです。
例えば：
• 最後に、接続ステータスが変更されたときに変更イベントハンドラーを実行できます。
このコードでは、高い帯域幅が利用可能である場合、グローバル高帯域幅変数が真に設定されます。他のコードはそれに応じて反応する可能性があります。 highbandwidthがfalseの場合：

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

高解像度画像はロードされていません

<span>// default bandwidth
</span><span>var highBandwidth = false;
</span>
<span>// bandwidth change handler
</span><span>function <span>BandwidthChange</span>() {
</span>highBandwidth <span>= (!connection.metered && connection.bandwidth > 2);
</span><span>console.log(
</span><span>"switching to " +
</span><span>(highBandwidth ? "high" : "low") +
</span><span>" bandwidth mode"
</span><span>);
</span><span>}
</span>
<span>// Network Information object
</span><span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
</span>
<span>// initialize
</span><span>if (connection) {
</span>connection<span>.addEventListener("change", BandwidthChange);
</span><span><span>BandwidthChange</span>();
</span><span>}</span>

不要なフォントはロードされていません
ajaxポーリングは遅くなります
ajaxタイムアウトパラメーターが増加します

物事を少し簡単にするために、bandwidthchangeのボディータグにクラスを追加することができます 機能、例えば

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

これにより、CSSの背景画像などのアイテムを条件付きでロードできます。

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

この条件は、メディアクエリによってロードされたデスクトップレイアウトで引き続き確認できます。

ネットワーク情報APIを使用する必要がありますか？

執筆時点では、ネットワーク情報APIにはブラウザのサポートがほとんどなく、変更される可能性があります。とはいえ、モバイルデバイスで動作する必要があるWebサイトまたはアプリケーションを作成している場合、少し計画することで、ページが1.7MBに達するのを防ぐことができます。 APIが変更された場合、BandWidThchange関数を更新するだけで、サイトは適切に反応します。 私は確かに、ネットワーク情報APIは考慮する価値があると思います。 あなたは？ ネットワーク情報api

に関するよくある質問（FAQ）

ネットワーク情報APIとは何ですか？また、どのように機能しますか？

ネットワーク情報APIは、デバイスがWebと通信するために使用しているネットワーク接続に関する情報を提供するツールです。これにより、Webアプリケーションがデバイスのネットワークタイプと速度のステータスにアクセスできます。これは、コンテンツ配信を最適化するために使用できます。たとえば、ユーザーが遅いネットワーク上にある場合、ウェブサイトは低品質の画像を送信して負荷時間を改善することを選択できます。 🎜>ネットワーク情報APIを使用して、レスポンシブWebサイトでユーザーエクスペリエンスを強化できます。ユーザーのネットワーク条件を検出することにより、それに応じてウェブサイトの動作を適応させることができます。たとえば、ユーザーのネットワークが遅い場合、解像度の画像が低いか、ビデオコンテンツが少ないなど、送信するデータの量を減らすことができます。これにより、Webサイトの読み込み速度と全体的なパフォーマンスが大幅に向上します。

ネットワーク情報APIは、すべてのブラウザでサポートされていますか？

ネットワーク情報APIはすべてのブラウザーによってサポートされていません。現在のところ、Chrome、Opera、およびAndroidブラウザによってサポートされています。新しいAPIを実装する前に、「使用できますか」などのWebサイトの最新のブラウザ互換情報を確認することをお勧めします。 >ネットワーク情報APIの実装には、JavaScriptを使用してネットワーク情報APIのプロパティとメソッドにアクセスすることが含まれます。 navigator.connectionまたはnavigator.mozconnectionプロパティを使用して、ユーザーの接続を表すネットワーク情報オブジェクトを取得し、このオブジェクトのプロパティとイベントハンドラーを使用して、接続に関する情報を取得し、接続の変更に対応します。

ネットワーク情報APIからどのような情報を得ることができますか？

ネットワーク情報APIは、ユーザーのネットワーク接続に関する情報を提供するいくつかのプロパティを提供します。これらには、ダウンリンク、EffectiveType、およびRTTが含まれます。これは、1秒あたりのメガビットの帯域幅、接続の有効なタイプ、およびそれぞれミリ秒単位での往復時間を提供します。オフラインのステータスを検出しますか？

はい、ネットワーク情報APIを使用して、ユーザーのデバイスがオフラインであるかどうかを検出できます。 Navigator.onlineプロパティは、ユーザーのデバイスがオンラインであるかオフラインであるかを示すブール値を返します。見積もりであり、完全に正確ではない場合があります。最近観察されたネットワーク条件に基づいており、実際の現在のネットワーク条件を反映していない場合があります。したがって、ネットワーク条件の決定的な尺度ではなく、ガイドとして使用する必要があります。

ネットワーク情報APIはサービスワーカーで使用できますか？サービスワーカーと。これにより、ユーザーが遅いネットワーク上にいるときにより積極的にキャッシュするなど、ユーザーのネットワーク条件に基づいてサービスワーカーの動作を適応させることができます。

ネットワーク情報APIを使用して、ネットワークの条件に基づいてユーザーを指紋に供給できる可能性があります。ただし、APIはネットワークに関する粗粒の情報のみを提供し、この情報はネイティブアプリケーションでも利用できます。そのため、追加のプライバシーリスクは最小限です。 [>>

ネットワーク情報APIは、ユーザーエクスペリエンスを改善するためにさまざまな方法で使用できます。たとえば、ビデオストリーミングサイトは、ユーザーのネットワーク速度に基づいて適切なビデオ品質を自動的に選択するために使用できます。ニュースサイトでは、高解像度の画像をロードするか、低品質の画像をロードするかを決定することができます。 Webアプリは、ユーザーが遅いネットワーク上にあるときにユーザーに警告するために使用でき、一部の機能は最適に機能しない可能性があります。

以上がネットワーク情報APIを使用してレスポンシブWebサイトを改善する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。