Z tego ćwiczenia w Codelabs dowiesz się, jak dostosować treści zależnie od jakości sieci. Film tła na tej stronie będzie wczytywać się tylko wtedy, gdy użytkownicy korzystają z szybkiej sieci. W przypadku wolniejszych sieci zamiast tego wczytywane jest zdjęcie.
Interfejs Network Information API umożliwia uzyskanie dostępu do informacji o jakości połączenia użytkownika. Na podstawie właściwości effectiveType
decydujesz, kiedy wyświetlić film, a kiedy obraz. effectiveType
może mieć wartość 'slow-2g'
, '2g'
, '3g'
lub '4g'
.
Krok 1. Sprawdź typ połączenia
Plik index.html
zawiera tag <video>
, który wyświetla film tła (wiersz 22). Kod w pliku script.js
wczytuje film, ustawiając atrybut src
tagu wideo. (kod wczytywania filmu jest bardziej szczegółowo opisany w kroku 2).
Aby wczytać film warunkowo, najpierw sprawdź, czy interfejs Network Information API jest dostępny. Jeśli tak, sprawdź typ połączenia.
- W
script.js
dodaj instrukcjęif
, która sprawdza, czy obiektnavigator.connection
istnieje i czy ma właściwośćeffectiveType
. - Dodaj instrukcję
if
, aby sprawdzićeffectiveType
sieci.
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.
}
}
Aby film był nadal ładowany w przeglądarkach, które nie obsługują interfejsu Network Information API, dodaj istniejący kod wczytywania filmu w instrukcję else
.
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 z 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
}
Oto jak działa kod wczytywania filmu: tag <video>
nie pobiera ani nie wyświetla niczego na początku, ponieważ jego atrybut src
nie jest ustawiony. Adres URL filmu do załadowania jest określony za pomocą atrybutu 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>
Atrybuty danych umożliwiają przechowywanie dodatkowych informacji o standardowych elementach HTML. Element danych może mieć dowolną nazwę, o ile zaczyna się od „data-”.
Aby faktycznie wyświetlić film na stronie, musisz pobrać wartość z elementu 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 zajmuje się pozycjonowaniem CSS:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
Krok 3. Załaduj obraz
Aby warunkowo wczytywać obrazy w przypadku wolniejszych sieci, zastosuj tę samą strategię co w przypadku filmów.
Dodaj element obrazu do 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 pliku script.js
dodaj kod, aby ustawić atrybut src
obrazu w zależności od 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 przetestować tę funkcję:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran.
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Sieć.
- Kliknij menu Ograniczanie, które domyślnie jest ustawione na Brak ograniczania. Wybierz Szybkie 3G.
Teraz ponownie załaduj stronę, gdy szybkie połączenie 3G jest nadal włączone. Aplikacja wczytuje obraz w tle zamiast filmu:
Dodatkowe punkty: reagowanie na zmiany
Pamiętasz, jak ten interfejs API ma detektor zdarzeń onchange
?
Umożliwia dynamiczne dostosowywanie treści (np. jakość wideo), ponowne uruchamianie odroczonych transferów danych w przypadku wykrycia zmiany na typ sieci o dużej przepustowości oraz powiadamianie użytkowników o zmianie jakości sieci.
Oto prosty przykład użycia tego odbiornika. Dodaj ją do script.js
. Ten kod wywoła funkcję displayNetworkInfo
, gdy tylko zmienią się informacje o sieci.
navigator.connection.addEventListener('change', displayNetworkInfo);
Na stronie index.html
jest już pusty element <h2>
. Zdefiniuj teraz funkcję displayNetworkInfo
, aby wyświetlała informacje o sieci w elemencie <h2>
, i wywołaj tę funkcję.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Oto końcowy stan aplikacji na Glitch.
Aby przetestować to ponownie:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran.
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Sieć.
- Kliknij menu Ograniczanie, które jest domyślnie ustawione na Bez ograniczania. Wybierz Szybkie 3G.
- Ponownie załaduj aplikację.
Aplikacja zaktualizuje informacje o sieci do 3g: