เหตุการณ์ onoffline: รันสคริปตเมื่อเบราว์เซอร์ทำงานออฟไลน์

เหตุการณ์ onoffline จะถูกกระตุ้นเมื่อเบราว์เซอร์สูญเสียการเชื่อมต่ออินเทอร์เน็ตและเข้าสู่โหมดออฟไลน์ ทำงานร่วมกับ ononline สำหรับตรวจสอบสถานะการเชื่อมต่อ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body ononline="onlineFunc()" onoffline="offlineFunc()">
    <script>
        function onlineFunc() {
            alert("กลับมาออนไลน์แล้ว!");
            updateStatusIndicator(true);
        }
        function offlineFunc() {
            alert("ขาดการเชื่อมต่อ - ทำงานออฟไลน์");
            updateStatusIndicator(false);
            // บันทึกข้อมูลใน localStorage ชั่วคราว
            saveOfflineData();
        }
        
        function updateStatusIndicator(isOnline) {
            const el = document.getElementById('status');
            if (el) el.textContent = isOnline ? '🟢 ออนไลน์' : '🔴 ออฟไลน์';
        }
        
        function saveOfflineData() {
            // บันทึกข้อมูลที่ผู้ใช้กำลังทำอยู่
            const data = getFormData();
            localStorage.setItem('offline_backup', JSON.stringify(data));
        }
    </script>
    <p id="status">🟢 ออนไลน์</p>
    <p>ลองปิดอินเทอร์เน็ตหรือไปที่เมนู File > Work Offline เพื่อทดสอบ</p>
</body>
</html>

API ที่เกี่ยวข้อง: Navigator.onLine

// ตรวจสอบสถานะปัจจุบัน
if (navigator.onLine) {
    console.log('ออนไลน์');
} else {
    console.log('ออฟไลน์');
}

// ฟังเหตุการณ์ (แนะนำมากกว่า attribute)
window.addEventListener('online',  () => console.log('ออนไลน์'));
window.addEventListener('offline', () => console.log('ออฟไลน์'));

กรณีการใช้งาน (Use Cases)

• PWA (Progressive Web Apps): ทำงานออฟไลน์ได้จริง
• Form Autosave: บันทึกร่างเมื่อออฟไลน์ ซิงค์เมื่อออนไลน์
• UI Indicator: แสดงสถานะการเชื่อมต่อแบบเรียลไทม์
• Queue Operations: คิว API calls รอส่งเมื่อกลับมาออนไลน์

หมายเหตุ: navigator.onLine อาจไม่แม่นยำ 100% (เช่น เชื่อมต่อ WiFi แต่ไม่มีอินเทอร์เน็ต) ควรทดสอบด้วยการ Request จริง