웹 애플리케이션을 개발하다 보면 사용자의 브라우저가 현재 인터넷에 연결되어 있는지 확인해야 하는 경우가 자주 있습니다. 예를 들어 네트워크 연결이 끊겼을 때 사용자에게 알림을 표시하거나, 오프라인 상태에서 데이터를 임시 저장하는 기능을 구현할 수 있습니다.
navigator.onLine 속성
JavaScript에서는 navigator.onLine 속성을 사용하여 브라우저의 네트워크 연결 상태를 간단하게 확인할 수 있습니다. 이 속성은 불리언(Boolean) 값을 반환합니다.
- 인터넷에 연결되어 있으면
true를 반환합니다. - 연결이 끊어져 있으면
false를 반환합니다.
예제 코드
아래는 버튼을 클릭했을 때 온라인 또는 오프라인 상태를 확인하여 화면에 결과를 표시하는 완전한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 온라인/오프라인 확인 예제</h1>
<h2>아래 버튼을 클릭하면 현재 인터넷 연결 상태를 확인할 수 있습니다.</h2>
<button onclick="checkOnlineOffline()">온라인/오프라인 확인</button>
<h2 class="sample"></h2>
<script>
function checkOnlineOffline() {
if(navigator.onLine === true){
document.querySelector('.sample').innerHTML = "인터넷에 연결되어 있습니다.";
} else {
document.querySelector('.sample').innerHTML = "인터넷에 연결되어 있지 않습니다.";
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
「온라인/오프라인 확인」 버튼을 클릭하면 현재 네트워크 상태에 따라 아래와 같이 결과가 표시됩니다.
추가 팁: 이벤트 리스너 활용하기
버튼 클릭 없이 실시간으로 네트워크 상태 변화를 감지하고 싶다면 online과 offline 이벤트를 활용할 수 있습니다.
window.addEventListener('online', () => {
console.log('인터넷에 다시 연결되었습니다.');
});
window.addEventListener('offline', () => {
console.log('인터넷 연결이 끊어졌습니다.');
});이 방법을 사용하면 네트워크 상태가 변경되는 순간 자동으로 콜백 함수가 실행되므로, 사용자에게 즉각적인 피드백을 제공하는 데 유용합니다.