HTML5: Teroka API Maklumat Web-tutorial js-php.cn

HTML5：探索网络信息 API

Pengenalan

Salah satu konsep yang paling banyak dibincangkan dalam bidang reka bentuk web ialah reka bentuk web responsif. Beribu-ribu artikel telah ditulis tentang reka bentuk web responsif, jadi saya tidak akan membincangkannya dalam artikel ini. Walau bagaimanapun, reka bentuk web responsif mempunyai had penting Reka bentuk web responsif kebanyakannya berdasarkan saiz port pandangan penyemak imbas.

Walaupun kaedah ini bagus untuk menyampaikan imej dengan saiz dan resolusi yang betul, kaedah ini tidak sesuai untuk setiap situasi, kandungan video menjadi satu contoh. Dalam kes ini, perkara yang sebenarnya kami perlukan ialah maklumat lanjut tentang sambungan rangkaian peranti.

Andaikan anda mengakses YouTube pada telefon pintar atau tablet anda. Anda berada di rumah dan disambungkan melalui Wi-Fi. Dalam kes ini, anda tidak mengambil berat tentang bilangan bait yang dimuat turun, anda hanya berminat dengan kandungan video berkualiti tinggi. Ini tidak berlaku jika anda menyambung melalui sambungan mudah alih yang perlahan. Dalam kes ini, anda ingin menonton video, kualiti adalah kedua.

Saya harus jelas bahawa setiap pembangun yang mahu tapak web mereka benar-benar hebat masih perlu mengoptimumkan sumber yang disediakan untuk membolehkan halaman dimuatkan secepat mungkin. Walau bagaimanapun, dalam contoh di atas, menyiarkan video resolusi tinggi tidak membazirkan lebar jalur pengguna tetapi meningkatkan pengalaman pengguna.

API Maklumat Rangkaian ialah tempat kita perlu mengetahui lebih lanjut tentang sambungan rangkaian peranti.

1.Apa itu?

API Maklumat Rangkaian menyediakan akses kepada jenis sambungan yang digunakan sistem untuk berkomunikasi dengan rangkaian, rangkaian selular, Wi-Fi, Bluetooth dan banyak lagi. Ia juga menyediakan cara untuk memberitahu skrip apabila jenis sambungan berubah. Ini adalah untuk membolehkan pembangun membuat perubahan dinamik pada DOM dan/atau memberitahu pengguna bahawa jenis sambungan rangkaian telah berubah.

Spesifikasi API Maklumat Rangkaian mula diterbitkan pada tahun 2011, tetapi API telah berubah beberapa kali sejak itu. Sebagai bukti, versi semasa hanyalah draf editorial, yang bermaksud perubahan pasti akan berlaku pada masa hadapan.

Walaupun perubahan ini, kes penggunaan untuk API ini sangat menarik dan sangat berbaloi untuk diterokai. Dalam artikel ini kita akan membincangkan versi terkini spesifikasi, tetapi kita juga akan melihat beberapa sifat dan peristiwa yang tidak digunakan atas sebab yang akan saya jelaskan kemudian.

2.Pelaksanaan

Versi semasa API Maklumat Rangkaian mendedahkan objek connection yang dimiliki oleh objek window.navigator. Objek connection mengandungi sifat, type, yang mengembalikan jenis sambungan ejen pengguna. Atribut type boleh mempunyai salah satu daripada nilai berikut: window.navigator 对象的 connection 对象。 connection 对象包含一个属性，type，该属性返回用户代理的连接类型。 type 属性可以具有以下值之一：

蓝牙
cellular
以太网
none
wifi
其他
未知

其中一些值是不言自明的，例如 bluetooth 和 wifi，而其他值则需要更多解释。 cellular 类型是指移动连接，例如 EDGE、3G、4G 等。 other 类型表示当前连接类型不是 unknown，但它也不是任何其他类型。 unknown 类型表示用户代理已建立网络连接，但无法确定连接类型是什么。

除了 type 之外，网络信息 API 还公开 ontypechange 事件。每次网络连接类型发生变化时都会触发它。

开发者可以使用网络信息 API 根据当前的连接类型更改某些功能。例如，如果我们检测到设备正在使用移动连接，我们可以减慢占用大量带宽的进程。 API 还允许我们将特定的类分配给 html 元素，例如 high-bandwidth

Bluetooth
selular
Ethernet
tiada
wifi
Lain
Tidak diketahui

Sesetengah daripada nilai ini adalah jelas, seperti bluetooth dan wifi, manakala yang lain memerlukan penjelasan lanjut. Jenis selular merujuk kepada sambungan mudah alih seperti EDGE, 3G, 4G, dsb. Jenis lain menunjukkan bahawa jenis sambungan semasa bukanlah unknown, tetapi ia juga bukan jenis lain. Jenis unknown menunjukkan bahawa ejen pengguna telah mewujudkan sambungan rangkaian tetapi tidak dapat menentukan jenis sambungan itu.

Selain `type`, API Maklumat Rangkaian juga mendedahkan acara `ontypechange`. Ia dicetuskan setiap kali jenis sambungan rangkaian berubah.

Pembangun boleh menggunakan API Maklumat Rangkaian untuk menukar ciri tertentu berdasarkan jenis sambungan semasa. Contohnya, jika kami mengesan bahawa peranti menggunakan sambungan mudah alih, kami boleh memperlahankan proses intensif lebar jalur. API juga membenarkan kami untuk menetapkan kelas tertentu kepada elemen html, seperti bandwidth tinggi, dengan cara yang sama seperti Modernizr. Kita boleh menggunakan CSS untuk menukar satu atau lebih sifat unsur, seperti imej latar belakang.

Sekarang kita tahu apa yang API Maklumat Rangkaian lakukan dan perkara yang boleh kita manfaatkan, mari lihat penyemak imbas yang menyokong API.

Sokongan pelayar🎜 🎜Pada masa penulisan, API Maklumat Rangkaian hanya disokong oleh Firefox dan Chrome Canary menggunakan awalan vendor mereka. Dalam Chrome Canary, kita mesti mendayakan bendera 🎜Ciri Platform Web Eksperimen🎜 untuk menggunakan API. Anda boleh mendapatkan maklumat lanjut dalam artikel ini oleh Paul Irish. 🎜 🎜Seolah-olah sokongan untuk API Maklumat Rangkaian tidak cukup buruk, versi terkini Firefox, versi 30, menyokong spesifikasi API lama. Oleh itu, jika anda ingin menggunakan API Maklumat Rangkaian sekarang, pastikan anda menyemak sifat dan peristiwa yang didedahkan oleh spesifikasi API sebelumnya. 🎜

Spesifikasi lama mendedahkan dua sifat: bandwidth dan metered. Atribut bandwidth ialah nilai berganda yang mewakili anggaran lebar jalur semasa dalam megabait sesaat (MB/s). Atribut metered ialah nilai Boolean yang menentukan sama ada sambungan rangkaian peranti tertakluk kepada sebarang sekatan. Spesifikasi sebelumnya juga mentakrifkan acara onchange untuk memberitahu mana-mana pendengar tentang perubahan pada sifat di atas. bandwidth 和 metered。 bandwidth 属性是一个双精度值，表示当前带宽的估计值（以兆字节每秒 (MB/s) 为单位）。 metered 属性是一个布尔值，指定设备的网络连接是否受到任何限制。之前的规范还定义了 onchange 事件，以通知任何侦听器上述属性的更改。

为了让您了解规范的新版本和旧版本，在下一节中我们将构建一个使用这两个版本的演示。

4. 演示

到目前为止，我们已经介绍了 API 公开的属性和事件以及 API 的用例。在本部分中，我们将创建一个简单的网页来查看 API 的运行情况。

该演示由一个 HTML5 页面组成，该页面包含一个包含三个列表项的无序列表。每个项目都包含一个文本片段，用于验证网络信息 API 的旧规范和新规范公开的属性值。列表项默认隐藏，仅在支持相应属性时才显示。

该演示还检测浏览器是否实现旧的 API 规范（针对 Firefox）以及浏览器是否支持网络信息 API。在第一种情况下，您将看到支持旧 API 版本消息，在第二种情况下，将显示不支持 API 消息。

网络信息 API 支持的测试非常简单，如下所示：

// Deal with vendor prefixes
var connection = window.navigator.connection    ||
                 window.navigator.mozConnection ||
                 null;
if (connection === null) {
   // API not supported :(
} else {
   // API supported! Let's start the fun :)
}

Salin selepas log masuk

要检测实现的版本是否是旧规范，我们可以测试 metered 属性是否存在，如下所示：

if ('metered' in connection) {
   // Old version
} else {
   // New version
}

Salin selepas log masuk

一旦我们测试了对网络信息 API 的支持，并确定了浏览器支持的规范版本，我们就可以将处理程序附加到正确的事件。在处理程序内，我们更新相应列表项的文本，例如新 API 规范的 type

Untuk memberi anda gambaran tentang versi baharu dan lama spesifikasi, dalam bahagian seterusnya kami akan membina demo menggunakan kedua-dua versi.

4. Demonstrasi

Setakat ini, kami telah memperkenalkan sifat dan peristiwa yang didedahkan oleh API serta kes penggunaan API. Dalam bahagian ini, kami membuat halaman web ringkas untuk melihat API dalam tindakan.

Demo ini terdiri daripada halaman HTML5 yang mengandungi senarai tiga item senarai yang tidak tertib. Setiap projek mengandungi serpihan teks yang mengesahkan nilai sifat yang didedahkan oleh spesifikasi lama dan spesifikasi baharu API Pemesejan Rangkaian. Item senarai disembunyikan secara lalai dan hanya ditunjukkan jika atribut yang sepadan disokong.

