HTML Navigator onLine प्रॉपर्टी: ऑनलाइन/ऑफलाइन स्थिति जांचें

HTML Navigator onLine प्रॉपर्टी एक बूलियन मान लौटाती है जो दर्शाता है कि ब्राउज़र नेटवर्क से जुड़ा है या नहीं (true = ऑनलाइन, false = ऑफलाइन)। यह प्रोग्रेसिव वेब ऐप्स (PWA), ऑफलाइन-फर्स्ट आर्किटेक्चर, और नेटवर्क स्थिति UI के लिए महत्वपूर्ण है। संबंधित इवेंट्स: online और offline।

सिंटैक्स (Syntax)

navigator.onLine

उदाहरण (Example)

यह उदाहरण ऑनलाइन/ऑफलाइन स्थिति प्रदर्शित करता है और नेटवर्क परिवर्तनों को लाइव सुनता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 350px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1.5rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover { background: #b01030; }
    .status-display {
      font-size: 2rem;
      font-weight: bold;
      padding: 2rem;
      border-radius: 16px;
      margin: 1rem auto;
      max-width: 400px;
      display: inline-block;
      transition: all 0.5s ease;
    }
    .online { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
    .offline { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
    .unknown { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
    .log {
      background: rgba(0,0,0,0.3);
      color: #fff;
      padding: 1rem;
      border-radius: 10px;
      margin: 1rem auto;
      max-width: 500px;
      text-align: left;
      max-height: 200px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 0.9rem;
    }
    .log-entry { padding: 0.25rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .log-online { color: #4ade80; }
    .log-offline { color: #f87171; }
    .controls { margin: 1rem 0; }
  </style>
</head>
<body>
  <h1>HTML Navigator onLine प्रॉपर्टी डेमो</h1>
  
  <div id="statusDisplay" class="status-display unknown">जांच की जा रही है...</div>
  
  <button class="btn" onclick="checkStatus()">स्थिति जांचें</button>
  
  <div class="controls">
    <button class="btn" style="background: #2274A5; width: auto; padding: 0 1.5rem;" onclick="simulateOffline()">ऑफलाइन सिमुलेट करें</button>
    <button class="btn" style="background: #23CE6B; width: auto; padding: 0 1.5rem;" onclick="simulateOnline()">ऑनलाइन सिमुलेट करें</button>
    <button class="btn" style="background: #666; width: auto; padding: 0 1.5rem;" onclick="clearLog()">लॉग साफ़ करें</button>
  </div>
  
  <div class="log" id="eventLog"></div>

  <script>
    const statusDisplay = document.getElementById('statusDisplay');
    const eventLog = document.getElementById('eventLog');
    
    function updateDisplay() {
      const isOnline = navigator.onLine;
      statusDisplay.className = 'status-display ' + (isOnline ? 'online' : 'offline');
      statusDisplay.innerHTML = isOnline 
        ? '🟢 ऑनलाइन' 
        : '🔴 ऑफलाइन';
      
      addLogEntry(isOnline ? '🟢 ऑनलाइन पता चला' : '🔴 ऑफलाइन पता चला', isOnline ? 'online' : 'offline');
    }
    
    function addLogEntry(message, type) {
      const entry = document.createElement('div');
      entry.className = `log-entry log-${type}`;
      entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
      eventLog.insertBefore(entry, eventLog.firstChild);
    }
    
    function checkStatus() {
      updateDisplay();
      addLogEntry(`मैन्युअल जांच: ${navigator.onLine ? 'ऑनलाइन' : 'ऑफलाइन'}`, 'online');
    }
    
    // नेटवर्क इवेंट लिसनर्स
    window.addEventListener('online', () => {
      updateDisplay();
      // ऑनलाइन होने पर लंबित कार्य सिंक करें
      syncPendingData();
    });
    
    window.addEventListener('offline', () => {
      updateDisplay();
    });
    
    function simulateOffline() {
      // नोट: यह वास्तविक नेटवर्क को प्रभावित नहीं करता, केवल UI सिमुलेशन
      // वास्तविक टेस्टिंग के लिए: DevTools → Network → Offline चेकबॉक्स
      addLogEntry('⚠ सिमुलेशन: ऑफलाइन मोड (वास्तविक नेटवर्क अप्रभावित)', 'offline');
      // ब्राउज़र में वास्तविक ऑफलाइन इवेंट ट्रिगर नहीं कर सकते
    }
    
    function simulateOnline() {
      addLogEntry('⚠ सिमुलेशन: ऑनलाइन मोड (वास्तविक नेटवर्क अप्रभावित)', 'online');
    }
    
    function clearLog() {
      eventLog.innerHTML = '';
    }
    
    function syncPendingData() {
      addLogEntry('🔄 ऑनलाइन पुनर्स्थापित - लंबित डेटा सिंक कर रहे हैं...', 'online');
      // यहां वास्तविक सिंक लॉजिक जाएगी (IndexedDB, Service Worker, आदि)
      setTimeout(() => {
        addLogEntry('✓ सिंक पूरा', 'online');
      }, 1000);
    }
    
    // प्रारंभिक जांच
    updateDisplay();
    addLogEntry('📄 पेज लोड - प्रारंभिक स्थिति: ' + (navigator.onLine ? 'ऑनलाइन' : 'ऑफलाइन'), 'online');
  </script>
</body>
</html>

आउटपुट (Output)

ऑनलाइन स्थिति:

ऑफलाइन स्थिति (नेटवर्क डिस्कनेक्ट करने के बाद):

नेटवर्क पुनर्स्थापित होने पर:

महत्वपूर्ण सीमाएं और व्यवहार

क्या onLine वास्तव में बताता है

• true: ब्राउज़र के पास नेटवर्क इंटरफेस है और वह किसी नेटवर्क से जुड़ा है (LAN, WiFi, सेलुलर)।
• false: ब्राउज़र ऑफलाइन मोड में है या कोई नेटवर्क इंटरफेस नहीं है।

क्या यह नहीं बताता

• इंटरनेट कनेक्टिविटी (सिर्फ लोकल नेटवर्क कनेक्शन)।
• सर्वर पहुंच योग्यता।
• कैप्टिव पोर्टल (होटल/कैफे WiFi लॉगिन पेज)।
• फायरवॉल/प्रॉक्सी ब्लॉकिंग।

ब्राउज़र व्यवहार अंतर

व्यावहारिक पैटर्न: वास्तविक कनेक्टिविटी जांच

चूंकि navigator.onLine अपूर्ण है, वास्तविक कनेक्टिविटी के लिए नेटवर्क अनुरोध का उपयोग करें:

async function checkRealConnectivity() {
  if (!navigator.onLine) return false; // फास्ट फेल
  
  try {
    // हल्का अनुरोध (कैश-बस्टिंग के साथ)
    const response = await fetch('/favicon.ico?t=' + Date.now(), { 
      method: 'HEAD', 
      cache: 'no-cache',
      mode: 'no-cors' // CORS त्रुटियों से बचने के लिए
    });
    return true; // नेटवर्क पहुंच योग्य
  } catch {
    return false; // नेटवर्क समस्या
  }
}

// उपयोग
setInterval(async () => {
  const online = await checkRealConnectivity();
  if (online !== navigator.onLine) {
    console.log('वास्तविक कनेक्टिविटी onLine से भिन्न:', online);
  }
}, 30000);

उन्नत पैटर्न: ऑफलाइन-फर्स्ट आर्किटेक्चर

1. Service Worker के साथ ऑफलाइन कैशिंग

// service-worker.js
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});

2. IndexedDB में ऑफलाइन म्यूटेशन कतार

// ऑफलाइन होने पर म्यूटेशन स्टोर करें
function queueMutation(mutation) {
  return idbPromise.then(db => {
    const tx = db.transaction('mutations', 'readwrite');
    tx.objectStore('mutations').add({
      ...mutation,
      timestamp: Date.now()
    });
    return tx.complete;
  });
}

// ऑनलाइन होने पर सिंक करें
window.addEventListener('online', async () => {
  const mutations = await getAllMutations();
  for (const mutation of mutations) {
    try {
      await applyMutation(mutation);
      await deleteMutation(mutation.id);
    } catch (e) {
      console.error('सिंक विफल:', e);
      break; // क्रम बनाए रखें
    }
  }
});

3. UI स्थिति संकेतक

// रिएक्ट/व्यू/स्मेल्ट में रिएक्टिव ऑनलाइन स्थिति
const [isOnline, setIsOnline] = useState(navigator.onLine);

useEffect(() => {
  const handleOnline = () => setIsOnline(true);
  const handleOffline = () => setIsOnline(false);
  
  window.addEventListener('online', handleOnline);
  window.addEventListener('offline', handleOffline);
  
  return () => {
    window.removeEventListener('online', handleOnline);
    window.removeEventListener('offline', handleOffline);
  };
}, []);

ब्राउज़र समर्थन

• navigator.onLine: सभी आधुनिक ब्राउज़र (IE 8+)
• online/offline इवेंट्स: सभी आधुनिक ब्राउज़र (IE 9+)