이 Codelab에서는 네트워크 품질에 따라 콘텐츠를 조정하는 방법을 알아봅니다. 이 페이지의 백그라운드 동영상은 사용자가 빠른 네트워크에 있을 때만 로드됩니다. 네트워크 속도가 느린 경우 이미지가 대신 로드됩니다.
Network Information API를 사용하면 사용자의 연결 품질에 관한 정보에 액세스할 수 있습니다. effectiveType
속성을 사용하여 동영상 게재 시점과 이미지 게재 시점을 결정합니다. effectiveType
는 'slow-2g'
, '2g'
, '3g'
, '4g'
일 수 있습니다.
1단계: 연결 유형 확인하기
index.html
파일에는 백그라운드 동영상 (22행)을 표시하는 <video>
태그가 포함되어 있습니다. script.js
의 코드는 동영상 태그의 src
속성을 설정하여 동영상을 로드합니다. 동영상 로드 코드는 2단계에서 자세히 설명합니다.
동영상을 조건부로 로드하려면 먼저 Network Information API를 사용할 수 있는지 확인합니다. 사용 가능한 경우 연결 유형을 확인합니다.
script.js
에서navigator.connection
객체가 존재하는지,effectiveType
속성이 있는지 테스트하는if
문을 추가합니다.if
문을 추가하여 네트워크의effectiveType
를 확인합니다.
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.
}
}
기존 동영상 로드 코드를 else
문으로 래핑하여 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');
}
2단계: 동영상 로드
effectiveType
이 '4g'
이면 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
}
동영상 로드 코드의 작동 방식은 다음과 같습니다. <video>
태그의 src
속성이 설정되지 않았으므로 처음에는 아무것도 다운로드하거나 표시하지 않습니다. 로드할 동영상 URL은 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>
데이터 속성을 사용하면 표준 HTML 요소에 추가 정보를 저장할 수 있습니다. 데이터 요소의 이름은 'data-'로 시작하는 한 무엇이든 지정할 수 있습니다.
페이지에 동영상을 실제로 표시하려면 data-src
에서 값을 가져와 동영상 요소의 src
속성으로 설정해야 합니다.
먼저 애셋이 포함된 DOM 요소를 가져옵니다.
const video = document.getElementById('coverVideo');
그런 다음 data-src
속성에서 리소스 위치를 가져옵니다.
const videoSource = video.getAttribute('data-src');
마지막으로 이를 동영상 요소의 src
속성으로 설정합니다.
video.setAttribute('src', videoSource);
마지막 줄은 CSS 배치를 처리합니다.
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
3단계: 이미지 로드
느린 네트워크에서 이미지를 조건부로 로드하려면 동영상과 동일한 전략을 사용합니다.
index.html
(동영상 요소 바로 뒤)에 이미지 요소를 추가하고 src
속성 대신 data-src
속성을 사용합니다.
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
script.js
에서 네트워크의 effectiveType
에 따라 이미지의 src
속성을 설정하는 코드를 추가합니다.
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');
}
사용해 보기
직접 테스트하려면 다음 단계를 따르세요.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면을 누릅니다.
- `Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 기본적으로 제한 없음으로 설정된 제한 드롭다운을 클릭합니다. 빠른 3G를 선택합니다.
이제 빠른 3G를 사용 설정한 상태에서 페이지를 새로고침합니다. 앱이 동영상 대신 백그라운드에서 이미지를 로드합니다.
추가 크레딧: 변경사항에 응답
이 API에 onchange
이벤트 리스너가 있다는 사실을 기억하시나요?
동영상 품질과 같은 콘텐츠를 동적으로 조정하거나, 대역폭이 넓은 네트워크 유형의 변경이 감지될 때 지연된 데이터 전송을 다시 시작하거나, 네트워크 품질이 변경될 때 사용자에게 알리는 등 다양한 용도로 사용할 수 있습니다.
다음은 이 리스너를 사용하는 방법의 간단한 예입니다. script.js
에 추가합니다. 이 코드는 네트워크 정보가 변경될 때마다 displayNetworkInfo
함수를 호출합니다.
navigator.connection.addEventListener('change', displayNetworkInfo);
index.html
페이지에 이미 빈 <h2>
요소가 있습니다. 이제 <h2>
요소에 네트워크 정보를 표시하고 함수를 호출하도록 displayNetworkInfo
함수를 정의합니다.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
다음은 Glitch의 앱의 최종 상태입니다.
다시 테스트하려면 다음 단계를 따르세요.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
- `Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 기본적으로 제한 없음으로 설정된 제한 드롭다운을 클릭합니다. 빠른 3G를 선택합니다.
- 앱을 새로고침합니다.
앱이 네트워크 정보를 3g로 업데이트합니다.