참고: https://dev.to/nialljoemaher/detecting-if-a-user-is-online-offline-with-javascript-3bcc
매일 인터넷이 빵빵한 사무실에서 일하는 개발자로서 인터넷이 되는 것은 당연한 일이고 localhost는 가장 빠른 사이트가 됩니다. 하지만 많은 사람들이 간과하고 있는 것이 무엇이냐면 모든 인터넷 환경이 일관적으로 좋지는 않다는 것 입니다.
이 포스트에서는 사용자가 인터넷에 연결되어 있는지 확인하고 연결이 끊어지거나 다시 연력되는 것을 감지하여 인터넷 상태에 따라 적절히 UI를 업데이트 하는 방법을 알아보겠습니다.
기본 코드
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app">
<h1 class="status">Hello</h1>
</div>
<script src="app.js"></script>
</body>
</html>style.css:
body {
background-color: #555;
}
.app {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.status {
padding: 40px;
min-width: 120px;
border-radius: 20px;
background-color: #eee;
text-align: center;
font-size: 80px;
}
.status.online {
border: 8px solid #41a700;
color: #41a700;
}
.status.offline {
border: 8px solid #f15c4f;
color: #f15c4f;
}빈 app.js 파일까지 추가하면 준비는 끝입니다.
현재 폴더 구조는 다음과 같아야합니다:
├── app
│ ├── index.html
│ └── style.css
│ └── app.js이제 app.js 파일을 열어 사용자가 인터넷에 연결되어 있는지 여부에 따라 DOM을 조작하는 함수를 만들어 보겠습니다. 함수가 받는 매개변수는 불린 값 입니다.
function hasNetwork(online) {
const element = document.querySelector(".status");
if (online) {
element.classList.remove("offline");
element.classList.add("online");
element.innerText = "Online";
} else {
element.classList.remove("online");
element.classList.add("offline");
element.innerText = "Offline";
}
}위의 코드에서 매개변수로 받은 online 값이 true 면 요소에 online을 설정하고 false 면 offline을 설정합니다.
이제 다음 부분을 보겠습니다. 먼저 navigator.onLine을 사용하여 페이지가 처음 로드될 때 인터넷이 연결되어 있는지 확인합니다. navigator.onLine은 불린 값을 반환합니다.
window.addEventListener("load", () => {
hasNetwork(navigator.onLine);
});
브라우저가 이 기능을 지원하는지 확인하는 작업은 매우 중요합니다. 이에 관련된 자세한 내용은 MDN docs를 참고하기 바랍니다.
Chrome 이나 Safari의 경우 브라우저가 LAN 이나 라우터에 연결할 수 없으면 offline 상태로 false를 리턴하고 이외의 모든 상태는 true를 리턴합니다. 여기서 브라우저가 false를 리턴하면 offline인 것을 확신할 수 있지만 true를 리턴한다고 반드시 인터넷에 엑세스할 수 있음을 의미하지는 않습니다. (목적지 서버가 불통인 경우)
설명
위의 코드는 처음에는 무의미한 단계처럼 보일 수 있습니다. 하지만 현재 네트워크 상태를 알고있으면 사용자가 캐시된 웹 페이지를 오프라인에서 보고있는 경우를 식별할 수 있기 때문에 필요합니다. 이를 이용해 페이지가 로드되면 콘텐츠가 최신 버전이 아닐 수 있다는 것을 사용자에게 알릴 수 있습니다.
다음으로 할 일은 사용자의 네트워크 상태가 변경될 때를 알 수 있도록 online 및 offline에 대한 이벤트 리스너를 추가하는 것 입니다. 여기서 관심을 가져야 할 것은 online과 offline 이벤트 입니다. 이름에서 짐작할 수 있듯이 이 이벤트는 사용자의 네트워크가 온라인과 오프라인 사이에 전활될 때 트리거됩니다.
window.addEventListener("load", () => {
hasNetwork(navigator.onLine);
window.addEventListener("online", () => {
hasNetwork(true);
});
window.addEventListener("offline", () => {
hasNetwork(false);
});
});이제 사용자의 네트워크 상태가 변경될 때 실시간 피드백을 받게 됩니다.
이걸 언제 쓸까요?
파일 업로드 시 사용자에게 오프라인이기 때문에 업로드 할 수 없다고 알려야 할 때도 있고, 실시간 데이터를 제공하는 경우 사용자가 오프라인이면 최신 데이터가 아님을 알려야합니다. 이 외에도 네트워크 상태를 감지해야 하는 수십가지 이유가 있으며 사용자 친화적인 UX를 만들기 위해 노력해야 합니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 BigInt (9) | 2023.06.07 |
|---|---|
| [javascript] 자바스크립트 객체 속성 지우기 (delete) (6) | 2023.06.07 |
| [javascript] HTML 버튼 클릭 (11) | 2023.05.31 |
| [javascript] 자바스크립트 이벤트 리스너 등록 (addEventListener) (13) | 2023.05.31 |
| [javascript] 자바스크립트 객체 디스트럭처링 (destructuring) (13) | 2023.05.30 |
댓글