[책] 자바스크립트 코드 레시피 278 - 97일차

온라인/오프라인 대응하기

• 오프라인 화면에 네트워크의 연결 상태를 표시하고 싶을 때

구문

navigator.onLine // 네트워크 상태 가져오기

실습

navigator.onLine 속성을 사용하여 네트워크 상태를 확인할 수 있습니다. 반환값이 true 인 경우 네트워크 온라인 상태를 나타내며, 해당 속성은 읽기만 가능합니다. 브라우저의 네트워크 상황을 감시하여 오프라인 상태일 때 화면에 해당 상태를 표시하는 기능 등에 사용할 수 있습니다.

// 접속 상태 확인
const isOnline = navigator.onLine;
if (isOnline === true) {
  console.log('온라인 상태입니다.');
} else {
  console.log('오프라인 상태입니다.');
}

window 객체에서 online 과 offline 이벤트를 감시하면 네트워크의 상태 확인이 가능합니다.

window.addEventListener('online', () => {
  console.log('온라인 상태입니다.');
});

window.addEventListener('offline', () => {
  console.log('오프라인 상태입니다.');
});