progressive web app क्या है: 2026 के लिए डेवलपर गाइड

progressive web app (PWA) एक ऐसी वेबसाइट है जो standard web technologies से बनती है और किसी platform-specific ऐप की तरह बर्ताव करती है: इसे इंस्टॉल किया जा सकता है, यह अपने आइकन के साथ अलग विंडो में खुलती है, और ऑफ़लाइन भी काम कर सकती है। MDN इसे इस तरह परिभाषित करता है: “एक ऐसा ऐप जो web platform technologies से बना है, पर जिसका user experience platform-specific ऐप जैसा है” (MDN, दिसंबर 2025)। ज़्यादातर काम दो फ़ाइलें करती हैं: web app manifest, जो ऐप का वर्णन करती है, और ऑफ़लाइन इस्तेमाल के लिए service worker।

progressive web app क्या है

PWA एक web ऐप है जो वेबसाइट की कुछ खूबियाँ रखता है और नेटिव ऐप की कुछ खूबियाँ जोड़ता है। MDN के अनुसार, वेबसाइटों से यह एक ही codebase को कई operating systems पर चलाने और सीधे web से पहुँच की खूबी लेता है। platform-specific ऐप से यह इंस्टॉलेशन (ऐप स्टोर से या सीधे web से), आइकन के साथ standalone ऐप के रूप में लॉन्च होना, ऑफ़लाइन और बैकग्राउंड में चलना, browser UI के बिना full-screen इस्तेमाल, और share targets जैसी OS integration लेता है।

PWA असल में एक सामान्य वेबसाइट है जिसमें दो तकनीकी सुविधाएँ जुड़ी होती हैं:

• web app manifest, एक JSON फ़ाइल जिससे browser को ऐप का नाम, आइकन और खुलने का तरीका पता चलता है;
• service worker, एक script जो ऐप के pages को नियंत्रित करती है और, MDN के शब्दों में, server से resources ला सकती है और उन्हें local cache में जोड़ सकती है।

web.dev भी यही विचार बताता है: PWA progressive enhancement के ज़रिए ज़्यादा भरोसेमंद और बेहतर integrated अनुभव देता है, और उसे इंस्टॉल किया जा सकता है (web.dev, सितंबर 2024)।

इंस्टॉल होने की शर्तें

इंस्टॉल हो पाएगा या नहीं, यह browser तय करता है, और अलग-अलग browsers की शर्तें अलग होती हैं। Chromium पर आधारित browsers (Chrome, Samsung Internet, Edge) के लिए MDN ये शर्तें बताता है (MDN, Making PWAs installable, अक्टूबर 2026):

Chrome beforeinstallprompt event चलाने से पहले उपयोगकर्ता की भागीदारी का इंतज़ार भी करता है: उपयोगकर्ता ने पेज पर कम से कम एक बार click या tap किया हो और उसे कम से कम 30 सेकंड देखा हो (web.dev, सितंबर 2024)।

service worker इस सूची में नहीं है। MDN कहता है कि installability के लिए यह ज़रूरी नहीं है, हालाँकि कई PWA ऑफ़लाइन इस्तेमाल के लिए इसका उपयोग करते हैं। ऊपर की तालिका पूरी करने वाला न्यूनतम manifest ऐसा दिखता है:

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

हर पेज से इसे <link rel="manifest" href="/manifest.webmanifest"> के साथ जोड़ें।

PWA ऑफ़लाइन कैसे काम करता है

service worker network requests को रोककर cache से जवाब देकर ऑफ़लाइन इस्तेमाल संभव बनाता है। इसे अपने page से register करें, और worker में fetch event संभालें। MDN के cache-first pattern का छोटा रूप:

// page में
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

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

यह उदाहरण cache से जवाब देता है और cache में न होने पर network पर जाता है, पर यह cache को भरता नहीं। MDN के पूरे उदाहरण में cache में लिखने का कदम और एक fallback page भी होता है। MDN यह भी बताता है कि cache-first से पुराना जवाब मिलने की संभावना ज़्यादा होती है, जबकि network-first उपकरण ऑफ़लाइन होने पर cache पर लौटता है, और सबसे अच्छी रणनीति ऐप पर निर्भर करती है। Service workers अब व्यापक रूप से उपलब्ध Baseline सुविधा हैं (अक्टूबर 2020 से; web-features 3.44.0 के अनुसार पहले समर्थित संस्करण Chrome 45, Firefox 44 और Safari 11.1 थे)।

iOS और Android में अंतर

Android और iOS, दोनों पर PWA इंस्टॉल होते हैं, पर तरीका और कुछ सुविधाएँ अलग हैं। अक्टूबर 2026 तक, MDN, Apple और web-features के अनुसार:

developers के लिए iOS की तीन बातें मायने रखती हैं:

• MDN के अनुसार iOS पर beforeinstallprompt समर्थित नहीं है, इसलिए वहाँ अपना install button नहीं दिखा सकते। अपने UI में Share menu के चरण समझाएँ। web.dev बताता है कि डिज़ाइनर कभी-कभी ऐसी स्क्रीन जोड़ते हैं।
• iOS 26 से, डिफ़ॉल्ट रूप से “होम स्क्रीन पर जोड़ी गई हर वेबसाइट web ऐप के रूप में खुलती है”, और उपयोगकर्ता “Open as Web App” बंद कर सकता है, भले ही साइट में manifest हो (WebKit blog, 9 जून 2025)।
• iOS और iPadOS 16.4 से, होम स्क्रीन वाले web ऐप Web Push पा सकते हैं। कोई साइट तभी home screen web ऐप मानी जाती है जब उसके manifest में display को standalone या fullscreen रखा गया हो, और permission का अनुरोध उपयोगकर्ता के gesture से आना चाहिए (WebKit blog, 16 फ़रवरी 2023)। web-features के अनुसार Push मार्च 2023 से नई Baseline सुविधा है और सितंबर 2025 से व्यापक रूप से उपलब्ध है, पहले समर्थित संस्करण Safari 16 और Safari iOS 16.4 हैं।

Home Screen जोड़ने का विवरण हर iOS release के साथ बदलता है, इसलिए जो संस्करण आप सपोर्ट करते हैं उसे जाँच लें।

PWA के उदाहरण

web.dev की PWA गाइड उन कंपनियों की सूची देती है जिन्होंने PWA लॉन्च करने के नतीजे बताए हैं; आँकड़े कंपनियों के अपने हैं, जिन्हें web.dev ने इकट्ठा किया (सितंबर 2024, web.dev):

ये नतीजे उन कंपनियों ने अपने उत्पादों के लिए बताए हैं।

PWA या नेटिव ऐप

एक सामान्य नियम: जब एक web codebase और web से वितरण सबसे ज़रूरी हों, तो PWA चुनें; और जब ऐसी platform सुविधाएँ चाहिए जो web नहीं देता, तो नेटिव ऐप चुनें। MDN बताता है कि PWA ऐप स्टोर से भी वितरित हो सकता है, इसलिए दोनों एक-दूसरे के विकल्प नहीं हैं। अगर आपकी वेबसाइट के साथ नेटिव ऐप भी है, तो links सीधे उसे खोल सकते हैं; इसकी सेटिंग universal links और Android App Links में है।

फ़ोन पर PWA कैसे टेस्ट करें

PWA को तीन चरणों में टेस्ट करें: फ़ाइलों के लिए DevTools, इंस्टॉलेशन के लिए असली फ़ोन, और लेआउट के लिए फ़ोन-आकार का view।

1. DevTools: Chrome DevTools के Application panel में Manifest pane ऐप के fields और आइकन दिखाता है, और Installability section बताता है कि कोई गड़बड़ी हो तो वह क्या है। Service Workers pane में एक Offline checkbox है, जो DevTools को offline mode में डालता है (Chrome for Developers)। Lighthouse की PWA जाँच को अब बंद कर दिया गया है (पेज अप्रैल 2024 में अपडेट हुआ था), इसलिए Application panel का उपयोग करें।
2. असली फ़ोन: browser से ऐप इंस्टॉल करें, फ़ोन को airplane mode में डालें और icon से ऐप खोलें। iOS और Android, दोनों पर जाँचें, क्योंकि इंस्टॉलेशन का तरीका और push का व्यवहार अलग होता है।
3. फ़ोन आकार: किसी भी mobile site की तरह फ़ोन की चौड़ाई पर pages जाँचें, वेबसाइट को मोबाइल-फ़्रेंडली कैसे बनाएँ की गाइड और मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट के साथ; बिना डिवाइस के iOS के लिए iPhone के बिना iPhone पर टेस्ट देखें।

Mobile View Extension मौजूदा tab को फ़ोन के user agent, screen size और pixel ratio के साथ दोबारा लोड करता है, इसलिए आप अपने PWA के pages को फ़ोन के आकार में जल्दी देख सकते हैं। पर यह फ़ोन की तरह PWA इंस्टॉल नहीं कर सकता और न service workers तथा standalone mode चला सकता है: यह desktop Chrome का engine चलाता है, mouse input के साथ, और Home Screen का व्यवहार नहीं दिखाता। इंस्टॉल और ऑफ़लाइन जाँच के लिए असली फ़ोन इस्तेमाल करें। गति के बारे में अलग से मोबाइल पेज स्पीड टेस्ट गाइड में है।

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

सीधी भाषा में PWA क्या है?

PWA एक ऐसी वेबसाइट है जिसे किसी device पर इंस्टॉल करके ऐप की तरह इस्तेमाल किया जा सकता है। यह सामान्य web technologies से बनती है, और इंस्टॉल होने के बाद और ऑफ़लाइन होने पर का व्यवहार manifest और service worker तय करते हैं।

PWA की ज़रूरतें क्या हैं?

Chromium browsers में इंस्टॉल के लिए: HTTPS, name वाला manifest, 192 px और 512 px आइकन, start_url और display, और prefer_related_applications true पर न हो। installability के लिए service worker ज़रूरी नहीं है, पर ऑफ़लाइन काम के लिए चाहिए।

क्या PWA iPhone पर चलते हैं?

हाँ। iOS 16.4 से इन्हें Safari, Chrome, Edge, Firefox और Orion के Share menu से इंस्टॉल किया जा सकता है, और होम स्क्रीन वाले web ऐप Web Push प्राप्त कर सकते हैं। iOS पर beforeinstallprompt नहीं है, इसलिए उपयोगकर्ता Share menu से इंस्टॉल करते हैं।

क्या PWA ऑफ़लाइन काम कर सकता है?

हाँ, जब service worker ज़रूरी pages और files को cache करे। Service worker के बिना ऐप Chromium browsers में फिर भी इंस्टॉल हो सकता है, पर उसका अपना ऑफ़लाइन प्रबंधन नहीं होता।