प्रोग्रेसिव वेब ऐप्लिकेशन का इस्तेमाल शुरू करना

हाल ही में, प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में काफ़ी चर्चा हुई है. ये अब भी काफ़ी नए मॉडल हैं. हालांकि, इनके सिद्धांतों से वैनिला जेएस, React, Polymer, Angular या किसी अन्य फ़्रेमवर्क की मदद से बनाए गए ऐप्लिकेशन को बेहतर बनाया जा सकता है. इस पोस्ट में, मैं कुछ विकल्पों और रेफ़रंस ऐप्लिकेशन के बारे में बताऊंगा. इनकी मदद से, आज ही अपना प्रोग्रेसिव वेब ऐप्लिकेशन बनाया जा सकता है.

प्रोग्रेसिव वेब ऐप्लिकेशन क्या है?

यह याद रखना ज़रूरी है कि प्रोग्रेसिव वेब ऐप्लिकेशन हर जगह काम करते हैं. हालांकि, मॉडर्न ब्राउज़र में ये ज़्यादा बेहतर तरीके से काम करते हैं. परतदार वृद्धि, इस मॉडल की रीढ़ की हड्डी है.

ऐरन गस्टाफ़सन ने परतदार वृद्धि की तुलना, पीनट एमऐंडएम से की. मूंगफली आपका कॉन्टेंट है, चॉकलेट की कोटिंग आपकी प्रज़ेंटेशन लेयर है, और JavaScript हार्ड कैंडी शेल है. इस लेयर का रंग अलग-अलग हो सकता है. साथ ही, इसका अनुभव इस बात पर निर्भर करता है कि इसका इस्तेमाल करने वाले ब्राउज़र की क्षमताएं क्या हैं.

कैंडी शेल को एक ऐसी जगह के तौर पर देखें जहां प्रोग्रेसिव वेब ऐप्लिकेशन की कई सुविधाएं मौजूद हो सकती हैं. ये ऐसे अनुभव हैं जिनमें वेब और ऐप्लिकेशन, दोनों की बेहतरीन सुविधाएं शामिल हैं. ये ऐप्लिकेशन, उपयोगकर्ताओं के लिए काफ़ी काम के होते हैं. इन्हें इंस्टॉल करने की ज़रूरत नहीं होती. ब्राउज़र टैब में पहली बार खोलने पर ही, ये काम करने लगते हैं.

जब उपयोगकर्ता इन ऐप्लिकेशन को बार-बार इस्तेमाल करता है, तो उसे और भी बेहतर अनुभव मिलता है. जैसे, धीमे इंटरनेट कनेक्शन पर भी ये ऐप्लिकेशन तेज़ी से लोड होते हैं (सर्विस वर्कर की वजह से), काम के पुश नोटिफ़िकेशन भेजते हैं, और उपयोगकर्ता की होम स्क्रीन पर एक बेहतरीन आइकॉन होता है. इस आइकॉन की मदद से, इन ऐप्लिकेशन को फ़ुलस्क्रीन ऐप्लिकेशन इस्तेमाल करने के अनुभव के तौर पर लोड किया जा सकता है. वे स्मार्ट वेब ऐप्लिकेशन इंस्टॉल करने का अनुरोध करने वाले बैनर का भी फ़ायदा ले सकते हैं.

प्रोग्रेसिव वेब ऐप्लिकेशन,

• प्रोग्रेसिव - ये हर उपयोगकर्ता के लिए काम करते हैं, चाहे वे किसी भी ब्राउज़र का इस्तेमाल कर रहे हों. ऐसा इसलिए, क्योंकि इन्हें परतदार वृद्धि को ध्यान में रखकर बनाया गया है.
• रिस्पॉन्सिव - किसी भी डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन, डेस्कटॉप, मोबाइल, टैबलेट या किसी अन्य डिवाइस के हिसाब से फ़िट हो जाते हैं.
• कनेक्टिविटी से स्वतंत्र - सर्विस वर्कर की मदद से, ऑफ़लाइन या खराब क्वालिटी वाले नेटवर्क पर भी काम करता है.
• ऐप्लिकेशन जैसा - ऐप्लिकेशन स्टाइल वाले नेविगेशन और इंटरैक्शन उपलब्ध कराने के लिए, ऐप शेल मॉडल का इस्तेमाल करें.
• अप-टू-डेट - सर्विस वर्कर अपडेट प्रोसेस की वजह से, हमेशा अप-टू-डेट रहता है.
• सुरक्षित - टीएलएस के ज़रिए दिखाया जाता है, ताकि जासूसी को रोका जा सके और यह पक्का किया जा सके कि कॉन्टेंट के साथ छेड़छाड़ न की गई हो.
• खोजे जाने लायक - इन्हें “ऐप्लिकेशन” के तौर पर पहचाना जा सकता है. ऐसा W3C मेनिफ़ेस्ट और सर्विस वर्कर रजिस्ट्रेशन स्कोप की वजह से होता है. इससे सर्च इंजन को इन्हें ढूंढने में मदद मिलती है.
• फिर से जुड़ने की सुविधा - पुश नोटिफ़िकेशन जैसी सुविधाओं की मदद से, उपयोगकर्ताओं को फिर से जुड़ने की सुविधा दें.
• इंस्टॉल किया जा सकता है - उपयोगकर्ताओं को अपने होम स्क्रीन पर, सबसे काम के ऐप्लिकेशन “रखने” की अनुमति दें. इसके लिए, उन्हें ऐप स्टोर पर जाने की ज़रूरत नहीं है.
• लिंक किया जा सकता है - यूआरएल की मदद से आसानी से शेयर किया जा सकता है. इसके लिए, इंस्टॉल करने की मुश्किल प्रोसेस की ज़रूरत नहीं होती.

प्रोग्रेसिव वेब ऐप्लिकेशन, Android के लिए Chrome के अलावा अन्य प्लैटफ़ॉर्म पर भी उपलब्ध हैं. यहां हम देख सकते हैं कि Pokedex प्रोग्रेसिव वेब ऐप्लिकेशन, Android के लिए Firefox (बीटा वर्शन) में काम कर रहा है. इसमें, होम स्क्रीन पर जोड़ने और सर्विस वर्कर की कैश मेमोरी में सेव करने की शुरुआती सुविधाएं ठीक से काम कर रही हैं.

इस मॉडल के "प्रोग्रेसिव" होने का एक फ़ायदा यह है कि ब्राउज़र वेंडर, सुविधाओं के लिए बेहतर सहायता उपलब्ध कराते हैं. इससे सुविधाओं को धीरे-धीरे अनलॉक किया जा सकता है. Pokedex जैसे प्रोग्रेसिव वेब ऐप्लिकेशन, Android पर Opera में भी बहुत अच्छे से काम करते हैं. हालांकि, इन्हें लागू करने में कुछ अहम अंतर होते हैं:

प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में ज़्यादा जानने के लिए, एलेक्स रसेल की ओरिजनल ब्लॉग पोस्ट पढ़ें. इसमें उन्होंने प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में बताया है. पॉल किनलन ने प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, एक बहुत ही काम का Stack Overflow टैग भी शुरू किया है. इसे ज़रूर देखें.

सिद्धांत

वेब ऐप्लिकेशन मेनिफ़ेस्ट

मेनिफ़ेस्ट की मदद से, आपके वेब ऐप्लिकेशन को उपयोगकर्ता की होम स्क्रीन पर नेटिव ऐप्लिकेशन की तरह दिखाया जा सकता है. इससे ऐप्लिकेशन को फ़ुल-स्क्रीन मोड में लॉन्च किया जा सकता है. इसमें यूआरएल बार मौजूद नहीं होता. साथ ही, स्क्रीन ओरिएंटेशन को कंट्रोल किया जा सकता है. Android पर Chrome के नए वर्शन में, पता बार के लिए स्प्लैश स्क्रीन और थीम का रंग तय किया जा सकता है. इसका इस्तेमाल, साइज़ और डेंसिटी के हिसाब से आइकॉन का एक सेट तय करने के लिए भी किया जाता है. इस सेट का इस्तेमाल, ऊपर बताई गई स्प्लैश स्क्रीन और होम स्क्रीन के आइकॉन के लिए किया जाता है.

मेनिफ़ेस्ट फ़ाइल का सैंपल, Web Starter Kit और Google Chrome के सैंपल में देखा जा सकता है. ब्रूस लॉसन ने मेनिफ़ेस्ट जनरेटर बनाया है. साथ ही, मुनीर लामौरी ने भी एक आसान वेब मेनिफ़ेस्ट वैलिडेटर बनाया है, जिसे देखना चाहिए.

मैं अपने निजी प्रोजेक्ट में, realfavicongenerator का इस्तेमाल करता हूं. इससे मुझे वेब ऐप्लिकेशन मेनिफ़ेस्ट के साथ-साथ iOS, डेस्कटॉप वगैरह पर इस्तेमाल करने के लिए, सही साइज़ के आइकॉन जनरेट करने में मदद मिलती है. favicons Node मॉड्यूल भी आपकी बिल्ड प्रोसेस के हिस्से के तौर पर, मिलता-जुलता आउटपुट दे सकता है.

Chromium पर आधारित ब्राउज़र (Chrome, Opera वगैरह) आज वेब ऐप्लिकेशन मेनिफ़ेस्ट के साथ काम करते हैं. Firefox, इस सुविधा को डेवलप करने के लिए लगातार काम कर रहा है. वहीं, Edge ने इसे विचाराधीन के तौर पर लिस्ट किया है. WebKit/Safari ने इस सुविधा को लागू करने के अपने इरादों के बारे में, अब तक कोई सार्वजनिक सिग्नल पोस्ट नहीं किया है.

ज़्यादा जानकारी के लिए, वेब की बुनियादी बातों पर मौजूद, Android के लिए Chrome में वेब ऐप्लिकेशन मेनिफ़ेस्ट की मदद से इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन लेख पढ़ें.

"होम स्क्रीन पर जोड़ें" बैनर

Android पर Chrome में, कुछ समय से आपकी साइट को होम स्‍क्रीन पर जोड़ने की सुविधा उपलब्ध है. हालांकि, इसके नए वर्शन में, नेटिव वेब ऐप्लिकेशन इंस्टॉल करने के बैनर का इस्तेमाल करके, साइटों को जोड़ने का अपने-आप मिलने वाला सुझाव भी दिया जाता है.

ऐप्लिकेशन इंस्टॉल करने के प्रॉम्प्ट दिखाने के लिए, आपके ऐप्लिकेशन को ये शर्तें पूरी करनी होंगी:

• वेब ऐप्लिकेशन मेनिफ़ेस्ट मान्य होना चाहिए
• एचटीटीपीएस पर दिखाया जाना चाहिए. मुफ़्त सर्टिफ़िकेट के लिए, letsencrypt देखें
• रजिस्टर किया गया मान्य सर्विस वर्कर होना चाहिए
• दो बार विज़िट किया गया हो और दोनों विज़िट के बीच कम से कम पांच मिनट का अंतर हो

ऐप्लिकेशन इंस्टॉल करने का अनुरोध करने वाले बैनर के कई सैंपल उपलब्ध हैं. इनमें सामान्य बैनर से लेकर, मिलते-जुलते ऐप्लिकेशन दिखाने जैसे ज़्यादा जटिल इस्तेमाल के उदाहरण शामिल हैं.

ऑफ़लाइन कैश मेमोरी के लिए सर्विस वर्कर

सर्विस वर्कर एक स्क्रिप्ट है, जो आपके वेब पेज से अलग, बैकग्राउंड में चलती है. यह इवेंट के हिसाब से काम करता है. इसमें, इसके ज़रिए दिखाए जाने वाले पेजों से किए गए नेटवर्क के अनुरोध भी शामिल हैं. सर्विस वर्कर का लाइफ़टाइम जान-बूझकर कम रखा जाता है.

यह कोई इवेंट मिलने पर चालू होता है और सिर्फ़ तब तक चलता है, जब तक इसे प्रोसेस करने की ज़रूरत होती है. सर्विस वर्कर की मदद से, Cache API का इस्तेमाल करके संसाधनों को कैश मेमोरी में सेव किया जा सकता है. साथ ही, इसका इस्तेमाल उपयोगकर्ताओं को ऑफ़लाइन अनुभव देने के लिए किया जा सकता है.

सर्विस वर्कर, ऑफ़लाइन कैश मेमोरी के लिए बेहतरीन होते हैं. हालांकि, ये आपकी साइट या वेब ऐप्लिकेशन पर बार-बार आने वाले लोगों के लिए, तुरंत लोड होने की सुविधा भी देते हैं. इससे परफ़ॉर्मेंस बेहतर होती है. आपके पास अपने ऐप्लिकेशन शेल को कैश मेमोरी में सेव करने का विकल्प होता है, ताकि वह ऑफ़लाइन काम कर सके. साथ ही, JavaScript का इस्तेमाल करके उसके कॉन्टेंट को पॉप्युलेट किया जा सके.

Google Chrome के सैंपल पर, सर्विस वर्कर के सैंपल का एक पूरा सेट उपलब्ध है. जेक आर्किबाल्ड की ऑफ़लाइन कुकबुक ज़रूर पढ़ें. अगर आप सर्विस वर्कर के लिए नए हैं, तो हमारा सुझाव है कि आप पॉल किनलन की आपका पहला ऑफ़लाइन वेब ऐप्लिकेशन वॉकथ्रू आज़माएं.

हमारी टीम, सर्विस वर्कर हेल्पर की कई सुविधाएं और बिल्ड टूल भी उपलब्ध कराती है. हमें लगता है कि ये सुविधाएं और टूल, सर्विस वर्कर सेटअप करने में लगने वाले समय को कम करने में मददगार हैं. इन्हें सर्विस वर्कर लाइब्रेरी में शामिल किया गया है. इनमें से दो मुख्य हैं:

• sw-precache: यह बिल्ड-टाइम टूल है, जो सर्विस वर्कर स्क्रिप्ट जनरेट करता है. यह स्क्रिप्ट, आपके वेब ऐप्लिकेशन शेल को पहले से कैश मेमोरी में सेव करने के लिए काम की है
• sw-toolbox: यह एक लाइब्रेरी है, जो कभी-कभी इस्तेमाल किए जाने वाले संसाधनों के लिए रनटाइम कैश मेमोरी उपलब्ध कराती है

जेफ़ पॉस्निक ने sw-precache के बारे में एक छोटा सा लेख लिखा है. इसका नाम है sw-precache मॉड्यूल की मदद से, ऑफ़लाइन-फ़र्स्ट और तेज़. साथ ही, उन्होंने इसी टूल पर एक कोडलैब भी लिखा है, जो आपके लिए मददगार हो सकता है.

Chrome, Opera, और Firefox ने सर्विस वर्कर के लिए सहायता लागू की है. वहीं, Edge को इस सुविधा में दिलचस्पी दिखाने वाले लोगों से अच्छे सिग्नल मिले हैं. Safari ने एक इंजीनियर के सुझाए गए पांच साल के प्लान के ज़रिए, इसमें अपनी दिलचस्पी दिखाई थी.

उपयोगकर्ताओं को फिर से जोड़ने के लिए पुश नोटिफ़िकेशन

इसकी मदद से, ऐसे वेब ऐप्लिकेशन बनाए जा सकते हैं जिनके साथ उपयोगकर्ता, टैब के बाहर भी इंटरैक्ट कर सकते हैं. ब्राउज़र को बंद किया जा सकता है. साथ ही, आपके अनुभव से जुड़ने के लिए, उन्हें आपके वेब ऐप्लिकेशन का इस्तेमाल करने की ज़रूरत नहीं है. इस सुविधा के लिए, सर्विस वर्कर और वेब ऐप्लिकेशन मेनिफ़ेस्ट, दोनों की ज़रूरत होती है. यह सुविधा, पहले बताई गई कुछ सुविधाओं पर आधारित होती है.

Push API को Chrome में लागू किया गया है. इसे Firefox में डेवलप किया जा रहा है और Edge में इस पर विचार किया जा रहा है. Safari ने फ़िलहाल इस सुविधा को लागू करने के बारे में कोई सार्वजनिक जानकारी नहीं दी है.

Push Notifications on the Open Web, मैट गॉन्ट की ओर से पुश नोटिफ़िकेशन सेटअप करने के बारे में पूरी जानकारी देने वाली गाइड है. साथ ही, वेब की बुनियादी बातों पर पुश नोटिफ़िकेशन कोड लैब भी उपलब्ध है.

अगर आपको वीडियो देखना पसंद है, तो Chrome टीम के माइकल वैन आउवरकर्क का छह मिनट का वीडियो देखें. इसमें पुश नोटिफ़िकेशन के बारे में बताया गया है.

ऐडवांस सुविधाओं को जोड़ना

याद रखें कि आपके वेब ऐप्लिकेशन को देखने के लिए इस्तेमाल किए जा रहे ब्राउज़र के आधार पर, उपयोगकर्ता अनुभव के अलग-अलग लेवल हो सकते हैं. आपके पास हार्ड कैंडी शेल का कंट्रोल होता है.

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

Chrome में वन-शॉट बैकग्राउंड सिंक की सुविधा चालू कर दी गई है. जेक आर्चीबाल्ड ने अपने ऑफ़लाइन विकिपीडिया ऐप्लिकेशन और लेख में इस सुविधा को इस्तेमाल करने का तरीका बताया है. इसके लिए, उन्होंने एक वीडियो भी बनाया है. अगर आपको वेब ब्लूटूथ एपीआई को आज़माना है, तो फ़्रांसवा बोफ़ोर के पास वेब ब्लूटूथ के कई सैंपल भी उपलब्ध हैं.

फ़्रेमवर्क के साथ काम करने वाला

ऊपर बताए गए किसी भी सिद्धांत को किसी मौजूदा ऐप्लिकेशन या फ़्रेमवर्क पर लागू करने से आपको कोई नहीं रोक सकता. प्रोग्रेसिव वेब ऐप्लिकेशन बनाते समय, कुछ अन्य सिद्धांतों को ध्यान में रखना ज़रूरी है. इनमें RAIL उपयोगकर्ता-केंद्रित परफ़ॉर्मेंस मॉडल और FLIP पर आधारित ऐनिमेशन शामिल हैं.

मुझे उम्मीद है कि 2016 में, हमें प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, बॉयलरप्लेट और सीड प्रोजेक्ट की संख्या में बढ़ोतरी देखने को मिलेगी. ये प्रोजेक्ट, प्रोग्रेसिव वेब ऐप्लिकेशन के लिए मुख्य सुविधा के तौर पर काम करेंगे. हालांकि, तब तक अपने ऐप्लिकेशन में इन सुविधाओं को जोड़ना बहुत मुश्किल नहीं है. मुझे लगता है कि इसके लिए कोशिश करना फ़ायदेमंद है.

आर्किटेक्चर

प्रोग्रेसिव वेब ऐप्लिकेशन मॉडल में, "ऑल-इन" के अलग-अलग लेवल होते हैं. हालांकि, आम तौर पर इन्हें ऐप्लिकेशन शेल के हिसाब से डिज़ाइन किया जाता है. यह ज़रूरी नहीं है, लेकिन इसके कई फ़ायदे हैं.

ऐप्लिकेशन शेल आर्किटेक्चर, आपके ऐप्लिकेशन शेल (यूज़र इंटरफ़ेस) को कैश मेमोरी में सेव करने के लिए बढ़ावा देता है, ताकि यह ऑफ़लाइन काम कर सके और JavaScript का इस्तेमाल करके अपना कॉन्टेंट दिखा सके. बार-बार विज़िट करने पर, इससे आपको नेटवर्क के बिना भी स्क्रीन पर काम के पिक्सल बहुत तेज़ी से मिलते हैं. भले ही, आपका कॉन्टेंट आखिर में वहीं से आता हो. इससे परफ़ॉर्मेंस में काफ़ी सुधार होता है.

