Dalam codelab ini, Anda akan mempelajari cara menyesuaikan konten berdasarkan kualitas jaringan. Video latar belakang halaman ini hanya akan dimuat saat pengguna menggunakan jaringan yang cepat. Di jaringan yang lebih lambat, gambar akan dimuat sebagai gantinya.
Network Information API
memungkinkan Anda mengakses informasi tentang kualitas koneksi pengguna. Anda akan
menggunakan properti effectiveType
-nya untuk memutuskan kapan harus menayangkan video dan kapan
harus menayangkan gambar. effectiveType
dapat berupa 'slow-2g'
, '2g'
, '3g'
, atau '4g'
.
Langkah 1: Periksa jenis koneksi
File index.html
berisi tag <video>
untuk menampilkan video latar belakang (baris 22). Kode di script.js
memuat video dengan menetapkan atribut src
tag video. (Kode pemuatan video dijelaskan secara lebih mendetail di Langkah 2.)
Untuk memuat video secara kondisional, periksa terlebih dahulu apakah Network Information API tersedia; jika tersedia, periksa jenis koneksinya.
- Di
script.js
, tambahkan pernyataanif
yang menguji apakah objeknavigator.connection
ada dan apakah objek tersebut memiliki propertieffectiveType
. - Tambahkan pernyataan
if
untuk memeriksaeffectiveType
jaringan.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// Only load video on the fastest connections.
} else {
// In any other case load the image.
}
}
Gabungkan kode pemuatan video yang ada dalam pernyataan else
, sehingga video akan
tetap dimuat di browser yang tidak mendukung Network Information API.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// video loading code
} else {
// image loading code
}
} else {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
Langkah 2: Muat video
Jika effectiveType
adalah '4g'
, gunakan kode pemuatan video dari
awal codelab.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
// image loading code
}
Berikut cara kerja kode pemuatan video: tag <video>
tidak mendownload atau menampilkan apa pun pada awalnya karena atribut src
-nya tidak ditetapkan. URL video yang akan dimuat ditentukan menggunakan atribut data-src
.
<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
Atribut data memungkinkan Anda menyimpan informasi tambahan pada elemen HTML standar. Elemen data dapat diberi nama apa pun, asalkan diawali dengan "data-".
Untuk benar-benar menampilkan video di halaman, Anda perlu mendapatkan nilai dari data-src
dan menetapkannya sebagai atribut src
elemen video.
Pertama, dapatkan elemen DOM yang berisi aset:
const video = document.getElementById('coverVideo');
Kemudian, dapatkan lokasi resource dari atribut data-src
:
const videoSource = video.getAttribute('data-src');
Terakhir, tetapkan sebagai atribut src
elemen video:
video.setAttribute('src', videoSource);
Baris terakhir menangani pemosisian CSS:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
Langkah 3: Muat gambar
Untuk memuat gambar secara kondisional di jaringan yang lebih lambat, gunakan strategi yang sama seperti untuk video.
Tambahkan elemen gambar ke index.html
(tepat setelah elemen video), dan gunakan
atribut data-src
, bukan atribut src
.
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
Di script.js
, tambahkan kode untuk menetapkan atribut src
gambar bergantung pada
effectiveType
jaringan.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
const image = document.getElementById('coverImage');
const imageSource = image.getAttribute('data-src');
image.setAttribute('src', imageSource);
image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
Cobalah
Untuk mengujinya sendiri:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Klik drop-down Throttling, yang disetel ke No throttling secara default. Pilih 3G Cepat.
Sekarang, muat ulang halaman dengan 3G Cepat masih diaktifkan. Aplikasi memuat gambar di latar belakang, bukan video:
Kredit Tambahan: Merespons perubahan
Ingat bagaimana API ini memiliki pemroses peristiwa onchange
?
Anda dapat menggunakannya untuk banyak hal: menyesuaikan konten secara dinamis seperti kualitas video; memulai ulang transfer data yang ditangguhkan saat perubahan pada jenis jaringan dengan bandwidth tinggi terdeteksi; atau memberi tahu pengguna saat kualitas jaringan berubah.
Berikut adalah contoh sederhana cara menggunakan pemroses ini. Tambahkan ke script.js
. Kode
ini akan memanggil fungsi displayNetworkInfo
setiap kali informasi
jaringan berubah.
navigator.connection.addEventListener('change', displayNetworkInfo);
Sudah ada elemen <h2>
kosong di halaman index.html
. Sekarang tentukan
fungsi displayNetworkInfo
agar menampilkan informasi jaringan di
elemen <h2>
dan panggil fungsi.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Berikut adalah status akhir aplikasi di Glitch.
Untuk mengujinya lagi:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Klik drop-down Throttling, yang disetel ke No throttling secara default. Pilih 3G Cepat.
- Muat ulang aplikasi.
Aplikasi akan memperbarui informasi jaringan menjadi 3g: