HTML PWA Basics
In this page:
<link rel="manifest" href="manifest.json">
<script>
navigator.serviceWorker.register("sw.js");
</script>Progressive Web App क्या है?
एक Progressive Web App (PWA) एक स्टैंडर्ड वेबसाइट है जो ऑफलाइन सपोर्ट, होम स्क्रीन इंस्टॉलेशन, और बैकग्राउंड अपडेट्स समेत ऐप जैसा यूज़र अनुभव देने के लिए मॉडर्न वेब APIs का उपयोग करती है।
उदाहरण: What is a Progressive Web App?
<link rel="manifest" href="manifest.json">Web App Manifest (manifest.json)
Web App Manifest एक साधारण JSON कॉन्फ़िगरेशन फाइल है जो आपकी ऐप सेटिंग्स परिभाषित करती है, जैसे आपका ऐप नाम, कस्टम splash screen रंग, डिस्प्ले लेआउट्स, और होम स्क्रीन आइकन पाथ्स।
उदाहरण: The Web App Manifest (manifest.json)
<link rel="manifest" href="manifest.json">
<!-- manifest.json: { "name": "My App", "display": "standalone" } -->ऑफलाइन सपोर्ट के लिए Service Workers
Service Worker एक बैकग्राउंड स्क्रिप्ट है जो नेटवर्क रिक्वेस्ट्स को इंटरसेप्ट करती है, एसेट्स (जैसे styles, scripts, और लोगो) कैश करती है, और यूज़र के ऑफलाइन होने पर उन्हें तुरंत सर्व करती है, जिससे आपका ऐप बिना नेटवर्क कनेक्शन के भी काम करता रहता है।
उदाहरण: Service Workers for Offline Support
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>होम स्क्रीन इंस्टॉलेशन प्रॉम्प्ट्स
जब आपकी वेबसाइट सभी PWA स्टैंडर्ड्स (जिसमें HTTPS, एक वैलिड manifest, और एक एक्टिव service worker शामिल है) पूरे करती है, तो ब्राउज़र विज़िटर्स को उनकी डिवाइस पर आपकी साइट को एक ऐप के रूप में इंस्टॉल करने के लिए अपने-आप प्रॉम्प्ट करेगा।
उदाहरण: Home Screen Installation Prompts
<button id="installBtn">Install App</button>
<script>
let deferredPrompt;
window.addEventListener('beforeinstallprompt', function (e) {
deferredPrompt = e;
});
</script>मोबाइल ऐप Viewports के लिए डिज़ाइनिंग
अपने PWA को एक नेटिव मोबाइल ऐप जैसा दिखाने के लिए, आपको अपने CSS स्टाइल्स को कॉम्पैक्ट मोबाइल स्क्रीन्स में फिट करने और मॉडर्न डिवाइस सेफ एरियाज़ (जैसे notch margins या होम इंडिकेटर्स) को हैंडल करने के लिए एडजस्ट करना होगा।
उदाहरण: Designing for Mobile App Viewports
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
</head>Manifest Properties का संदर्भ
आइकन्स के अलावा, manifest.json फाइल कई अन्य ज़रूरी प्रॉपर्टीज़ सपोर्ट करती है: name पूरा ऐप नाम है, short_name का उपयोग तब होता है जब होम स्क्रीन पर जगह सीमित हो, start_url यह परिभाषित करता है कि लॉन्च होने पर कौन-सा पेज खुलता है, display यह नियंत्रित करता है कि यह पूरी तरह standalone ऐप जैसा दिखे या एक साधारण ब्राउज़र टैब जैसा, और theme_color डिवाइस के status bar को स्टाइल करता है।
उदाहरण: Manifest Properties Reference
<!-- manifest.json:
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"theme_color": "#317EFB"
}
-->ऑफलाइन Fallback पेज बनाना
एक service worker यह पहचान सकता है कि कब कोई नेटवर्क रिक्वेस्ट इसलिए असफल हुई क्योंकि यूज़र के पास इंटरनेट नहीं है, और ब्राउज़र की डिफ़ॉल्ट एरर स्क्रीन के बजाय एक कैश्ड fallback पेज के साथ रिस्पॉन्ड कर सकता है, जिससे यूज़र्स को पता चले कि ऐप अभी भी काम कर रहा है, बस सीमित कंटेंट के साथ, जब तक वे दोबारा कनेक्ट न हों।
उदाहरण: Building an Offline Fallback Page
<script>
self.addEventListener('install', function (event) {
event.waitUntil(caches.open('v1').then(cache => cache.add('/offline.html')));
});
</script>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: