हाल ही में, प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में काफ़ी चर्चा हुई है. यह एक नया मॉडल है, लेकिन इसके सिद्धांतों से वैनिला JS, React, Polymer, Angular या किसी भी दूसरे फ़्रेमवर्क से बनाए गए ऐप्लिकेशन को बेहतर बनाया जा सकता है. इस पोस्ट में, हम आपको प्रोग्रेसिव वेब ऐप्लिकेशन बनाने के कुछ विकल्प और रेफ़रंस ऐप्लिकेशन के बारे में बताएंगे, ताकि आप आज ही अपना प्रोग्रेसिव वेब ऐप्लिकेशन बनाना शुरू कर सकें.
प्रोग्रेसिव वेब ऐप्लिकेशन क्या है?
यह याद रखना ज़रूरी है कि प्रोग्रेसिव वेब ऐप्लिकेशन हर जगह काम करते हैं, लेकिन आधुनिक ब्राउज़र में बेहतर तरीके से काम करते हैं. प्रोग्रेसिव एन्हैंसमेंट, मॉडल का मुख्य हिस्सा है.
ऐरोन गुस्ताफ़सन ने प्रोग्रेसिव एनहांसमेंट की तुलना, मूंगफली वाले M&M से की है. इस उदाहरण में, मूंगफली आपका कॉन्टेंट है, चॉकलेट कोटिंग आपकी प्रज़ेंटेशन लेयर है, और JavaScript, हार्ड कैंडी का शेल है. इस लेयर का रंग अलग-अलग हो सकता है. साथ ही, इसका इस्तेमाल करने वाले ब्राउज़र की क्षमताओं के आधार पर, इस लेयर का अनुभव भी अलग-अलग हो सकता है.
कैंडी शेल को ऐसे मानें कि जहां प्रोग्रेसिव वेब ऐप्लिकेशन की कई सुविधाएं मौजूद हो सकती हैं. ये वेब और ऐप्लिकेशन, दोनों के बेहतरीन अनुभवों को जोड़ते हैं. ये ब्राउज़र टैब में पहली बार विज़िट करने वाले उपयोगकर्ताओं के लिए काम के होते हैं. इन्हें इंस्टॉल करने की ज़रूरत नहीं होती.
जब उपयोगकर्ता बार-बार इन ऐप्लिकेशन का इस्तेमाल करके इनसे जुड़ता है, तो ये ऐप्लिकेशन कैंडी शेल को और भी बेहतर बनाते हैं. जैसे, सेवा वर्कर की मदद से, धीमे नेटवर्क कनेक्शन पर तेज़ी से लोड होना, काम के पुश नोटिफ़िकेशन भेजना, और उपयोगकर्ता की होम स्क्रीन पर ऐसा आइकॉन होना जो ऐप्लिकेशन को फ़ुलस्क्रीन में लोड कर सके. वे वेब ऐप्लिकेशन इंस्टॉल करने का अनुरोध करने वाले स्मार्ट बैनर का भी फ़ायदा ले सकते हैं.
प्रोग्रेसिव वेब ऐप्लिकेशन
- प्रोग्रेसिव - ब्राउज़र की पसंद को ध्यान में रखे बिना, हर उपयोगकर्ता के लिए काम करता है. इसकी वजह यह है कि इन्हें मुख्य टेनेंट के तौर पर, प्रोग्रेसिव एन्हैंसमेंट की मदद से बनाया जाता है.
- रिस्पॉन्सिव - किसी भी डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन के हिसाब से फ़िट हो. जैसे, डेस्कटॉप, मोबाइल, टैबलेट या आने वाले समय में आने वाले किसी भी डिवाइस के हिसाब से.
- कनेक्शन पर निर्भर नहीं - सेवा वर्कर की मदद से, ऑफ़लाइन या खराब क्वालिटी के नेटवर्क पर काम करने के लिए बेहतर बनाया गया.
- ऐप्लिकेशन जैसा - ऐप्लिकेशन स्टाइल के नेविगेशन और इंटरैक्शन देने के लिए, ऐप्लिकेशन शेल मॉडल का इस्तेमाल करें.
- फ़्रेश - सेवा वर्कर की अपडेट प्रोसेस की मदद से, हमेशा अप-टू-डेट रहते हैं.
- सुरक्षित - निजता को बनाए रखने और यह पक्का करने के लिए कि कॉन्टेंट में छेड़छाड़ न की गई हो, इसे TLS के ज़रिए दिखाया जाता है.
- खोजे जा सकने वाले - W3C मेनिफ़ेस्ट और सर्विस वर्कर रजिस्ट्रेशन के दायरे की मदद से, इन्हें “ऐप्लिकेशन” के तौर पर पहचाना जा सकता है. इससे सर्च इंजन उन्हें ढूंढ पाते हैं.
- फिर से जुड़ाव - पुश नोटिफ़िकेशन जैसी सुविधाओं की मदद से, फिर से जुड़ाव को आसान बनाएं.
- इंस्टॉल करने लायक - उपयोगकर्ताओं को ऐप स्टोर की परेशानी के बिना, अपनी होम स्क्रीन पर सबसे काम के ऐप्लिकेशन “बनाए रखने” की सुविधा दें.
- लिंक किया जा सकता है - यूआरएल के ज़रिए आसानी से शेयर किया जा सकता है और इसे इंस्टॉल करने के लिए जटिल तरीकों की ज़रूरत नहीं होती.
प्रोग्रेसिव वेब ऐप्लिकेशन, सिर्फ़ Chrome for Android के लिए नहीं हैं. यहां हम Pokedex प्रोग्रेसिव वेब ऐप्लिकेशन को Firefox for Android (बीटा) में काम करते हुए देख सकते हैं. इसमें, 'होम स्क्रीन पर जोड़ें' सुविधा और सेवा वर्कर की कैश मेमोरी से जुड़ी सुविधाएं पहले से ही काम कर रही हैं.
इस मॉडल के "प्रगतिशील" होने का एक अच्छा पहलू यह है कि ब्राउज़र वेंडर, सुविधाओं के लिए बेहतर सहायता उपलब्ध कराते हैं, ताकि सुविधाओं को धीरे-धीरे अनलॉक किया जा सके. Pokedex जैसे प्रोग्रेसिव वेब ऐप्लिकेशन भी Android पर Opera में शानदार काम करते हैं. साथ ही, इन्हें लागू करने के तरीके में कुछ अहम अंतर भी हैं:
प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में ज़्यादा जानने के लिए, एलेक्स रसेल की ओरिजनल ब्लॉग पोस्ट पढ़ें. पॉल किलन ने प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, एक बहुत ही काम का Stack Overflow टैग भी शुरू किया है. इसे देखना न भूलें.
सिद्धांत
वेब ऐप्लिकेशन मेनिफ़ेस्ट
मेनिफ़ेस्ट की मदद से, आपके वेब ऐप्लिकेशन को उपयोगकर्ता की होम स्क्रीन पर, नेटिव ऐप्लिकेशन जैसा दिखाया जा सकता है. इसकी मदद से, ऐप्लिकेशन को यूआरएल बार के बिना फ़ुल-स्क्रीन मोड में लॉन्च किया जा सकता है. साथ ही, स्क्रीन ओरिएंटेशन को कंट्रोल किया जा सकता है. Android पर Chrome के हाल ही के वर्शन में, पता बार के लिए स्प्लैश स्क्रीन और थीम का रंग तय करने की सुविधा भी मिलती है. इसका इस्तेमाल, आइकॉन के साइज़ और डेंसिटी के हिसाब से, आइकॉन के एक सेट को तय करने के लिए भी किया जाता है. इन आइकॉन का इस्तेमाल, ऊपर बताई गई स्प्लैश स्क्रीन और होम स्क्रीन के आइकॉन के लिए किया जाता है.
मेनिफ़ेस्ट फ़ाइल का सैंपल, वेब स्टार्टर किट और Google Chrome के सैंपल पेज पर मिल सकता है. ब्रूस लॉसन ने मेनिफ़ेस्ट जनरेटर लिखा है और मोनीर लामोरी ने भी वेब मेनिफ़ेस्ट की पुष्टि करने वाला एक आसान टूल लिखा है. इसके इस्तेमाल से उन्हें कई फ़ायदे मिलेंगे.
अपने निजी प्रोजेक्ट में, मैं realfavicongenerator का इस्तेमाल करता/करती हूं. इससे, वेब ऐप्लिकेशन मेनिफ़ेस्ट और iOS, डेस्कटॉप वगैरह पर इस्तेमाल करने के लिए, सही साइज़ के आइकॉन जनरेट किए जा सकते हैं. फ़ेविकॉन नोड मॉड्यूल आपकी बिल्ड प्रोसेस के हिस्से के तौर पर भी वैसा ही आउटपुट दे सकता है.
फ़िलहाल, Chromium-आधारित ब्राउज़र (Chrome, Opera वगैरह) वेब ऐप्लिकेशन मेनिफ़ेस्ट को काम करने में मदद करते हैं. फ़िलहाल, Firefox इस ऐप्लिकेशन के लिए लगातार काम कर रहा है और Edge उन्हें विचार के तहत के तौर पर लिस्ट कर रहा है. WebKit/Safari ने अभी तक इस सुविधा को लागू करने के अपने इंटेंट के बारे में सार्वजनिक सिग्नल पोस्ट नहीं किए हैं.
ज़्यादा जानकारी के लिए, वेब की बुनियादी बातों पर Android के लिए Chrome में वेब ऐप्लिकेशन मेनिफ़ेस्ट के साथ इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन पढ़ें.
"होम स्क्रीन पर जोड़ें" बैनर
Android पर Chrome अभी से आपकी साइट को होम स्क्रीन पर जोड़ने की सुविधा देता है. हालांकि, हाल के वर्शन में वेब ऐप्लिकेशन इंस्टॉल करने के लिए बढ़ावा देने वाले बैनर इस्तेमाल करके, साइटों को जोड़ने का सुझाव भी दिया जा सकता है.
ऐप्लिकेशन इंस्टॉल करने के लिए प्रॉम्प्ट दिखाने के लिए, आपके ऐप्लिकेशन को ये शर्तें पूरी करनी होंगी:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट मान्य हो
- एचटीटीपीएस पर दिखाया जाना चाहिए (बिना किसी शुल्क के सर्टिफ़िकेट पाने के लिए, letsencrypt देखें)
- मान्य सर्विस वर्कर रजिस्टर किया गया हो
- दो बार विज़िट किया गया हो, यानी विज़िट के बीच कम से कम पांच मिनट हो
ऐप्लिकेशन इंस्टॉल बैनर के कई सैंपल उपलब्ध हैं. इनमें बुनियादी बैनर के बारे में जानकारी दी गई है. साथ ही, इस्तेमाल के ज़्यादा मुश्किल मामलों के बारे में भी बताया गया है, जैसे कि मिलते-जुलते ऐप्लिकेशन दिखाना.
ऑफ़लाइन कैश मेमोरी के लिए सर्विस वर्कर
सर्विस वर्कर, एक ऐसी स्क्रिप्ट होती है जो आपके वेब पेज से अलग, बैकग्राउंड में चलती है. यह इवेंट का जवाब देता है. इसमें उन पेजों से किए गए नेटवर्क अनुरोध भी शामिल हैं जिन पर यह काम करता है. सर्विस वर्कर का लाइफ़टाइम जान-बूझकर छोटा रखा जाता है.
यह किसी इवेंट के मिलने पर चालू होता है और सिर्फ़ तब तक चलता है, जब तक उसे इवेंट को प्रोसेस करने की ज़रूरत होती है. सर्विस वर्कर, संसाधनों को कैश करने के लिए आपको कैश एपीआई का इस्तेमाल करने की अनुमति देता है. साथ ही, इसका इस्तेमाल उपयोगकर्ताओं को ऑफ़लाइन अनुभव देने के लिए किया जा सकता है.
सेवा वर्कर, ऑफ़लाइन कैश मेमोरी के लिए बेहतरीन होते हैं. हालांकि, वे आपकी साइट या वेब ऐप्लिकेशन पर बार-बार आने पर, तुरंत लोड होने के तौर पर परफ़ॉर्मेंस में काफ़ी सुधार करते हैं. अपने ऐप्लिकेशन के शेल को कैश मेमोरी में सेव किया जा सकता है, ताकि वह ऑफ़लाइन काम कर सके और JavaScript का इस्तेमाल करके अपना कॉन्टेंट पॉप्युलेट कर सके.
Google Chrome के सैंपल में, सेवा वर्कर के सैंपल का पूरा सेट उपलब्ध है. अगर आपको सेवा वर्कर के बारे में जानकारी नहीं है, तो हमारा सुझाव है कि आप पॉल किलन के अपना पहला ऑफ़लाइन वेब ऐप्लिकेशन वाले ट्यूटोरियल को देखें. साथ ही, जैक अर्चिबाल्ड की ऑफ़लाइन कुकबुक को ज़रूर पढ़ें.
हमारी टीम, कई सेवा वर्कर हेल्पर यूटिलिटी और बिल्ड टूल भी मैनेज करती है. हमें लगता है कि इनकी मदद से, सेवा वर्कर को सेट अप करने में लगने वाला समय कम किया जा सकता है. ये सर्विस वर्कर लाइब्रेरी में मौजूद हैं. दो मुख्य बातें हैं:
- sw-precache: यह बिल्ड टाइम टूल है, जो आपके वेब ऐप्लिकेशन के शेल को पहले से कैश मेमोरी में सेव करने के लिए, काम की सर्विस वर्कर स्क्रिप्ट जनरेट करता है
- sw-toolbox: एक लाइब्रेरी जो अक्सर इस्तेमाल नहीं किए जाने वाले संसाधनों को रनटाइम कैश मेमोरी में सेव करती है
जेफ़ पॉस्निक ने sw-precache के बारे में एक छोटा लेख लिखा है. इसका नाम है, ऑफ़लाइन-फ़र्स्ट, तेज़, sw-precache मॉड्यूल के साथ. साथ ही, उन्होंने इस टूल के बारे में एक कोडलैब भी लिखा है. यह लेख और कोडलैब आपके लिए मददगार हो सकता है.
Chrome, Opera, और Firefox ने सेवा वर्कर के लिए सहायता लागू की है. Edge ने इस सुविधा में दिलचस्पी के बारे में सार्वजनिक सिग्नल दिए हैं. Safari ने एक इंजीनियर के पांच साल के प्लान के ज़रिए, इस सुविधा में अपनी दिलचस्पी के बारे में थोड़ी जानकारी दी थी.
ग्राहकों को फिर से जोड़ने के लिए पुश नोटिफ़िकेशन
ऐसे वेब ऐप्लिकेशन बनाए जा सकते हैं जिनसे उपयोगकर्ता, टैब के बाहर जुड़ सकें. ब्राउज़र बंद किया जा सकता है. साथ ही, उपयोगकर्ताओं को आपके वेब ऐप्लिकेशन का इस्तेमाल करने की ज़रूरत भी नहीं होती. इस सुविधा के लिए, सर्विस वर्कर और वेब ऐप्लिकेशन मेनिफ़ेस्ट, दोनों की ज़रूरत होती है. ये दोनों सुविधाएं, पहले बताई गई कुछ सुविधाओं पर आधारित हैं.
Push API को Chrome में लागू किया गया है. इसे Firefox में डेवलप किया जा रहा है और Edge में इस पर विचार किया जा रहा है. Safari ने इस सुविधा को लागू करने के अपने इंटेंट के बारे में अभी तक कोई सार्वजनिक जानकारी नहीं दी है.
ओपन वेब पर पुश नोटिफ़िकेशन, पुश सेटअप करने के बारे में पूरी जानकारी देने वाली मैट गौंट की पोस्ट है. साथ ही, Web Fundamentals पर पुश नोटिफ़िकेशन कोडलैब भी उपलब्ध है.
अगर आपको वीडियो देखना पसंद है, तो Chrome टीम के माइकल वैन ओवरकरक ने Push के बारे में छह मिनट का एक वीडियो भी बनाया है.
ऐडवांस सुविधाओं को लेयर में जोड़ना
याद रखें कि आपके वेब ऐप्लिकेशन को देखने के लिए इस्तेमाल किए जा रहे ब्राउज़र के आधार पर, उपयोगकर्ता अनुभव अलग-अलग हो सकता है. आपके पास हार्ड कैंडी के शेल को कंट्रोल करने का विकल्प होता है.
वेब प्लैटफ़ॉर्म पर आने वाली अन्य सुविधाओं को भी इस तरह अपने प्रगतिशील वेब ऐप्लिकेशन में जोड़ा जा सकता है. जैसे, बैकग्राउंड सिंक (आपके वेब ऐप्लिकेशन के बंद होने पर भी, सर्वर के साथ डेटा सिंक करने के लिए) और वेब ब्लूटूथ (अपने वेब ऐप्लिकेशन से ब्लूटूथ डिवाइसों से बातचीत करने के लिए).
Chrome में, एक बार में बैकग्राउंड में सिंक करने की सुविधा चालू है. साथ ही, जैक आर्किबाल्ड ने ऑफ़लाइन Wikipedia ऐप्लिकेशन और लेख के बारे में एक वीडियो बनाया है, जिसमें इस सुविधा के काम करने का तरीका बताया गया है. अगर आपको इस एपीआई को आज़माना है, तो फ़्रांकोइस बफ़ोर के पास वेब ब्लूटूथ के कई सैंपल भी उपलब्ध हैं.
फ़्रेमवर्क के हिसाब से
अगर आपको अपने मौजूदा ऐप्लिकेशन या फ़्रेमवर्क पर, ऊपर दिए गए किसी भी सिद्धांत को लागू करना है, तो आपको इससे कोई समस्या नहीं होगी. प्रोग्रेसिव वेब ऐप्लिकेशन बनाते समय, ध्यान में रखने लायक कुछ और बातें ये हैं: उपयोगकर्ताओं को ध्यान में रखकर बनाया गया RAIL परफ़ॉर्मेंस मॉडल और FLIP आधारित ऐनिमेशन.
मुझे उम्मीद है कि साल 2016 में, हमें प्रगतिशील वेब ऐप्लिकेशन की मुख्य सुविधा के तौर पर, ऑर्गैनिक तरीके से तैयार किए गए ज़्यादा से ज़्यादा बॉयलरप्लेट और सीड प्रोजेक्ट देखने को मिलेंगे. तब तक, अपने ऐप्लिकेशन में इन सुविधाओं को जोड़ने में आने वाली समस्याएं बहुत ज़्यादा नहीं हैं. साथ ही, मेरा मानना है कि इन सुविधाओं को जोड़ने की कोशिश करना ज़रूरी है.
आर्किटेक्चर
प्रोग्रेसिव वेब ऐप्लिकेशन मॉडल पर "ऑल-इन" मॉडल को लागू करने के अलग-अलग लेवल हैं. हालांकि, एक आम तरीका यह है कि उन्हें ऐप्लिकेशन शेल के तौर पर बनाया जाए. ऐसा करना ज़रूरी नहीं है, लेकिन इससे कई फ़ायदे मिलते हैं.
ऐप्लिकेशन शेल आर्किटेक्चर, आपके ऐप्लिकेशन शेल (यूज़र इंटरफ़ेस) को कैश मेमोरी में सेव करने के लिए बढ़ावा देता है, ताकि वह ऑफ़लाइन काम कर सके और JavaScript का इस्तेमाल करके अपना कॉन्टेंट पॉप्युलेट कर सके. बार-बार आने पर, इससे आपको नेटवर्क के बिना भी स्क्रीन पर काम के पिक्सल तुरंत मिल सकते हैं. भले ही, आपका कॉन्टेंट आखिर में नेटवर्क से ही आता हो. इससे परफ़ॉर्मेंस में काफ़ी बढ़ोतरी होती है.
जेरेमी कीथ ने हाल ही में टिप्पणी की है कि इस तरह के मॉडल में, शायद सर्वर-साइड रेंडरिंग को फ़ॉलबैक के तौर पर नहीं देखा जाना चाहिए. हालांकि, क्लाइंट-साइड रेंडरिंग को बेहतर बनाने की सुविधा के तौर पर देखना चाहिए. यह सही सुझाव है.
ऐप्लिकेशन शेल मॉडल में, सर्वर-साइड रेंडरिंग का ज़्यादा से ज़्यादा इस्तेमाल किया जाना चाहिए. साथ ही, क्लाइंट-साइड प्रोग्रेसिव रेंडरिंग का इस्तेमाल बेहतर अनुभव देने के लिए किया जाना चाहिए. ठीक उसी तरह जैसे हम सेवा वर्कर के काम करने की सुविधा होने पर, अनुभव को "बेहतर" बनाते हैं. इस समस्या को हल करने के कई तरीके हैं.
हमारा सुझाव है कि आप आर्किटेक्चर के बारे में हमारा लेख पढ़ें और यह आकलन करें कि आपके ऐप्लिकेशन और स्टैक पर मिलते-जुलते सिद्धांतों को सबसे सही तरीके से कैसे लागू किया जा सकता है.
शुरू करने के लिए बॉयलरप्लेट
ऐप्लिकेशन शेल
app-shell डेटा स्टोर करने की जगह में, ऐप्लिकेशन शेल आर्किटेक्चर को करीब-करीब पूरी तरह लागू किया गया है. इसका बैकएंड Express.js में लिखा गया है और फ़्रंट-एंड ES2015 में लिखा गया है.
यह मॉडल के क्लाइंट और सर्वर-साइड, दोनों हिस्सों को कवर करता है. साथ ही, इसमें बहुत कुछ होता है. इसलिए, कोडबेस के बारे में जानने में आपको कुछ समय लगेगा. फ़िलहाल, यह प्रोग्रेसिव वेब ऐप्लिकेशन बनाने का सबसे बेहतर तरीका है. इस प्रोजेक्ट के लिए, हम Docs पर फ़ोकस करेंगे.
Polymer स्टार्टर किट
Polymer वेब ऐप्लिकेशन के लिए आधिकारिक शुरुआती पॉइंट, प्रोग्रेसिव वेब ऐप्लिकेशन की इन सुविधाओं के साथ काम करता है:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- Android के लिए Chrome का स्प्लैशस्क्रीन
- प्लैटिनम SW एलिमेंट की मदद से, सर्विस वर्कर की ऑफ़लाइन कैश मेमोरी
- प्लैटिनम पुश एलिमेंट के साथ पुश नोटिफ़िकेशन (मैन्युअल सेट अप ज़रूरी है)
कुछ प्रोग्रेसिव पॉलीमर वेब ऐप्लिकेशन में मिलने वाले कुछ बेहतर परफ़ॉर्मेंस पैटर्न (जैसे, ऐप्लिकेशन शेल मॉडल, एक साथ काम न करने वाली सेटिंग) के साथ PSK के मौजूदा वर्शन का इस्तेमाल नहीं किया जा सकता.
हमारा मकसद, 2016 में इन पैटर्न को PSK में शामिल करना है. हालांकि, इस बारे में शुरुआती एक्सपेरिमेंट, रॉब डॉडसन के बनाए गए Polymer Zuperkulblog ऐप्लिकेशन और एरिक बिडलमैन के Polymer परफ़ॉर्मेंस पैटर्न टॉक में देखे जा सकते हैं.
वेब स्टार्टर किट
नए वेनिला प्रोजेक्ट के लिए, हमारी राय है कि इन प्रोग्रेसिव वेब ऐप्लिकेशन की सुविधाओं का इस्तेमाल करें:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- Android के लिए Chrome का स्प्लैशस्क्रीन
- sw-precache की मदद से, सर्विस वर्कर की प्री-कैशिंग
अगर आपको वैनिला JS/ES2015 के साथ काम करना है और Polymer का इस्तेमाल नहीं हो पा रहा है, तो वेब स्टार्टर किट एक रेफ़रंस पॉइंट के तौर पर काम आ सकती है. इसका इस्तेमाल करके, कोड स्निपेट को फिर से इस्तेमाल किया जा सकता है या उनका इस्तेमाल किया जा सकता है.
फ़्रेमवर्क के साथ और बिना फ़्रेमवर्क के प्रोग्रेसिव वेब ऐप्लिकेशन
समुदाय के सदस्यों ने JS लाइब्रेरी और फ़्रेमवर्क के साथ और उनके बिना भी पहले से ही कई ओपन-सोर्स प्रोग्रेसिव वेब ऐप्लिकेशन बना लिए हैं. अगर आपको प्रेरणा चाहिए, तो यहां दिए गए रिपॉज़िटरी, रेफ़रंस के तौर पर काम के साबित हो सकते हैं. ये ऐप्लिकेशन बहुत अच्छे हैं.
Vanilla JavaScript
- पॉल लुईस की वॉइस मेमो सुविधा,
app-shell(लिखित जानकारी) की तरह ही बनाई गई है - जेक आर्चिबाल्ड का ऑफ़लाइन Wikipedia (वीडियो)
- पॉल किलन की Air Horner
- पॉल लुईस का गिटार ट्यूनर (लिखना)
Polymer
- रॉब डॉडसन का Zuperkulblog (स्लाइड)
React
वर्चुअल-डीओएम
- Nolan Lawson का Pokedex - यह एक बेहतरीन प्रोग्रेसिव वेब ऐप्लिकेशन है. इसमें "सभी काम वेब वर्कर में करें" वाला तरीका अपनाया गया है, ताकि प्रोग्रेसिव रेंडरिंग में मदद मिल सके. (लिखाई)
Angular.js
- केनेथ ऑकेनबर्ग की Timey.in - यह जानकारी, संसाधन को पहले से कैश मेमोरी में सेव करने के लिए भी
sw-precacheका इस्तेमाल करती है
आखिरी बातें
जैसा कि बताया गया है, प्रोग्रेसिव वेब ऐप्लिकेशन अभी शुरुआती दौर में हैं. हालांकि, इस समय इनके काम करने के तरीकों को आज़माने और यह देखने का बेहतरीन मौका है कि ये आपके वेब ऐप्लिकेशन पर कितने अच्छे से लागू हो सकते हैं.
फ़िलहाल, पॉल किनलैन प्रोग्रेसिव वेब ऐप्लिकेशन के लिए 'वेब की बुनियादी बातों' के दिशा-निर्देशों की योजना बना रहे हैं. अगर आपके पास ऐसी जानकारी है जिसे आप शामिल करना चाहते हैं, तो कृपया थ्रेड पर बेझिझक टिप्पणी करें.
इसके बारे में और पढ़ें
- प्रोग्रेसिव वेब ऐप्लिकेशन: टैब के बिना भी बेहतर अनुभव पाना
- वेब डेवलपमेंट के लिए प्रोग्रेसिव वेब ऐप्लिकेशन क्यों अहम हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: अब इस्तेमाल के लिए तैयार हैं
- ServiceWorker की मदद से प्रोग्रेसिव ऐप्लिकेशन बनाना
- प्रोग्रेसिव वेब ऐप्लिकेशन ही आने वाले समय का रुझान हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: मोबाइल इस्तेमाल करने का एक नया तरीका
- पेश है Pokedex.org: Pokémon के प्रशंसकों के लिए एक प्रोग्रेसिव वेब ऐप्लिकेशन
- Chrome डेवलपर समिट की खास जानकारी: प्रोग्रेसिव वेब ऐप्लिकेशन