Cara menggunakan API Maklumat Rangkaian untuk meningkatkan laman web responsif

3

Takeaways Key

• API Maklumat Rangkaian dapat meningkatkan pengalaman pengguna dengan ketara di laman web responsif dengan memberikan maklumat mengenai sambungan rangkaian pengguna, termasuk sama ada ia berukuran dan anggaran jalur lebar. Maklumat ini boleh digunakan untuk memuatkan sumber daya seperti imej, video, fon, dan lain -lain, memastikan prestasi optimum walaupun pada sambungan yang lebih perlahan atau beretus.
• Melaksanakan API Maklumat Rangkaian melibatkan penggunaan JavaScript untuk mengakses sifat dan kaedah API. Objek API dikembalikan oleh Navigator.Connection dan menyediakan dua sifat baca sahaja: jalur lebar dan meter. Ciri-ciri ini boleh digunakan untuk memuatkan imej resolusi tinggi atau aset besar lain berdasarkan status sambungan pengguna.
• Walaupun manfaatnya yang berpotensi, API Maklumat Rangkaian kini mempunyai sokongan penyemak imbas terhad dan tertakluk kepada perubahan. Walau bagaimanapun, ia masih patut dipertimbangkan untuk laman web atau aplikasi yang mesra mudah alih, kerana ia dapat membantu mencegah halaman menjadi terlalu besar dan lambat untuk memuatkan rangkaian mudah alih. Sekiranya API berubah, kemas kini boleh dibuat kepada fungsi yang berkaitan untuk memastikan tapak terus bertindak balas dengan sewajarnya.

Reka bentuk web responsif telah merevolusikan web. Satu laman web boleh menyesuaikan susun aturnya apabila dilihat pada pelbagai peranti dan skrin yang berbeza. Semua yang diperlukan adalah beberapa pertanyaan media untuk mengesan saiz skrin dan memuat gaya alternatif atau stylesheets. Walau bagaimanapun, dengan menggunakan saiz skrin untuk mengesan keupayaan penyemak imbas adalah sama dengan menilai kelajuan kereta dengan melihat radionya. Telefon pintar dan tablet moden mempunyai resolusi yang semakin besar dan dengan senang hati akan menunjukkan pandangan desktop biasa. Jika pandangan itu menambah banyak fon, imej atau aset lain, pengguna mudah alih mungkin menerima pengalaman yang terdegrad Api Maklumat Rangkaian API Maklumat Rangkaian boleh membantu. Ia menunjukkan sama ada pengguna berada pada sambungan meter, seperti pay-as-you-go, dan memberikan anggaran jalur lebar. Menggunakan maklumat ini, mungkin untuk memuatkan imej, video, fon dan sumber lain secara kondusif. Pada tahap asas, anda boleh mengatasi pertanyaan media untuk memastikan susun atur mudah alih dikekalkan pada rangkaian terhad.

Sokongan penyemak imbas

Walaupun maklumat draf API maklumat rangkaian dikeluarkan pada tahun 2011, hanya Firefox dan Chrome menawarkan sokongan eksperimen pada masa ini. Sehingga kita mempunyai konsensus vendor, API tertakluk kepada perubahan:

Menilai jalur lebar adalah sukar. Ia mungkin berubah dengan kerap semasa anda bergerak atau beralih antara rangkaian mudah alih dan Wi-Fi. Kapasiti rangkaian mungkin baik, tetapi ia tidak mengikuti sambungan ke pelayan tertentu. Mengekalkan anggaran jalur lebar yang terkini juga boleh menjadi pemproses dan intensif rangkaian.

• Bagaimanakah peranti boleh mengetahui sama ada sambungan anda berukuran? Walaupun Wi-Fi yang cepat mungkin mempunyai kos yang mengasyikkan di beberapa hotel dan lapangan terbang yang boleh saya sebutkan. Satu pilihan adalah untuk peranti untuk meminta anda apabila sambungan baru dibuat.

Nasib baik, kita boleh menggunakan pengesanan objek untuk mengesan kehadiran API.

Asas API

Objek API Maklumat Rangkaian dikembalikan oleh Navigator.Connection. Untuk memastikan keserasian penyemak imbas, kita perlukan:

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

Anda mungkin mahu menambah Navigator.MsConnection ke senarai itu, walaupun IE biasanya melaksanakan API yang tidak diprefix. Sambungan kami Objek menyediakan dua sifat baca sahaja:

• jalur lebar - Double mewakili anggaran jalur lebar semasa dalam MB/S (megabytes sesaat). Nilai akan menjadi sifar jika pengguna berada di luar talian dan tak terhingga jika ia tidak dapat ditentukan. NOTA Kebanyakan penyedia rangkaian memetik nilai dalam megabit sesaat dan sambungan 3G mudah alih yang biasa sibuk akan menjadi sekitar 400Mbps ~ = 400,000 bit/s ~ = 50kb/s ~ = 0.05MB/s.
• Metered - Boolean yang, apabila benar, bermakna sambungan pengguna adalah tertakluk kepada batasan dan penggunaan jalur lebar harus dibatasi jika mungkin.

Contohnya:

<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>

Akhirnya, kita boleh melaksanakan pengendali acara perubahan apabila status sambungan berubah, mis.

<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>

Dalam kod ini, pembolehubah Highbandwidth global akan ditetapkan benar apabila jalur lebar tinggi tersedia. Kod lain boleh bertindak balas dengan sewajarnya, mis. Apabila Highbandwidth palsu:

