Async JavaScript를 사용하여 인터넷 연결 상태를 확인하는 방법

JavaScript를 사용하여 앱이 인터넷에 연결되어 있는지 확인할 수 있습니까?

이 기사에서는 이 인터넷 연결 감지 질문에 대한 업데이트된 답변을 제공하겠습니다. (휴! 빨리 다섯 번 말해!)

솔루션은 JavaScript의 Fetch API와 Async &Await와 함께 비동기 코드를 사용합니다. 하지만 먼저 승인된 솔루션을 살펴보고 이것이 귀하의 애플리케이션에 가장 적합한 선택이 아닌 이유에 대해 논의해 보겠습니다.

내비게이터.onLine

네비게이터 인터페이스의 온라인 속성, navigator.onLine , 브라우저의 온라인 및 오프라인 상태를 감지하는 데 자주 사용됩니다.

온라인 및 오프라인 이벤트에 대한 리스너와 결합하여 개발자에게 구현하기 쉬운 간단한 솔루션을 제공하는 것으로 보입니다.

navigator.onLine을 구현하는 방법을 살펴보겠습니다.

로드 이벤트 리스너를 추가하여 시작합니다. load 이벤트가 발생하면 리스너는 내비게이터 인터페이스의 online 속성을 확인한 다음 온라인 상태를 표시합니다.

내비게이터의 온라인 속성은 부울(true 또는 false) 응답을 제공합니다. 리스너의 작업을 완료하기 위해 삼항 문을 사용하여 상태 표시 값을 설정합니다.

window.addEventListener("load", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";
});

내비게이터라는 단어는 왜? 90년대 Netscape Navigator 브라우저를 참조한 것입니다.

id가 "status"인 HTML 페이지의 h1 요소를 중앙에 배치합니다. 위의 JavaScript 코드를 페이지에 적용하면 "온라인"으로 표시되어야 합니다.

그러나 이것은 페이지가 로드될 때만 h1 요소를 업데이트합니다. 오프라인 및 온라인 이벤트 리스너를 추가하여 이러한 이벤트가 발생할 때마다 상태 표시를 업데이트하겠습니다.

window.addEventListener("offline", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "OFFline";
});

window.addEventListener("online", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "Online";
});

Chrome 개발자 도구의 애플리케이션 탭으로 이동하고 ServiceWorker를 클릭하여 브라우저가 오프라인인 것처럼 응답하도록 설정할 수 있습니다.

오프라인 확인란을 몇 번 선택하고 선택을 취소합니다. 실행되는 오프라인 및 온라인 이벤트에 즉시 응답하는 상태 디스플레이가 표시되어야 합니다.

조금 더 파헤쳐 봅시다

첫인상에서 위의 내용은 상당히 간단한 좋은 솔루션처럼 보입니다. 불행히도 내비게이터의 온라인 속성과 온라인 및 오프라인 이벤트에 대해 더 많이 읽으면서 문제가 있음을 발견했습니다.

CanIUse.com에서 navigator.onLine을 검색하면 온라인 | 속성이 제공하는 오프라인 상태입니다. 그러나 지원 표 아래의 참고 사항을 보면

“온라인이 항상 인터넷 연결을 의미하는 것은 아닙니다. 또한 일부 네트워크에 대한 연결을 의미할 수도 있습니다."

흠, 작업에 약간의 렌치를 던집니다.

따라서 브라우저의 온라인 상태를 실제로 확인하려면 확인을 위한 추가 수단을 개발해야 합니다.

navigator.onLine에 대한 MDN 문서 참조도 살펴보겠습니다. MDN 웹 문서는 CanIUse.com 정보를 백업하고 추가 메모를 추가합니다.

“브라우저는 이 속성을 다르게 구현합니다...참 값이 반드시 브라우저가 인터넷에 액세스할 수 있음을 의미한다고 가정할 수 없습니다. 가양성을 얻을 수 있습니다..."

이는 인터넷 연결을 감지하기 위한 솔루션으로 내비게이터의 온라인 속성을 사용하는 것에 대한 우리의 두려움을 확인시켜줍니다. 외부 데이터 소스를 사용할 수 있는 시점을 아는 데 의존하는 애플리케이션에 큰 피해를 줄 수 있는 솔루션입니다.

그러한 예 중 하나는 Progressive Web App이 온라인 상태인지 여부를 확인하려고 할 때입니다. MDN은

“...정말로 브라우저의 온라인 상태를 확인하려면 확인을 위한 추가 수단을 개발해야 합니다.”

