HTML5 Online/Offline

เมื่อวานเขียนเรื่อง Application Cache ไปสิ่งหนึ่งที่เกี่ยวข้องแต่แยกออกมาคือ online/offline ใน browser ปัจจุบัน (Chrome, Firefox, Safari) สามารถตรวจว่าตอนนี้เครื่องที่เราใช้อยู่ online/offline อยู่ได้จาก navigator ตามด้านล่าง

if (navigator.onLine) {
  $('#status').text('Online');
} else {
  $('#status').text('Offline');
}

สถานะ online/offline จะดูตาม network interface ของเครื่องเลยว่ามี interface ไหนที่ active อยู่บ้างถ้าไม่มี interface ไหน active เลย navigator.onLine จะมีค่าเป็น false ถ้ามี interface นึงที่ active จะมีค่าเป็น true

นอกจาก flag ที่ check จาก navigator แล้วยังมี event ที่บอกว่าเปลี่ยนเป็น online/offline เมื่อไหร่ดักได้ตาม code ด้านล่าง

window.addEventListener('online', function (e) { $('#status').text('Online'); });
window.addEventListener('offline', function (e) { $('#status').text('Offline'); });

จาก code ไว้สำหรับคอยดักดูว่า network interface ในเครื่องจะเปลี่ยนสถานะเมื่อไหร่แล้วคอยแก้หน้าเว็บตามสถานะนั้น เรื่อง online/offline ก็มีเพียงเท่านี้

อ้างอิง:

  1. Working Off the Grid with HTML5 Offline

About llun

Just a programmer

,