Z tego ćwiczenia w programowaniu dowiesz się, jak dostosowywać treści w zależności od jakości sieci. Film w tle tej strony będzie wczytywany tylko wtedy, gdy użytkownicy korzystają z szybkiej sieci. W wolniejszych sieciach wczytuje się obraz.
Interfejs Network Information API zapewnia dostęp do informacji o jakości połączenia użytkownika. Użyj jej właściwości effectiveType, aby zdecydować, kiedy wyświetlić film, a kiedy obraz. effectiveType to 'slow-2g', '2g', '3g' lub '4g'.
Krok 1. Sprawdź typ połączenia
Plik index.html zawiera tag <video>, który wyświetla film w tle (wiersz 22). Kod w pliku script.js wczytuje film, ustawiając atrybut src tagu wideo. (więcej informacji o kodzie wczytywania filmu znajdziesz w kroku 2).
Aby warunkowo wczytać film, najpierw sprawdź, czy interfejs Network Information API jest dostępny. Jeśli tak, sprawdź typ połączenia.
- W
script.jsdodaj instrukcjęif, która sprawdza, czy obiektnavigator.connectionistnieje i czy ma właściwośćeffectiveType. - Dodaj instrukcję
if, aby sprawdzaćeffectiveTypesieci.
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.
}
}
Umieść istniejący kod wczytywania filmu w instrukcji else, aby film nadal wczytywał się w przeglądarkach, które nie obsługują interfejsu 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');
}
Krok 2. Wczytaj film
Jeśli effectiveType to '4g', użyj kodu wczytywania filmu widocznego na początku ćwiczeń z programowania.
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
}
Kod wczytywania filmu działa w ten sposób: tag <video> na początku niczego nie pobiera ani nie wyświetla, bo jego atrybut src nie jest ustawiony. Adres URL filmu, który ma zostać wczytany, jest określony w atrybucie data-src.
<video id="coverVideo" autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
Atrybuty danych umożliwiają przechowywanie dodatkowych informacji o standardowych elementach HTML. Element danych może mieć dowolną nazwę, jeśli tylko zaczyna się od „data-”.
Aby film tak naprawdę wyświetlał się na stronie, musisz uzyskać wartość z data-src i ustawić ją jako atrybut src elementu wideo.
Najpierw pobierz element DOM zawierający zasób:
const video = document.getElementById('coverVideo');
Następnie pobierz lokalizację zasobu z atrybutu data-src:
const videoSource = video.getAttribute('data-src');
Na koniec ustaw go jako atrybut src elementu wideo:
video.setAttribute('src', videoSource);
Ostatni wiersz odpowiada za pozycjonowanie CSS:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
Krok 3. Wczytaj obraz
Aby warunkowo wczytywać obraz w wolniejszych sieciach, zastosuj tę samą strategię co w przypadku filmu.
Dodaj element graficzny do elementu index.html (zaraz po elemencie wideo) i użyj atrybutu data-src zamiast atrybutu src.
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
W narzędziu script.js dodaj kod, który ustawia atrybut src obrazu w zależności od zasobu effectiveType sieci.
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');
}
Wypróbuj
Aby to sprawdzić:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
. - Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Kliknij menu Ograniczanie, w którym domyślnie ustawiona jest wartość Bez ograniczania. Wybierz Szybka 3G.
Teraz załaduj ponownie stronę przy włączonej sieci Szybka 3G. Aplikacja wczytuje obraz w tle zamiast filmu:
Dodatkowy udział: reaguj na zmiany
Pamiętasz, jak ten interfejs API ma onchange
detektor zdarzeń?
Możesz używać go do wielu rzeczy: dynamicznego dostosowywania treści, np. jakości wideo, ponownego uruchamiania odroczonego przesyłania danych po wykryciu zmiany typu sieci o dużej przepustowości, lub informowania użytkowników o zmianie jakości sieci.
Oto prosty przykład, jak można wykorzystać ten detektor. Dodaj do script.js. Ten kod będzie wywoływać funkcję displayNetworkInfo przy każdej zmianie informacji o sieci.
navigator.connection.addEventListener('change', displayNetworkInfo);
Na stronie index.html jest już pusty element <h2>. Teraz zdefiniuj funkcję displayNetworkInfo, aby w elemencie <h2> wyświetlała informacje o sieci i wywołała ją.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Oto końcowy stan aplikacji w Usterce.
Aby przetestować go ponownie:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
.
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Kliknij menu Ograniczanie, w którym domyślnie ustawiona jest wartość Bez ograniczania. Wybierz Szybka 3G.
- Załaduj ponownie aplikację.
Aplikacja zaktualizuje informacje o sieci do 3G:
