हाल ही में, प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में काफ़ी चर्चा हुई है. यह एक नया मॉडल है, लेकिन इसके सिद्धांतों से वैनिला 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, डेस्कटॉप वगैरह पर इस्तेमाल करने के लिए, सही साइज़ के आइकॉन जनरेट किए जा सकते हैं. favicons Node मॉड्यूल भी आपकी बिल्ड प्रोसेस के हिस्से के तौर पर मिलता-जुलता आउटपुट दे सकता है.
फ़िलहाल, Chromium पर आधारित ब्राउज़र (Chrome, Opera वगैरह) वेब ऐप्लिकेशन मेनिफ़ेस्ट के साथ काम करते हैं. Firefox इस सुविधा पर काम कर रहा है और Edge ने इसे विचारा जा रहा है के तौर पर लिस्ट किया है. WebKit/Safari ने अभी तक इस सुविधा को लागू करने के अपने इंटेंट के बारे में सार्वजनिक सिग्नल पोस्ट नहीं किए हैं.
ज़्यादा जानकारी के लिए, वेब की बुनियादी बातें पेज पर Chrome for Android में वेब ऐप्लिकेशन मेनिफ़ेस्ट की मदद से इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन लेख पढ़ें.
"होम स्क्रीन पर जोड़ें" बैनर
Android पर Chrome में, आपकी साइट को होम स्क्रीन पर जोड़ने की सुविधा पहले से ही मौजूद है. हालांकि, हाल ही के वर्शन में, नेटिव वेब ऐप्लिकेशन इंस्टॉल करने के बैनर का इस्तेमाल करके, साइटों को जोड़ने के सुझाव भी दिए जाते हैं.
ऐप्लिकेशन इंस्टॉल करने के लिए प्रॉम्प्ट दिखाने के लिए, आपके ऐप्लिकेशन को ये शर्तें पूरी करनी होंगी:
- आपके पास वेब ऐप्लिकेशन का मान्य मेनिफ़ेस्ट हो
- एचटीटीपीएस पर दिखाया जाना चाहिए (बिना किसी शुल्क के सर्टिफ़िकेट पाने के लिए, letsencrypt देखें)
- आपने मान्य सर्विस वर्कर रजिस्टर किया हो
- उस पर दो बार विज़िट की गई हो और दोनों विज़िट के बीच कम से कम पांच मिनट का अंतर हो
ऐप्लिकेशन इंस्टॉल करने का अनुरोध करने वाले बैनर के कई सैंपल उपलब्ध हैं. इनमें सामान्य बैनर से लेकर, मिलते-जुलते ऐप्लिकेशन दिखाने जैसे ज़्यादा जटिल इस्तेमाल के उदाहरण शामिल हैं.
ऑफ़लाइन कैश मेमोरी के लिए सर्विस वर्कर
सर्विस वर्कर एक स्क्रिप्ट होती है, जो आपके वेब पेज से अलग, बैकग्राउंड में चलती है. यह इवेंट के जवाब देता है. इनमें, उन पेजों से किए गए नेटवर्क अनुरोध भी शामिल हैं जिन्हें यह दिखाता है. सेवा वर्कर का लाइफ़टाइम जान-बूझकर छोटा रखा जाता है.
यह किसी इवेंट के मिलने पर चालू होता है और सिर्फ़ तब तक चलता है, जब तक उसे इवेंट को प्रोसेस करने की ज़रूरत होती है. सेवा वर्कर की मदद से, संसाधनों को कैश मेमोरी में सेव करने के लिए Cache API का इस्तेमाल किया जा सकता है. साथ ही, इसका इस्तेमाल करके उपयोगकर्ताओं को ऑफ़लाइन अनुभव दिया जा सकता है.
सेवा वर्कर, ऑफ़लाइन कैश मेमोरी के लिए बेहतरीन होते हैं. हालांकि, वे आपकी साइट या वेब ऐप्लिकेशन पर बार-बार आने पर, तुरंत लोड होने के तौर पर परफ़ॉर्मेंस में काफ़ी सुधार करते हैं. अपने ऐप्लिकेशन के शेल को कैश मेमोरी में सेव किया जा सकता है, ताकि वह ऑफ़लाइन काम कर सके और JavaScript का इस्तेमाल करके अपना कॉन्टेंट पॉप्युलेट कर सके.
Google Chrome के सैंपल में, सेवा वर्कर के सैंपल का पूरा सेट उपलब्ध है. अगर आपको सेवा वर्कर के बारे में जानकारी नहीं है, तो हमारा सुझाव है कि आप पॉल किलन के अपना पहला ऑफ़लाइन वेब ऐप्लिकेशन वाले ट्यूटोरियल को देखें. साथ ही, जैक अर्चिबाल्ड की ऑफ़लाइन कुकबुक को ज़रूर पढ़ें.
हमारी टीम, कई सेवा वर्कर हेल्पर यूटिलिटी और बिल्ड टूल भी मैनेज करती है. हमें लगता है कि इनकी मदद से, सेवा वर्कर को सेट अप करने में लगने वाला समय कम किया जा सकता है. ये सर्विस वर्कर लाइब्रेरी में मौजूद हैं. इनमें से दो मुख्य हैं:
- sw-precache: यह बिल्ड टाइम टूल है, जो आपके वेब ऐप्लिकेशन के शेल को पहले से कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर स्क्रिप्ट जनरेट करता है
- sw-toolbox: यह लाइब्रेरी, अक्सर इस्तेमाल न किए जाने वाले रिसॉर्स के लिए रनटाइम कैशिंग की सुविधा देती है
जेफ़ पॉस्निक ने sw-precache के बारे में एक छोटा लेख लिखा है. इसका नाम है, ऑफ़लाइन-फ़र्स्ट, तेज़, sw-precache मॉड्यूल के साथ. साथ ही, उन्होंने इस टूल के बारे में एक codelab भी लिखा है. यह लेख और कोडलैब आपके लिए मददगार हो सकता है.
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 का स्प्लैशस्क्रीन
- Platinum SW एलिमेंट की मदद से, सर्विस वर्कर की ऑफ़लाइन कैश मेमोरी
- प्लैटिनम पुश एलिमेंट की मदद से पुश नोटिफ़िकेशन (मैन्युअल सेटअप ज़रूरी है)
PSK के मौजूदा वर्शन में, परफ़ॉर्मेंस के कुछ बेहतर पैटर्न (जैसे, ऐप्लिकेशन शेल मॉडल, असाइन्क लोडिंग) के लिए सहायता नहीं है.ये पैटर्न, आपको कुछ प्रोग्रेसिव पॉलिमर वेब ऐप्लिकेशन में मिलते हैं.
हमारा मकसद, 2016 में इन पैटर्न को PSK में शामिल करना है. हालांकि, इस बारे में शुरुआती एक्सपेरिमेंट, रॉब डॉडसन के बनाए गए Polymer Zuperkulblog ऐप्लिकेशन और एरिक बिडलमैन के Polymer Perf Patterns टॉक में देखे जा सकते हैं.
वेब स्टार्टर किट
नए वेब प्रोजेक्ट के लिए, हमारी सलाह है कि आप प्रोग्रेसिव वेब ऐप्लिकेशन की इन सुविधाओं का इस्तेमाल करें:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- Android के लिए Chrome का स्प्लैशस्क्रीन
- sw-precache की मदद से, सर्विस वर्कर की प्री-कैशिंग
अगर आपको वैनिला JS/ES2015 के साथ काम करना है और Polymer का इस्तेमाल नहीं करना है, तो वेब स्टार्टर किट एक रेफ़रंस पॉइंट के तौर पर काम कर सकती है. इसकी मदद से, कोड स्निपेट का फिर से इस्तेमाल किया जा सकता है या उन्हें चुराया जा सकता है.
फ़्रेमवर्क के साथ और बिना फ़्रेमवर्क के प्रोग्रेसिव वेब ऐप्लिकेशन
कम्यूनिटी के सदस्यों ने पहले ही कई ओपन-सोर्स प्रोग्रेसिव वेब ऐप्लिकेशन बनाए हैं. इनमें JS लाइब्रेरी और फ़्रेमवर्क, दोनों का इस्तेमाल किया गया है. अगर आपको प्रेरणा चाहिए, तो यहां दिए गए रिपॉज़िटरी, रेफ़रंस के तौर पर काम के साबित हो सकते हैं. ये ऐप्लिकेशन बहुत अच्छे हैं.
Vanilla JavaScript
- पॉल लुईस की वॉइस मेमो सुविधा,
app-shell(लिखित जानकारी) के स्ट्रक्चर के हिसाब से बनाई गई है - जैक आर्किबाल्ड का ऑफ़लाइन Wikipedia (वीडियो)
- पॉल किलन की Air Horner
- पॉल लुईस का Guitar Tuner (जानकारी)
Polymer
- रॉब डॉडसन का Zuperkulblog (स्लाइड)
React
वर्चुअल-डीओएम
- Nolan Lawson का Pokedex - प्रोग्रेसिव रेंडरिंग में मदद करने के लिए, "सभी काम वेब वर्कर में करें" वाले तरीके का इस्तेमाल करने वाला बेहतरीन प्रोग्रेसिव वेब ऐप्लिकेशन. (लिखाई)
Angular.js
- केनेथ ऑचबर्ग का Timey.in - रिसॉर्स को पहले से कैश मेमोरी में सेव करने के लिए,
sw-precacheका इस्तेमाल करता है
आखिरी बातें
जैसा कि बताया गया है, प्रोग्रेसिव वेब ऐप्लिकेशन अभी शुरुआती दौर में हैं. हालांकि, यह उनके काम करने के तरीकों को आज़माने और यह देखने का रोमांचक समय है कि वे आपके वेब ऐप्लिकेशन पर कितने अच्छे से लागू हो सकते हैं.
फ़िलहाल, पॉल किलन, वेब फ़ंडामेंटल के दिशा-निर्देशों को प्रोग्रेसिव वेब ऐप्लिकेशन के लिए प्लान कर रहे हैं. अगर आपको इन दिशा-निर्देशों में कुछ शामिल कराना है, तो कृपया इस थ्रेड पर टिप्पणी करें.
इसके बारे में और पढ़ें
- प्रोग्रेसिव वेब ऐप्लिकेशन: टैब के बिना भी बेहतर अनुभव पाना
- वेब डेवलपमेंट के लिए प्रोग्रेसिव वेब ऐप्लिकेशन क्यों अहम हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: मुख्य तौर पर इस्तेमाल के लिए तैयार हैं
- ServiceWorker की मदद से प्रोग्रेसिव ऐप्लिकेशन बनाना
- प्रोग्रेसिव वेब ऐप्लिकेशन ही आने वाले समय का रुझान हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: मोबाइल का इस्तेमाल करने का नया तरीका
- पेश है Pokedex.org: Pokémon के प्रशंसकों के लिए प्रोग्रेसिव वेब ऐप्लिकेशन
- Chrome डेवलपर समिट की खास जानकारी: प्रोग्रेसिव वेब ऐप्लिकेशन