Chrome 개발자 채널의 navgator.onLine

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

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

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

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에서 확인할 수 있습니다.