Chrome 개발자 채널의 navgator.onLine

에릭 비델만

HTML5의 오프라인 API를 사용하면 사용자에게 완벽한 오프라인 환경을 제공하지 않을 변명의 여지가 없습니다. 이 스토리에 도움이 될 수 있는 한 가지는 navigator.onLine 속성입니다. 이 속성은 최근 Chrome 개발자 채널에 도입된 기능입니다. 이 속성은 앱의 네트워크 연결 여부에 따라 true 또는 false를 반환합니다.

if (navigator.onLine) {
    console.log('ONLINE!');
} else {
    console.log('Connection flaky');
}

또한 웹 앱은 onlineoffline 이벤트를 수신 대기하여 연결을 다시 사용할 수 있는 시점 또는 앱이 오프라인 상태가 되는 시점을 확인할 수 있습니다.

window.addEventListener('online', function(e) {
    // Re-sync data with server.
}, false);

window.addEventListener('offline', function(e) {
    // Queue up events for server.
}, false);

http://html5-demos.appspot.com/static/navigator.onLine.html에 실제 데모를 게시했으며 오프라인 이벤트에 대한 자세한 내용은 MDN에서 찾을 수 있습니다.