1. imej resolusi tinggi tidak dimuatkan
2. fon yang tidak perlu tidak dimuatkan
3. pengundian ajax diperlahankan
4. parameter tamat masa AJAX meningkat

Untuk membuat perkara sedikit lebih mudah, anda boleh menambahkan kelas ke tag badan dalam jalur lebar fungsi, mis.

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

Ini membolehkan kita memuatkan item seperti imej latar belakang dalam CSS, mis.

<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>

Keadaan ini masih boleh diperiksa dalam susun atur desktop yang dimuatkan oleh pertanyaan media.

Sekiranya anda menggunakan API Maklumat Rangkaian?

Pada masa penulisan, API Maklumat Rangkaian mempunyai sokongan penyemak imbas sedikit dan boleh berubah. Yang mengatakan, jika anda membuat laman web atau aplikasi yang mesti berfungsi pada peranti mudah alih, perancangan sedikit sekarang dapat menghalang halaman anda dari mencapai 1.7MB. Jika API berubah, anda hanya perlu mengemas kini fungsi BandwidthChange dan laman web anda akan bertindak balas dengan sewajarnya. Saya pasti fikir API Maklumat Rangkaian patut dipertimbangkan. adakah anda?

Soalan Lazim (Soalan Lazim) Mengenai Api Maklumat Rangkaian

Apakah API Maklumat Rangkaian dan bagaimana ia berfungsi? Ia membolehkan aplikasi web mengakses status jenis dan kelajuan rangkaian peranti, yang boleh digunakan untuk mengoptimumkan penghantaran kandungan. Sebagai contoh, jika pengguna berada di rangkaian yang perlahan, laman web boleh memilih untuk menghantar imej berkualiti rendah untuk meningkatkan masa beban.

Bagaimana saya boleh menggunakan API Maklumat Rangkaian untuk meningkatkan laman web responsif saya?

API Maklumat Rangkaian boleh digunakan untuk meningkatkan pengalaman pengguna di laman web responsif anda. Dengan mengesan keadaan rangkaian pengguna, anda boleh menyesuaikan tingkah laku laman web anda dengan sewajarnya. Sebagai contoh, jika rangkaian pengguna perlahan, anda boleh mengurangkan jumlah data yang anda hantar, seperti imej resolusi yang lebih rendah atau kurang kandungan video. Ini dapat meningkatkan kelajuan pemuatan dan prestasi keseluruhan laman web anda.

Adakah API Maklumat Rangkaian yang disokong oleh semua pelayar? Setakat ini, ia disokong oleh pelayar Chrome, Opera, dan Android. Adalah idea yang baik untuk menyemak maklumat keserasian penyemak imbas terkini di laman web seperti "Bolehkah Saya Menggunakan" sebelum melaksanakan API baru. > Melaksanakan API Maklumat Rangkaian melibatkan penggunaan JavaScript untuk mengakses sifat dan kaedah API Maklumat Rangkaian. Anda boleh menggunakan Navigator.Connection atau Navigator.MozConnection Properties untuk mendapatkan objek rangkaian yang mewakili sambungan pengguna, dan kemudian gunakan sifat objek dan pengendali acara ini untuk mendapatkan maklumat mengenai sambungan dan bertindak balas terhadap perubahan dalam sambungan.

Apa jenis maklumat yang boleh saya dapatkan dari API Maklumat Rangkaian? Ini termasuk downlink, effectiveType, dan rtt, yang menyediakan jalur lebar dalam megabit sesaat, jenis sambungan yang berkesan, dan masa perjalanan bulat dalam milisaat, masing-masing. Mengesan status luar talian?

Ya, API Maklumat Rangkaian boleh digunakan untuk mengesan jika peranti pengguna di luar talian. Navigator.Online Property mengembalikan nilai boolean yang menunjukkan sama ada peranti pengguna dalam talian atau di luar talian. adalah anggaran dan mungkin tidak benar -benar tepat. Ia berdasarkan keadaan rangkaian yang diperhatikan baru -baru ini dan mungkin tidak mencerminkan keadaan rangkaian semasa yang sebenarnya. Oleh itu, ia harus digunakan sebagai panduan dan bukannya ukuran keadaan rangkaian yang pasti. dengan pekerja perkhidmatan. Ini membolehkan anda menyesuaikan tingkah laku pekerja perkhidmatan anda berdasarkan keadaan rangkaian pengguna, seperti caching lebih agresif apabila pengguna berada di rangkaian yang perlahan.

Apakah implikasi privasi menggunakan API Maklumat Rangkaian? API Maklumat Rangkaian API boleh berpotensi digunakan untuk pengguna cap jari berdasarkan keadaan rangkaian mereka. Walau bagaimanapun, API hanya menyediakan maklumat kasar mengenai rangkaian, dan maklumat ini juga tersedia untuk aplikasi asli, jadi risiko privasi tambahan adalah minimum. API Maklumat Rangkaian boleh digunakan dalam pelbagai cara untuk meningkatkan pengalaman pengguna. Sebagai contoh, tapak streaming video boleh menggunakannya untuk memilih kualiti video yang sesuai secara automatik berdasarkan kelajuan rangkaian pengguna. Laman berita boleh menggunakannya untuk memutuskan sama ada untuk memuat imej resolusi tinggi atau yang berkualiti rendah. Aplikasi web boleh menggunakannya untuk memberi amaran kepada pengguna apabila mereka berada di rangkaian yang perlahan dan beberapa ciri mungkin tidak berfungsi secara optimum.

Atas ialah kandungan terperinci Cara menggunakan API Maklumat Rangkaian untuk meningkatkan laman web responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!