जेरेमी कीथ ने हाल ही में टिप्पणी की है कि इस तरह के मॉडल में, सर्वर-साइड रेंडरिंग को फ़ॉलबैक के तौर पर नहीं देखा जाना चाहिए. इसके बजाय, क्लाइंट-साइड रेंडरिंग को बेहतर बनाने के तौर पर देखा जाना चाहिए. यह सुझाव सही है.

ऐप्लिकेशन शेल मॉडल में, सर्वर-साइड रेंडरिंग का ज़्यादा से ज़्यादा इस्तेमाल किया जाना चाहिए. साथ ही, क्लाइंट-साइड प्रोग्रेसिव रेंडरिंग का इस्तेमाल, बेहतर अनुभव देने के लिए किया जाना चाहिए. ठीक उसी तरह जिस तरह हम सर्विस वर्कर के काम करने पर, अनुभव को "बेहतर" बनाते हैं. इस समस्या को हल करने के कई तरीके हैं.

हमारा सुझाव है कि आप आर्किटेक्चर के बारे में हमारा लेख पढ़ें. साथ ही, यह आकलन करें कि आपके ऐप्लिकेशन और स्टैक पर, इसी तरह के सिद्धांतों को सबसे सही तरीके से कैसे लागू किया जा सकता है.

शुरू करने के लिए बॉयलरप्लेट

ऐप्लिकेशन शेल

GitHub पर देखें

app-shell रिपॉज़िटरी में, ऐप्लिकेशन शेल आर्किटेक्चर को लागू करने का तरीका करीब-करीब पूरा दिया गया है. इसका बैकएंड Express.js में और फ़्रंट-एंड ES2015 में लिखा गया है.

इसमें मॉडल के क्लाइंट और सर्वर-साइड, दोनों हिस्से शामिल हैं. साथ ही, इसमें काफ़ी कुछ हो रहा है. इसलिए, कोड बेस को समझने में कुछ समय लगेगा. फ़िलहाल, प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में जानने के लिए यह सबसे सही जगह है. इस प्रोजेक्ट के लिए, Docs हमारा अगला फ़ोकस होगा.

Polymer स्टार्टर किट

GitHub पर देखें

Polymer वेब ऐप्लिकेशन के लिए आधिकारिक शुरुआती पॉइंट, प्रोग्रेसिव वेब ऐप्लिकेशन की इन सुविधाओं के साथ काम करता है:

• वेब ऐप्लिकेशन मेनिफ़ेस्ट
• Android के लिए Chrome की स्प्लैशस्क्रीन
• प्लैटिनम एसडब्ल्यू एलिमेंट की मदद से, सर्विस वर्कर की ऑफ़लाइन कैश मेमोरी
• प्लैटिनम पुश एलिमेंट के साथ पुश नोटिफ़िकेशन (मैन्युअल सेटअप ज़रूरी है)

पीएसके के मौजूदा वर्शन में, परफ़ॉर्मेंस के कुछ बेहतर पैटर्न के लिए सहायता उपलब्ध नहीं है. जैसे, ऐप्लिकेशन शेल मॉडल, एसिंक लोडिंग. ये पैटर्न, कुछ प्रोग्रेसिव पॉलीमर वेब ऐप्लिकेशन में मिलते हैं.

हम 2016 में इन पैटर्न को पीएसके में शामिल करने की कोशिश करेंगे. हालांकि, इससे जुड़े शुरुआती एक्सपेरिमेंट, रॉब डॉडसन के Polymer Zuperkulblog ऐप्लिकेशन और एरिक बिडेलमैन की बेहतरीन Polymer Perf Patterns बातचीत में देखे जा सकते हैं.

Web Starter Kit

GitHub पर देखें

नए वैनिला प्रोजेक्ट के लिए, हमारे सुझाए गए शुरुआती पॉइंट में ये प्रोग्रेसिव वेब ऐप्लिकेशन सुविधाएं शामिल हैं:

• वेब ऐप्लिकेशन मेनिफ़ेस्ट
• Android के लिए Chrome की स्प्लैशस्क्रीन
• sw-precache की मदद से, सर्विस-वर्कर प्री-कैशिंग की सुविधा

