HTML5: Web 情報 API を探索する

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃導入＃＃＃

Web デザインの分野で最も議論されている概念の 1 つは、レスポンシブ Web デザインです。レスポンシブ Web デザインについては何千もの記事が書かれているため、この記事では説明しません。ただし、レスポンシブ Web デザインには重要な制限があり、レスポンシブ Web デザインは主にブラウザーのビューポートのサイズに基づいています。

この方法は、正しいサイズと解像度の画像を配信する場合には優れていますが、ビデオ コンテンツなど、あらゆる状況に適しているわけではありません。このような場合、本当に必要なのは、デバイスのネットワーク接続に関する詳細情報です。

スマートフォンまたはタブレットで YouTube にアクセスしているとします。あなたは家にいて、Wi-Fi 経由で接続しています。この場合、ダウンロードされるバイト数は気にせず、高品質のビデオ コンテンツのみに関心があります。低速のモバイル接続で接続している場合は、この限りではありません。この場合、ビデオを見たいのですが、品質は二の次です。

Web サイトを本当に優れたものにしたいと願うすべての開発者は、ページができるだけ早く読み込まれるように、Web サイトが提供するリソースを最適化する必要があることを明確にしておく必要があります。ただし、上記の例では、高解像度ビデオを提供することでユーザーの帯域幅が無駄にならず、ユーザー エクスペリエンスが向上します。

ネットワーク情報 API は、まさにデバイスのネットワーク接続について詳しく知る必要がある場所です。

1.

それは何ですか?

ネットワーク情報 API は、システムがネットワーク、携帯ネットワーク、Wi-Fi、Bluetooth などと通信するために使用する接続タイプへのアクセスを提供します。また、接続タイプが変更されたときにスクリプトに通知する方法も提供します。これは、開発者が DOM に動的変更を加えたり、ネットワーク接続タイプが変更されたことをユーザーに通知したりできるようにするためです。

ネットワーク情報 API 仕様は 2011 年に初めて公開されましたが、それ以来、API は数回変更されました。その証拠に、現在のバージョンは単なる編集草案であり、将来的に変更が生じる可能性があることを意味します。これらの変更にもかかわらず、この API の使用例は非常に興味深いものであり、検討する価値があります。この記事では、仕様の最新バージョンについて説明しますが、後で説明する理由により、いくつかの非推奨のプロパティとイベントについても説明します。

2.

実装

Network Information API の現在のバージョンは、

window.navigator

オブジェクトに属するconnectionオブジェクトを公開します。

connection

オブジェクトには、ユーザー エージェントの接続タイプを返す 1 つのプロパティtypeが含まれています。type属性には次のいずれかの値を指定できます:＃＃＃ブルートゥース＃＃＃＃＃＃＃＃＃携帯電話

＃＃＃＃＃＃イーサネット＃＃＃＃＃＃ ＃＃＃＃＃＃なし＃＃＃＃＃＃ ＃＃＃＃＃＃Wi-Fi＃＃＃＃＃＃ ＃＃＃＃＃＃他の＃＃＃＃＃＃ ＃＃＃＃＃＃未知＃＃＃＃＃＃
• これらの値には、bluetooth や

  wifi

など、一目瞭然のものもあれば、さらに説明が必要な値もあります。
• セルラータイプは、EDGE、3G、4G などのモバイル接続を指します。other
タイプは、現在の接続タイプが
• unknownではないが、他のタイプでもないことを示します。unknown
タイプは、ユーザー エージェントがネットワーク接続を確立したが、接続タイプが何であるかを判断できないことを示します。
• ネットワーク情報 API は、type
に加えて、
• ontypechangeイベントも公開します。これは、ネットワーク接続の種類が変更されるたびにトリガーされます。
開発者は、ネットワーク情報 API を使用して、現在の接続タイプに基づいて特定の機能を変更できます。たとえば、デバイスがモバイル接続を使用していることを検出した場合、帯域幅を大量に消費するプロセスを遅くすることができます。この API を使用すると、Modernizr と同じように、
• high-bandwidthなどの特定のクラスをhtml
要素に割り当てることもできます。 CSS を使用して、背景画像などの要素の 1 つ以上のプロパティを変更できます。
• Network Information API が何をするのか、そしてそこから何が得られるのかがわかったので、どのブラウザがこの API をサポートしているかを見てみましょう。

3.

ブラウザのサポートこの記事の執筆時点では、Network Information API は、ベンダー プレフィックスを使用する Firefox および Chrome Canary でのみサポートされています。 Chrome Canary で API を使用するには、Experimental Web Platform featuresフラグを有効にする必要があります。詳細については、Paul Irish によるこの記事をご覧ください。Network Information API のサポートが十分ではないかのように、Firefox の最新バージョンであるバージョン 30 は古い API 仕様をサポートしています。したがって、ネットワーク情報 API を今すぐ使用したい場合は、以前の API 仕様で公開されているプロパティとイベントを必ず確認してください。

古い仕様では、bandwidthとmeteredという 2 つのプロパティが公開されていました。bandwidthプロパティは、現在の帯域幅の推定値をメガバイト/秒 (MB/s) で表す double 値です。meteredこのプロパティは、デバイスのネットワーク接続が制限を受けるかどうかを指定するブール値です。以前の仕様では、上記のプロパティの変更をリスナーに通知するonchangeイベントも定義されていました。

仕様の新しいバージョンと古いバージョンについて理解していただくために、次のセクションでは両方のバージョンを使用するデモを構築します。

4.デモンストレーション

これまで、API によって公開されるプロパティとイベント、および API の使用例を紹介してきました。このセクションでは、API の動作を確認するための簡単な Web ページを作成します。

デモは、3 つのリスト項目の順序なしリストを含む HTML5 ページで構成されています。各プロジェクトには、Network Messaging API の古い仕様と新しい仕様で公開されているプロパティ値を検証するテキスト スニペットが含まれています。リスト項目はデフォルトでは非表示になっており、対応する属性がサポートされている場合にのみ表示されます。

デモでは、ブラウザーが古い API 仕様 (Firefox 用) を実装しているかどうか、およびブラウザーがネットワーク情報 API をサポートしているかどうかも検出します。最初のケースでは、Old API Version Supportedメッセージが表示され、2 番目のケースでは、API Not Supportedメッセージが表示されます。

Network Information API でサポートされるテストは非常に単純で、次のとおりです:

リーリー

実装されたバージョンが古い仕様かどうかを検出するには、次のようにmetered属性が存在するかどうかをテストします。 リーリー

ネットワーク情報 API のサポートをテストし、ブラウザーでサポートされている仕様のバージョンを確認したら、ハンドラーを正しいイベントにアタッチできます。ハンドラー内で、新しい API 仕様の

typeなど、対応するリスト項目のテキストを更新します。

デモの完全なコードは以下にありますので、必要に応じて使用できます。

リーリー ＃＃＃結論は＃＃＃

この記事では、Network Information API について紹介しました。この記事の最初の部分では、API とは何か、API で何ができるのかについて説明しました。また、Network Information API が公開するプロパティとイベントについても学びました。

ブラウザのサポート

で述べたように、API 仕様の一部の変更により、API は現在十分にサポートされていません。

Network Information API は非常に使いやすく、ブラウザがサポートするようになれば、提供される情報を活用しない理由はありません。この API についてどう思いますか?もっと多くのブラウザがサポートしたら、それを使用しますか?

以上がHTML5: Web 情報 API を探索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。