Demo juga mengesan sama ada penyemak imbas melaksanakan spesifikasi API lama (untuk Firefox) dan sama ada penyemak imbas menyokong API Maklumat Rangkaian. Dalam kes pertama, anda akan melihat

versi API lama yang disokong

mesej, dalam kes kedua mesej #🎜🎜# API tidak disokong #🎜🎜# akan dipaparkan. #🎜🎜# #🎜🎜#Ujian yang disokong oleh API Maklumat Rangkaian adalah sangat mudah, seperti yang ditunjukkan di bawah: #🎜🎜#

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta name="author" content="Aurelio De Rosa">
      <title>Network Information API Demo by Aurelio De Rosa</title>
      <style>
         *
         {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }

         body
         {
            max-width: 500px;
            margin: 2em auto;
            padding: 0 0.5em;
            font-size: 20px;
         }

         h1
         {
            text-align: center;
         }

         .api-support
         {
            display: block;
         }

         .hidden
         {
            display: none;
         }

         .value
         {
            font-weight: bold;
         }

         .author
         {
            display: block;
            margin-top: 1em;
         }
      </style>
   </head>
   <body>
      <h1>Network Information API</h1>

      <span id="ni-unsupported" class="api-support hidden">API not supported</span>
      <span id="nio-supported" class="api-support hidden">Old API version supported</span>

      <ul>
         <li class="new-api hidden">
            The connection type is <span id="t-value" class="value">undefined</span>.
         </li>
         <li class="old-api hidden">
            The connection bandwidth is <span id="b-value" class="value">undefined</span>.
         </li>
         <li class="old-api hidden">
            The connection is <span id="m-value" class="value">undefined</span>.
         </li>
      </ul>

      <small class="author">
         Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>
         (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />
         This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML5-API-demos">HTML5 API demos repository</a>.
      </small>

      <script>
         var connection = window.navigator.connection    ||
                          window.navigator.mozConnection ||
                          null;
         if (connection === null) {
            document.getElementById('ni-unsupported').classList.remove('hidden');
         } else if ('metered' in connection) {
            document.getElementById('nio-supported').classList.remove('hidden');
            [].slice.call(document.getElementsByClassName('old-api')).forEach(function(element) {
               element.classList.remove('hidden');
            });

            var bandwidthValue = document.getElementById('b-value');
            var meteredValue = document.getElementById('m-value');

            connection.addEventListener('change', function (event) {
               bandwidthValue.innerHTML = connection.bandwidth;
               meteredValue.innerHTML = (connection.metered ? '' : 'not ') + 'metered';
            });
            connection.dispatchEvent(new Event('change'));
         } else {
            var typeValue = document.getElementById('t-value');
            [].slice.call(document.getElementsByClassName('new-api')).forEach(function(element) {
               element.classList.remove('hidden');
            });

            connection.addEventListener('typechange', function (event) {
               typeValue.innerHTML = connection.type;
            });
            connection.dispatchEvent(new Event('typechange'));
         }
      </script>
   </body>
</html>

Salin selepas log masuk

#🎜🎜# Untuk mengesan sama ada versi yang dilaksanakan ialah spesifikasi lama, kami boleh menguji sama ada atribut metered hadir, seperti ini: #🎜🎜# rrreee #🎜🎜#Setelah kami menguji sokongan untuk API Maklumat Rangkaian dan mengenal pasti versi spesifikasi yang disokong oleh penyemak imbas, kami boleh melampirkan pengendali pada acara yang betul. Dalam pengendali, kami mengemas kini teks item senarai yang sepadan, contohnya type untuk spesifikasi API baharu. #🎜🎜# #🎜🎜#Anda boleh mendapatkan kod penuh untuk demo di bawah dan anda boleh menggunakannya jika anda mahu. #🎜🎜# rrreee #🎜🎜#KESIMPULAN#🎜🎜# #🎜🎜#Dalam artikel ini, saya memperkenalkan anda kepada API Maklumat Rangkaian. Dalam bahagian pertama artikel ini, kami membincangkan apa itu API dan perkara yang boleh dilakukannya untuk kami. Kami juga mempelajari sifat dan peristiwa yang didedahkan oleh API Maklumat Rangkaian. Seperti yang saya nyatakan dalam #🎜🎜#Sokongan Penyemak Imbas#🎜🎜#, API pada masa ini kurang disokong, sebahagiannya disebabkan oleh beberapa perubahan dalam spesifikasi API. #🎜🎜# #🎜🎜#API Maklumat Rangkaian sangat mudah digunakan dan sekali lagi pelayar menyokongnya, tiada sebab untuk tidak mengambil kesempatan daripada maklumat yang diberikannya. Apa pendapat anda tentang API ini? Adakah anda akan menggunakannya apabila lebih banyak pelayar menyokongnya? #🎜🎜#

Atas ialah kandungan terperinci HTML5: Teroka API Maklumat Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!