अगर आपको वैनिला JS/ES2015 के साथ काम करना पसंद है और Polymer का इस्तेमाल नहीं किया जा सकता, तो Web Starter Kit आपके लिए रेफ़रंस पॉइंट के तौर पर काम आ सकती है. इससे कोड स्निपेट को फिर से इस्तेमाल किया जा सकता है या कॉपी किया जा सकता है.

फ़्रेमवर्क के साथ और बिना फ़्रेमवर्क वाले प्रोग्रेसिव वेब ऐप्लिकेशन

कम्यूनिटी के सदस्यों ने पहले से ही कई ओपन-सोर्स प्रोग्रेसिव वेब ऐप्लिकेशन बनाए हैं. इनमें से कुछ ऐप्लिकेशन, JS लाइब्रेरी और फ़्रेमवर्क के साथ बनाए गए हैं और कुछ इनके बिना बनाए गए हैं. अगर आपको प्रेरणा चाहिए, तो यहां दी गई रिपॉज़िटरी आपके लिए मददगार साबित हो सकती हैं. ये ऐप्लिकेशन भी काफ़ी अच्छे हैं.

वनीला JavaScript

• पॉल लुइस का Voice Memos, app-shell (write-up) जैसे आर्किटेक्चर का इस्तेमाल करके बनाया गया है
• ऑफ़लाइन विकिपीडिया, जेक आर्किबाल्ड (वीडियो)
• पॉल किनलन का Air Horner
• पॉल लुईस का Guitar Tuner (write-up)

Polymer

• रॉब डॉडसन का Zuperkulblog (स्लाइड)

React

• iFixit, जेफ़ पॉस्निक ने बनाया है - यह ऐप्लिकेशन शेल को कैश मेमोरी में सेव करने के लिए, sw-precache का इस्तेमाल करता है (स्लाइड)

वर्चुअल-DOM

• नोलन लॉसन का Pokedex - यह एक बेहतरीन प्रोग्रेसिव वेब ऐप्लिकेशन है. इसमें "वेब वर्कर में सब कुछ करें" तरीका इस्तेमाल किया गया है, ताकि प्रोग्रेसिव रेंडरिंग में मदद मिल सके. (write-up)

Angular.js

• केनेथ ऑचेनबर्ग का Timey.in - यह भी रिसॉर्स को पहले से कैश मेमोरी में सेव करने के लिए, sw-precache का इस्तेमाल करता है

क्लोज़िंग नोट

जैसा कि बताया गया है, प्रोग्रेसिव वेब ऐप्लिकेशन अभी शुरुआती दौर में हैं. हालांकि, इनके पीछे की तकनीकों को आज़माने और यह देखने का यह एक शानदार समय है कि वे आपके वेब ऐप्लिकेशन पर कितनी अच्छी तरह लागू हो सकते हैं.

पॉल किनलन फ़िलहाल, प्रोग्रेसिव वेब ऐप्लिकेशन के लिए वेब की बुनियादी बातों से जुड़े दिशा-निर्देशों की योजना बना रहे हैं. अगर आपको उन विषयों के बारे में जानकारी चाहिए जिन्हें कवर किया जाना चाहिए, तो कृपया थ्रेड पर टिप्पणी करें.

इस बारे में और पढ़ें

• प्रोग्रेसिव वेब ऐप्लिकेशन: टैब से बाहर निकलकर, अपनी पहचान बनाए रखना
• Why Progressive Web Apps Are The Future Of Web Development
• प्रोग्रेसिव वेब ऐप्लिकेशन: प्राइमटाइम के लिए तैयार
• ServiceWorker की मदद से प्रोग्रेसिव ऐप्लिकेशन बनाना
• प्रोग्रेसिव वेब ऐप्लिकेशन ही भविष्य हैं
• प्रोग्रेसिव वेब ऐप्लिकेशन: मोबाइल पर ऐप्लिकेशन इस्तेमाल करने का नया तरीका
• पेश है Pokedex.org: Pokémon के प्रशंसकों के लिए एक प्रोग्रेसिव वेब ऐप्लिकेशन
• Chrome Developer Summit Recap: प्रोग्रेसिव वेब ऐप्लिकेशन