"내비게이터 온라인이 작동하지 않음"에 대한 빠른 웹 검색 이 속성에 의존하는 사람들에게 문제가 발생한 다양한 포럼 게시물을 보여줍니다.

그래서 해결책은 무엇입니까?

우리는 우리의 애플리케이션이 라우터나 로컬 네트워크가 아니라 인터넷에 진정으로 연결된 때를 알아야 합니다. JavaScript 파일로 돌아가서 다시 시작하겠습니다.

아이디어는 요청을 만들고 실패할 경우 오류를 포착하여 정상적으로 처리하는 것입니다. 요청이 성공하면 온라인 상태이고 실패하면 온라인 상태가 아닙니다.

온라인 상태를 확인하기 위해 간격으로 작은 이미지를 요청할 것입니다. 최신 JavaScript는 Async 및 Await를 사용하여 Fetch API 및 비동기 코드를 제공합니다. 우리는 이러한 도구를 사용하여 목표를 달성할 것입니다.

checkOnlineStatus()

checkOnlineStatus라는 비동기 화살표 함수를 만드는 것으로 시작하겠습니다. 이 함수는 내비게이터의 온라인 속성처럼 true 또는 false를 반환합니다.

함수 내에서 1픽셀 이미지에 대한 가져오기 요청을 기다리는 try 블록을 설정합니다. 서비스 워커가 이 이미지를 캐싱하고 있지 않은지 확인하십시오.

200에서 299 사이의 HTTP 응답 코드는 성공을 나타내며 상태 코드 비교 결과를 반환합니다. 응답 상태가 200에서 299 사이이면 true이고 그렇지 않으면 false입니다.

또한 요청이 실패할 경우 오류를 포착하는 catch 블록을 제공해야 합니다. 이런 일이 발생하면 확실히 오프라인임을 나타내기 위해 catch 블록에서 false를 반환합니다.

const checkOnlineStatus = async () => {
  try {
    const online = await fetch("/1pixel.png");
    return online.status >= 200 && online.status < 300; // either true or false
  } catch (err) {
    return false; // definitely offline
  }
};

다음으로 setInterval 메서드를 사용하고 익명의 비동기 함수를 전달합니다. 비동기 함수는 checkOnlineStatus 함수의 결과를 기다립니다. 그런 다음 결과와 함께 삼항 문을 사용하여 현재 온라인 상태를 표시합니다.

이 예를 테스트하기 위해 간격 지연을 매 3초(3000밀리초)로 설정합니다. 하지만 이것은 정말 너무 자주 발생합니다. 30초(30000밀리초)마다 확인하면 실제 요구 사항에 충분할 수 있습니다.

setInterval(async () => {
  const result = await checkOnlineStatus();
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probably too often, try 30000 for every 30 seconds

새 코드가 저장되면 Chrome 개발자 도구의 애플리케이션 탭을 다시 방문하여 오프라인 응답을 테스트해 보겠습니다.

비동기 기능이 있는 로드 이벤트 리스너를 포함하는 것을 거의 잊었습니다! 로드 이벤트 감지는 오프라인 가용성을 위해 서비스 작업자를 활용하는 프로그레시브 웹 앱이 있는 경우에만 중요합니다. 그렇지 않으면 웹 페이지나 앱이 연결 없이 로드되지 않습니다.

다음은 새로운 로드 이벤트 리스너입니다.

window.addEventListener("load", async (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = (await checkOnlineStatus())
    ? "Online"
    : "OFFline";
});

최종 생각

위의 간격 코드는 앱에서 연결 상태를 표시하는 데 좋습니다. 즉, 응용 프로그램에서 중요한 데이터를 요청하기 20초 또는 30초 전에 확인된 연결 상태에 의존하지 않는 것이 좋습니다.

따라서 요청 직전에 checkOnlineStatus 함수를 호출하고 데이터를 요청하기 전에 응답을 평가해야 합니다.

const yourDataRequestFunction = async () => {
    const online = await checkOnlineStatus();
    if (online) {
    	// make data request
    }
}

결론

navigator.onLine은 광범위하게 지원되지만 애플리케이션이 실제로 인터넷에 연결되어 있는지 확인할 때 신뢰할 수 없는 결과를 제공합니다. Fetch API와 비동기 자바스크립트를 활용하여 보다 안정적인 솔루션을 빠르게 코딩할 수 있습니다.

다음은 GitHub의 코드 요점에 대한 링크이며, 제가 함께 만든 비디오 자습서는 다음과 같습니다.