HTML Academy · पाठ

ऑफ़लाइन वैकल्पिक पृष्ठ

उपयोगकर्ता के ऑफ़लाइन होने पर कैश किया हुआ वैकल्पिक पृष्ठ उपलब्ध कराएँ

पाठ 4, कुल 4 में से14 चरण

ऑफ़लाइन वैकल्पिक पृष्ठ, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

ऑफ़लाइन पेज क्यों?

नेटवर्क उपलब्ध न होने पर सर्विस वर्कर ब्राउज़र की सामान्य "इंटरनेट नहीं है" त्रुटि के बजाय एक कस्टम ऑफ़लाइन वैकल्पिक पेज दिखा सकता है। उपयोगकर्ता को ब्रांड, उपयोगी जानकारी और कैश की गई सामग्री दिखाई देती है — यह Chromium के डायनासोर या Firefox के उदास टैब से कहीं बेहतर है।

वैकल्पिक पेज को कैश करना

सर्विस वर्कर के इंस्टॉल इवेंट में offline.html पेज को पहले से कैश करें, ताकि उपयोगकर्ता के ऑफ़लाइन होने से पहले कहीं भी जाने पर भी यह हमेशा उपलब्ध रहे। ब्राउज़र यह सुनिश्चित करता है कि अगली sw.js में बदलाव होने तक कैश बना रहे।

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

विफलता पर सामग्री दिखाना

फ़ेच इवेंट में पहले नेटवर्क से सामग्री लाने का प्रयास करें; विफल होने पर कैश किया हुआ offline.html लौटाएँ। यह तरीका (पहले नेटवर्क, फिर ऑफ़लाइन वैकल्पिक पेज) PWA बनाने का सबसे सरल नुस्खा है और अधिकांश सामग्री वाली साइटों पर काम करता है।

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

नेविगेशन मोड की जाँच

offline.html का वैकल्पिक पेज केवल नेविगेशन अनुरोधों (ऊपरी स्तर के पेज लोड) के लिए दिखाएँ। इमेज, स्क्रिप्ट और अन्य उप-संसाधनों के अनुरोध विफल होने दें या उनके लिए कैश की गई अलग प्रतियाँ दिखाएँ — गायब इमेज की जगह HTML पेज दिखाने से पेज और अधिक खराब हो जाता है।

ऑफ़लाइन पेज का डिज़ाइन

ऑफ़लाइन पेज को हल्का रखें: न्यूनतम CSS का उपयोग करें और बाहरी संसाधनों का उपयोग तभी करें, जब वे भी कैश किए गए हों। ब्रांड लोगो, एक मित्रवत संदेश ("आप ऑफ़लाइन हैं — दोबारा कनेक्ट होने पर सामग्री लोड हो जाएगी") और location.reload() चलाने वाला "पुनः प्रयास करें" बटन दिखाएँ।

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
  <h1>You&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

देखे गए पेजों को कैश करना

एकल ऑफ़लाइन पेज से आगे बढ़कर, सफलतापूर्वक लोड किए गए पेजों को पुरानी सामग्री दिखाकर पृष्ठभूमि में नई सामग्री लाने या रनटाइम कैश रणनीति के साथ कैश करें। नेटवर्क न होने पर हाल में देखा गया लेख फिर से खोलने पर भी सामग्री दिखाई देगी; केवल पहले न देखे गए पेज विफल होंगे।

कैश संस्करण अपडेट

जब आप offline.html अपडेट करें, तो sw.js में CACHE कॉन्स्टेंट बदलें (CACHE = "v2")। एक्टिवेट इवेंट में पुराने कैश हटाएँ: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k)))। पुरानी ऑफ़लाइन सामग्री भ्रम पैदा करती है।

ऑफ़लाइन परीक्षण

Chrome DevTools के Network पैनल में → "Offline" नेटवर्क-सीमित करने की सुविधा नेटवर्क न होने की स्थिति का अनुकरण करती है। अपने ऐप में अलग-अलग जगहों पर जाएँ; जाँचें कि पहले न देखे गए मार्गों पर ऑफ़लाइन पेज दिखाई देता है और पहले देखे गए पेज कैश से अब भी लोड होते हैं।

उप-संसाधनों की विफलता

यदि ऑफ़लाइन पेज स्वयं ऐसी CSS फ़ाइल का संदर्भ देता है जो कैश नहीं की गई है, तो ऑफ़लाइन स्थिति में वह फ़ाइल लोड नहीं होगी और पेज बिना स्टाइल के दिखाई देगा। इंस्टॉल हैंडलर में ऑफ़लाइन पेज के लिए आवश्यक हर संसाधन (CSS, लोगो, फ़ॉन्ट) को पहले से कैश करें।

स्थिर ऑफ़लाइन सुविधा से आगे

उन्नत PWA ऑफ़लाइन रहते हुए उपयोगकर्ता की कार्रवाइयों को Background Sync की मदद से कतार में रखते हैं, कनेक्टिविटी लौटने पर उन्हें दोबारा आज़माते हैं और तब तक तुरंत परिणाम दिखाने वाला इंटरफ़ेस प्रदर्शित करते हैं। Workbox लाइब्रेरी इन तरीकों के लिए तैयार नुस्खे देती है; अपना समाधान बनाना भी संभव है, लेकिन उसमें अधिक काम लगता है।

कनेक्शन की बहाली

दोबारा कनेक्शन होने का पता लगाने के लिए ऑफ़लाइन पेज पर online इवेंट सुनें: window.addEventListener("online", () => location.reload())। कनेक्टिविटी लौटते ही पेज अपने-आप फिर से लोड हो जाता है — उपयोगकर्ता को "पुनः प्रयास करें" दबाने की आवश्यकता नहीं होती।

सावधानी से झूठा भरोसा न दें

"पुनः प्रयास करें" बटन को सचमुच दोबारा प्रयास करना चाहिए — location.reload() चलाएँ, ऐसा नकली लोडिंग चक्र नहीं जो कुछ न करे। ईमानदार इंटरफ़ेस उपयोगकर्ता का भरोसा बनाए रखता है; जब उपयोगकर्ताओं को पता चलता है कि ऑफ़लाइन पेज छलपूर्ण है, तो विश्वसनीयता तेज़ी से घटती है।

ज्ञान जाँच

ऑफ़लाइन वैकल्पिक पेज offline.html केवल नेविगेशन अनुरोधों (e.request.mode === "navigate") के लिए ही क्यों लौटाना चाहिए, सभी विफल अनुरोधों के लिए क्यों नहीं?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

सर्विस वर्कर ब्राउज़र की सामान्य त्रुटि के बजाय एक कस्टम ऑफ़लाइन वैकल्पिक पेज दिखा सकते हैं। install में offline.html को पहले से कैश करें और नेटवर्क विफल होने पर, अनुरोध नेविगेशन का होने पर, fetch में इसे दिखाएँ। पेज को अपने-आप में पूरा रखें, अपडेट के लिए कैश का संस्करण बदलें और अपने-आप फिर से लोड करने के लिए online इवेंट सुनें। DevTools की ऑफ़लाइन नेटवर्क-सीमा सुविधा से परीक्षण करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ऑफ़लाइन वैकल्पिक पृष्ठ” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ऑफ़लाइन वैकल्पिक पृष्ठ” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“ऑफ़लाइन वैकल्पिक पृष्ठ” में मैं क्या सीखूँगा?

उपयोगकर्ता के ऑफ़लाइन होने पर कैश किया हुआ वैकल्पिक पृष्ठ उपलब्ध कराएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“ऑफ़लाइन वैकल्पिक पृष्ठ” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