हाल ही में, प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में काफ़ी चर्चा हुई है. ये अब भी नए मॉडल हैं, लेकिन इनके सिद्धांतों से vanilla JS, React, Polymer, Angular या किसी दूसरे फ़्रेमवर्क की मदद से बनाए गए ऐप्लिकेशन को बेहतर बनाने में मदद मिल सकती है. इस पोस्ट में, मैं आपको कुछ ऐसे विकल्पों के बारे में बताऊँगी और कुछ ऐप्लिकेशन के बारे में बताऊँगी, ताकि आप अपने प्रोग्रेसिव वेब ऐप्लिकेशन का इस्तेमाल शुरू कर सकें.
प्रोग्रेसिव वेब ऐप्लिकेशन क्या है?
यह याद रखना ज़रूरी है कि प्रोग्रेसिव वेब ऐप्लिकेशन हर जगह काम करते हैं. हालांकि, मॉडर्न ब्राउज़र में ये ऐप्लिकेशन ज़्यादा चार्ज होते हैं. प्रोग्रेस के हिसाब से बेहतर बनाने की सुविधा, इस मॉडल का आधार है.
ऐरन गुस्ताफ़सन ने प्रोग्रेसिव एन्हैंसमेंट की तुलना, पीनट M&M से की. मूंगफली आपकी सामग्री है, चॉकलेट कोटिंग आपकी प्रज़ेंटेशन लेयर है और आपका JavaScript हार्ड कैंडी शेल है. यह लेयर अलग-अलग रंग में हो सकती है और इसका अनुभव भी अलग-अलग हो सकता है. यह इस बात पर निर्भर करता है कि इसका इस्तेमाल करने वाले ब्राउज़र की क्षमता क्या है.
कैंडी शेल के बारे में सोचें, जहां प्रोग्रेसिव वेब ऐप्लिकेशन की कई सुविधाएं मौजूद हैं. ये ऐसे अनुभव हैं जिनमें वेब की बेहतरीन सुविधाओं के साथ-साथ, ऐप्लिकेशन की सुविधाएं भी शामिल हैं. ये ऐप्लिकेशन, ब्राउज़र टैब पर पहली बार आने वाले उपयोगकर्ताओं के लिए काम के होते हैं. इन्हें इंस्टॉल करने की ज़रूरत नहीं होती.
जब उपयोगकर्ता बार-बार इस्तेमाल करके इन ऐप्लिकेशन के साथ संबंध बनाता है, तो वे ज़्यादा आसान काम करते हैं - धीमे इंटरनेट कनेक्शन (सर्विस वर्कर की वजह से) पर बहुत तेज़ी से लोड होते हैं, सही पुश नोटिफ़िकेशन भेजते हैं और उपयोगकर्ता की होम स्क्रीन पर प्रथम-वर्ग का आइकॉन देते हैं जो उन्हें फ़ुलस्क्रीन ऐप्लिकेशन अनुभव के रूप में लोड कर सकता है. वे स्मार्ट वेब ऐप्लिकेशन इंस्टॉल करने वाले बैनर का भी फ़ायदा उठा सकते हैं.
प्रोग्रेसिव वेब ऐप्लिकेशन
- प्रोग्रेसिव - ब्राउज़र की पसंद पर ध्यान दिए बिना हर उपयोगकर्ता के लिए काम करें. इसे मुख्य टेनेंट के तौर पर प्रोग्रेसिव एन्हैंसमेंट की मदद से बनाया गया है.
- रिस्पॉन्सिव (स्क्रीन के हिसाब से आकार बदलने वाले) - किसी भी डिवाइस के नाप या आकार, डेस्कटॉप, मोबाइल, टैबलेट या आगे जो भी हो, उसमें फ़िट करें.
- कनेक्टिविटी इंडिपेंडेंट - इसे ऑफ़लाइन या खराब क्वालिटी वाले नेटवर्क पर काम करने के लिए, सर्विस वर्कर के साथ बेहतर बनाया गया है.
- ऐप्लिकेशन के जैसा - ऐप्लिकेशन की स्टाइल वाले नेविगेशन और इंटरैक्शन उपलब्ध कराने के लिए ऐप्लिकेशन शेल मॉडल का इस्तेमाल करें.
- फ़्रेश - सर्विस वर्कर को अपडेट करने की प्रक्रिया की वजह से हमेशा अप-टू-डेट रहता है.
- सुरक्षित - इसे TLS के ज़रिए दिखाया जाता है, ताकि जासूसी को रोका जा सके और यह पक्का किया जा सके कि कॉन्टेंट के साथ छेड़छाड़ न की गई हो.
- खोजे जा सकने वाले - W3C मेनिफ़ेस्ट और सर्विस वर्कर रजिस्ट्रेशन के दायरे की वजह से, इन्हें “ऐप्लिकेशन” के तौर पर पहचाना जा सकता है, ताकि सर्च इंजन इन्हें आसानी से ढूंढ सकें.
- फिर से जोड़ा जा सकता है - पुश नोटिफ़िकेशन जैसी सुविधाओं की मदद से, ग्राहकों को फिर से जोड़ने की प्रोसेस को आसान बनाएं.
- इंस्टॉल किया जा सकता है - इससे उपयोगकर्ताओं को किसी ऐप स्टोर के झंझट के बिना, अपनी होम स्क्रीन पर सबसे काम के ऐप्लिकेशन “रखने” की सुविधा मिलती है.
- लिंक किया जा सकता है - यूआरएल के ज़रिए आसानी से शेयर करें. इसके लिए, ज़्यादा जटिल इंस्टॉलेशन की ज़रूरत नहीं होती.
प्रोग्रेसिव वेब ऐप्लिकेशन, Android के लिए Chrome में खास नहीं हैं. नीचे हम देखते हैं कि Android के लिए Firefox (बीटा) में Pokedex प्रोग्रेसिव वेब ऐप्लिकेशन काम कर रहा है. इसमें होम स्क्रीन पर पहले से जोड़ें और सर्विस वर्कर को कैश मेमोरी में सेव करने की सुविधाएं ठीक से काम कर रही हैं.
इस मॉडल के "प्रोग्रेसिव" स्टेटस का एक अच्छा पहलू यह है कि सुविधाओं को धीरे-धीरे अनलॉक किया जा सकता है, क्योंकि ब्राउज़र वेंडर उन्हें बेहतर सहायता देते हैं. Pokedex जैसे प्रोग्रेसिव वेब ऐप्लिकेशन, Android पर भी Opera में अच्छे से काम करते हैं और इन्हें लागू करने में कुछ ध्यान देने लायक अंतर भी हैं:
प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में ज़्यादा जानकारी पाने के लिए, एलेक्स रसेल की इस बारे में जानकारी देने वाली मूल ब्लॉग पोस्ट पढ़ें. पॉल किनलन ने भी प्रोग्रेसिव वेब ऐप्लिकेशन के लिए एक बहुत ही काम का स्टैक ओवरफ़्लो टैग शुरू किया है.
सिद्धांत
वेब ऐप्लिकेशन मेनिफ़ेस्ट
मेनिफ़ेस्ट की मदद से आपका वेब ऐप्लिकेशन, उपयोगकर्ता की होम स्क्रीन पर मूल रूप से मौजूद रहता है. इससे ऐप्लिकेशन को फ़ुल-स्क्रीन मोड में लॉन्च किया जा सकता है (यूआरएल बार के बिना). इस डेटा का इस्तेमाल, ऊपर बताई गई स्प्लैश स्क्रीन और होम स्क्रीन आइकॉन के लिए, साइज़ और सघनता के हिसाब से आइकॉन का सेट तय करने के लिए भी किया जाता है.
मेनिफ़ेस्ट फ़ाइल का सैंपल, वेब स्टार्टर किट और Google Chrome के सैंपल में देखा जा सकता है. ब्रूस लॉसन ने एक मेनिफ़ेस्ट जनरेटर लिखा और मोनीर लमोरी ने एक आसान वेब मेनिफ़ेस्ट वैलिडेटर भी लिखा.
अपने निजी प्रोजेक्ट में, मैं वेब ऐप्लिकेशन मेनिफ़ेस्ट और iOS, डेस्कटॉप वगैरह पर इस्तेमाल के लिए, सही साइज़ के आइकॉन जनरेट करने के लिए realfavicongenerator पर भरोसा करती हूं. फ़ेविकॉन नोड मॉड्यूल भी, बिल्ड प्रोसेस के दौरान यही आउटपुट हासिल कर सकता है.
Chromium पर आधारित ब्राउज़र (Chrome, Opera वगैरह) फ़िलहाल वेब ऐप्लिकेशन मेनिफ़ेस्ट को काम करते हैं. फ़िलहाल, Firefox तेज़ी से इसके लिए सहायता देता है और Edge को सूची में शामिल किया गया है, यह ज़रूरी है. WebKit/Safari ने अभी तक इस सुविधा को लागू करने के अपने इंटेंट के बारे में सार्वजनिक सिग्नल पोस्ट नहीं किए हैं.
ज़्यादा जानकारी के लिए, वेब की बुनियादी बातों पर, Android के लिए Chrome में वेब ऐप्लिकेशन मेनिफ़ेस्ट के साथ इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन पढ़ें.
"होम स्क्रीन पर जोड़ें" बैनर
Android पर Chrome कुछ समय से आपकी साइट को होम स्क्रीन पर जोड़ सकता है. हालांकि, नए वर्शन में नेटिव वेब ऐप्लिकेशन इंस्टॉल बैनर का इस्तेमाल करके, साइटों को जोड़ने का सुझाव पहले ही दिया जा सकता है.
आपके ऐप्लिकेशन को इंस्टॉल करने का अनुरोध दिखाने के लिए, इन निर्देशों का पालन करना ज़रूरी है:
- आपका एक मान्य वेब ऐप्लिकेशन मेनिफ़ेस्ट होना चाहिए
- एचटीटीपीएस पर दिखाया जाना चाहिए (मुफ़्त सर्टिफ़िकेट के लिए letsencrypt देखें)
- आपके पास मान्य सर्विस वर्कर रजिस्टर होना चाहिए
- दो बार विज़िट किया गया हो और विज़िट के बीच में कम से कम पांच मिनट हों
ऐप्लिकेशन इंस्टॉल बैनर के कई सैंपल उपलब्ध हैं. इनमें बेसिक बैनर को कवर किया जाता है. साथ ही, इनमें मिलते-जुलते ऐप्लिकेशन दिखाने जैसे ज़्यादा मुश्किल इस्तेमाल के उदाहरण दिए जाते हैं.
ऑफ़लाइन कैशिंग के लिए सर्विस वर्कर
सर्विस वर्कर एक ऐसी स्क्रिप्ट है जो आपके वेब पेज से अलग, बैकग्राउंड में चलती है. यह इवेंट के जवाब देता है. इनमें उन पेजों से नेटवर्क के अनुरोध भी शामिल हैं जिन्हें यह दिखाता है. सर्विस वर्कर की अवधि जान-बूझकर कम होती है.
कोई इवेंट मिलने पर, यह चालू हो जाता है. यह सिर्फ़ तब तक चलता है, जब तक उसे प्रोसेस करने की ज़रूरत होती है. सर्विस वर्कर, आपको संसाधनों को कैश करने के लिए कैश एपीआई का इस्तेमाल करने की अनुमति देता है. साथ ही, इसका इस्तेमाल उपयोगकर्ताओं को ऑफ़लाइन अनुभव देने के लिए किया जा सकता है.
सर्विस वर्कर, ऑफ़लाइन कैशिंग के लिए शक्तिशाली होते हैं, लेकिन वे आपकी साइट या वेब ऐप्लिकेशन पर बार-बार होने वाली विज़िट के लिए तुरंत लोड होने के रूप में अहम परफ़ॉर्मेंस हासिल करने की सुविधा भी देते हैं. अपने ऐप्लिकेशन शेल को कैश मेमोरी में सेव किया जा सकता है, ताकि यह ऑफ़लाइन काम करे और JavaScript का इस्तेमाल करके इसके कॉन्टेंट को पॉप्युलेट करे.
Google Chrome सैंपल पर सर्विस वर्कर सैंपल का एक व्यापक सेट उपलब्ध है. जेक आर्चिबाल्ड की ऑफ़लाइन कुकबुक ज़रूर पढ़ें. अगर सर्विस वर्कर के लिए नई है, तो मेरा सुझाव है कि आप पॉल किनलन का आपका पहला ऑफ़लाइन वेब ऐप्लिकेशन इस्तेमाल करने के बारे में कदम-दर-कदम निर्देश दें.
हमारी टीम कई सर्विस वर्कर हेल्पर यूटिलिटी और निर्माण टूल का रखरखाव भी करती है. ये टूल, सर्विस वर्कर सेटअप करने के दौरान लगने वाले खर्च को कम करने में काम आते हैं. ये सर्विस वर्कर लाइब्रेरी में मौजूद हैं. दो मुख्य नतीजे हैं:
- sw-precache: एक बिल्ड-टाइम टूल, जो आपके वेब ऐप्लिकेशन शेल को प्री-कैश करने के लिए उपयोगी सर्विस वर्कर स्क्रिप्ट जनरेट करता है
- sw-toolbox: यह लाइब्रेरी, कम इस्तेमाल होने वाले संसाधनों के लिए रनटाइम कैशिंग की सुविधा देती है
जेफ़ पॉस्निक ने एसडब्ल्यू-प्रीकैश पर एक क्विक प्राइमर लिखा है. इसमें उन्होंने ऑफ़लाइन-फ़र्स्ट, फ़ास्ट, और sw-प्रीकैशे मॉड्यूल के साथ-साथ उसी टूल पर एक कोडलैब भी तैयार किया है जो आपके काम का हो सकता है.
Chrome, Opera, और Firefox में EDGE के साथ काम करने वाले सभी तरह के सर्विस वर्कर के लिए सहायता उपलब्ध है. उनके पास इस सुविधा में दिलचस्पी से जुड़े पब्लिक सिग्नल भी हैं. Safari ने एक इंजीनियर की ओर से तय की गई पांच साल की योजना के ज़रिए इसकी दिलचस्पी के बारे में बहुत कम शब्दों में बताया था.
उपयोगकर्ताओं को फिर से जोड़ने के लक्ष्य के लिए पुश नोटिफ़िकेशन
असरदार तरीके से, आपके पास ऐसे वेब ऐप्लिकेशन बनाने का विकल्प है जिनसे उपयोगकर्ता टैब के बाहर से भी इस्तेमाल कर सकें. ब्राउज़र को बंद किया जा सकता है. साथ ही, आपके अनुभव से जुड़ने के लिए, उन्हें आपके वेब ऐप्लिकेशन का लगातार इस्तेमाल करने की ज़रूरत नहीं होती. इस सुविधा के लिए सर्विस वर्कर और वेब ऐप्लिकेशन मेनिफ़ेस्ट, दोनों ज़रूरी हैं. ऐसा उन सुविधाओं के आधार पर किया जाता है जिनके बारे में पहले जानकारी दी गई थी.
Push API को Chrome में लागू किया जाता है. इसे Firefox में डेवलपमेंट में और Edge में लागू किया जा रहा है. Safari की ओर से इस सुविधा को लागू करने के उनके इंटेंट के बारे में कोई सार्वजनिक सिग्नल नहीं है.
ओपन वेब पर पुश नोटिफ़िकेशन, मैट गैंट के पुश सेट अप के बारे में जानकारी देता है. साथ ही, वेब की बुनियादी बातों पर भी, पुश नोटिफ़िकेशन कोडलैब उपलब्ध है.
अगर आपको वीडियो में ज़्यादा दिलचस्पी है, तो Chrome टीम के माइकल वैन ओवर्कर्क ने भी पुश के लिए छह मिनट का शुरुआती हिस्सा दिया है.
बेहतर सुविधाओं के लिए लेयर बनाना
याद रखें, आपका वेब ऐप्लिकेशन देखने के लिए इस्तेमाल किए जा रहे ब्राउज़र के आधार पर, आपके उपयोगकर्ता अनुभव को लेकर मिठास के अलग-अलग लेवल हो सकते हैं. हार्ड कैंडी शेल का कंट्रोल आपके पास ही रहता है.
वेब प्लैटफ़ॉर्म पर आने वाली अतिरिक्त सुविधाओं, जैसे कि बैकग्राउंड सिंक्रोनाइज़ेशन (आपका वेब ऐप्लिकेशन बंद होने पर भी सर्वर के साथ डेटा सिंक के लिए) और वेब ब्लूटूथ (आपके वेब ऐप्लिकेशन से ब्लूटूथ डिवाइसों से बात करने के लिए) जैसी सुविधाओं को भी इस तरीके से आपके प्रोग्रेसिव वेब ऐप्लिकेशन में लेयर किया जा सकता है.
Chrome में एक बार बैकग्राउंड सिंक की सुविधा को चालू कर दिया गया है. जेक आर्चिबाल्ड ने अपने ऑफ़लाइन विकिपीडिया ऐप्लिकेशन का एक वीडियो और लेख दिखाया है, जिसमें यह दिखाया गया है कि यह किस तरह काम करता है. अगर Francois Beaufort को एपीआई आज़माने में दिलचस्पी है, तो उसके पास कई वेब ब्लूटूथ सैंपल भी उपलब्ध हैं.
फ़्रेमवर्क के हिसाब से सही
वास्तव में आपको अपने बनाए जा रहे मौजूदा ऐप्लिकेशन या फ़्रेमवर्क पर ऊपर दिए गए किसी भी सिद्धांत को लागू करने से कोई नहीं रोक सकता. प्रोग्रेसिव वेब ऐप्लिकेशन बनाते समय कुछ और सिद्धांतों को भी ध्यान में रखना ज़रूरी है. जैसे, RAIL उपयोगकर्ता पर आधारित परफ़ॉर्मेंस मॉडल और FLIP आधारित ऐनिमेशन.
मुझे उम्मीद है कि साल 2016 के दौरान, हम प्रोग्रेसिव वेब ऐप्लिकेशन की मुख्य सुविधा के रूप में काम करने के लिए, ऑर्गैनिक तरीके से बेकिंग करने वाले बॉयलरप्लेट और सीड प्रोजेक्ट की संख्या में बढ़ोतरी देखेंगे. तब तक, अपने ऐप्स में इन सुविधाओं को जोड़ने में बाधा बहुत ज़्यादा नहीं है और IMHO काफ़ी है, काफ़ी मेहनत करके.
आर्किटेक्चर
प्रोग्रेसिव वेब ऐप्लिकेशन मॉडल का "ऑल-इन" मॉडल कई तरह से काम करता है. हालांकि, एक सामान्य तरीका यह है कि उन्हें ऐप्लिकेशन शेल के हिसाब से डिज़ाइन किया जाए. यह ज़रूरी नहीं है, लेकिन इसके कई फ़ायदे हैं.
ऐप्लिकेशन शेल आर्किटेक्चर आपके ऐप्लिकेशन शेल (यूज़र इंटरफ़ेस) को कैश मेमोरी में सेव करने का बढ़ावा देता है, ताकि यह ऑफ़लाइन काम करे और JavaScript का इस्तेमाल करके इसके कॉन्टेंट को पॉप्युलेट करे. वेबसाइट पर बार-बार आने पर, इसकी मदद से नेटवर्क के बिना भी, आपकी स्क्रीन पर काम के पिक्सल बहुत तेज़ी से दिख सकते हैं. भले ही, आपका कॉन्टेंट वहां से आया हो. इससे प्रदर्शन में काफ़ी बढ़ोतरी होती है.
जेरेमी कीथ ने हाल ही में टिप्पणी की है कि इस तरह के मॉडल में, शायद सर्वर-साइड रेंडरिंग को फ़ॉलबैक के तौर पर नहीं देखा जाना चाहिए. हालांकि, क्लाइंट-साइड रेंडरिंग को बेहतर बनाने के तरीके के तौर पर देखना चाहिए. यह फ़ेयर सुझाव है.
ऐप्लिकेशन शेल मॉडल में, सर्वर-साइड रेंडरिंग का इस्तेमाल ज़्यादा से ज़्यादा किया जाना चाहिए. साथ ही, क्लाइंट-साइड प्रोग्रेसिव रेंडरिंग को उसी तरह इस्तेमाल करना चाहिए जिस तरह हम सर्विस वर्कर के साथ काम करने पर अनुभव को "बेहतर" बनाते हैं. इसके कई तरीके हैं.
हमारा सुझाव है कि आर्किटेक्चर पर हमारे लेख पढ़ें. साथ ही, यह आकलन करें कि आपके ऐप्लिकेशन और स्टैक पर मिलते-जुलते सिद्धांतों को किस तरह सबसे सही तरीके से लागू किया जा सकता है.
बॉयलरप्लेट शुरू करना
ऐप्लिकेशन शेल
app-shell रिपॉज़िटरी में, ऐप्लिकेशन शेल आर्किटेक्चर को करीब-करीब पूरी तरह लागू किया जाता है. इसका बैकएंड, Express.js में लिखा हुआ है और ES2015 में एक फ़्रंट-एंड लिखा है.
यह देखते हुए कि इसमें मॉडल के क्लाइंट और सर्वर-साइड, दोनों हिस्से शामिल हैं और वहां पर बहुत कुछ चल रहा है, इसलिए कोड बेस के बारे में अच्छे से जानने में कुछ समय लगेगा. अगर ऐसा नहीं है, तो अभी यह हमारा सबसे बेहतर प्रोग्रेसिव वेब ऐप्लिकेशन है. इस प्रोजेक्ट में हमारा अगला फ़ोकस Docs पर होगा.
पॉलिमर स्टार्टर किट
Polymer वेब ऐप्लिकेशन के लिए आधिकारिक शुरुआत की जगह पर ये सुविधाएं काम करती हैं:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- Android के लिए Chrome स्प्लैशस्क्रीन
- प्लैटिनम SW एलिमेंट के साथ सर्विस वर्कर को ऑफ़लाइन कैश मेमोरी में सेव करना
- प्लैटिनम पुश एलिमेंट के साथ पुश नोटिफ़िकेशन (मैन्युअल सेटअप ज़रूरी है)
PSK के मौजूदा वर्शन में, कुछ प्रोग्रेसिव पॉलीमर वेब ऐप्लिकेशन में मिलने वाले कुछ बेहतर परफ़ॉर्मेंस पैटर्न (जैसे, ऐप्लिकेशन शेल मॉडल, एसिंक्रोनस लोडिंग) ठीक से काम नहीं करते.
हमारा लक्ष्य 2016 में इन पैटर्न को PSK में शामिल करने की कोशिश करना है, लेकिन इससे जुड़े शुरुआती प्रयोग, Rob Dodson के Polymer Zuperkulblog ऐप्लिकेशन और एरिक बिडेलमैन के शानदार Polymer Perf Patterns ऐप्लिकेशन में देखे जा सकते हैं.
वेब स्टार्टर किट
नए वनीला प्रोजेक्ट की शुरुआत के लिए, हमने जो शुरुआती पॉइंट दिए हैं उनमें प्रोग्रेसिव वेब ऐप्लिकेशन की ये सुविधाएं शामिल हैं:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- Android के लिए Chrome स्प्लैशस्क्रीन
- सर्विस वर्कर, sw-precache का इस्तेमाल करके प्री-कैशिंग करता है
अगर आपकी प्राथमिकता vanilla JS/ES2015 के साथ काम करना है और आप Polymer का इस्तेमाल नहीं कर पा रहे हैं, तो Web Starter Kit आपके लिए एक रेफ़रंस पॉइंट के तौर पर काम का साबित हो सकता है. इस पॉइंट से कोड स्निपेट चुराए जा सकते हैं या दोबारा इस्तेमाल किया जा सकता है.
फ़्रेमवर्क के साथ और उसके बिना प्रोग्रेसिव वेब ऐप्लिकेशन
समुदाय के सदस्यों ने JS लाइब्रेरी और फ़्रेमवर्क के साथ और उनके बिना, पहले ही कई ओपन सोर्स प्रोग्रेसिव वेब ऐप्लिकेशन बनाए हैं. अगर आपको प्रेरणा चाहिए, तो यहां दिया गया डेटा संग्रह, रेफ़रंस के तौर पर काम आ सकता है. वे बहुत ही अच्छे ऐप्लिकेशन भी हैं.
वैनिला JavaScript
- पॉल लुईस का वॉइस मेमो तैयार किया गया है. इसे
app-shellसे मिलती-जुलती वास्तुकला का इस्तेमाल करके बनाया गया है (राइट-अप) - जेक आर्किबाल्ड का ऑफ़लाइन Wikipedia (वीडियो)
- पॉल किनलान की एयर हॉर्नर
- पॉल लुईस का गिटार ट्यूनर (राइट-अप)
Polymer
- रॉब डॉडसन का Zuperkulblog (slides)
React
- जेफ़ पॉस्निक की बनाई हुई iFixit - ऐप्लिकेशन शेल कैशिंग (स्लाइड) के लिए
sw-precacheका इस्तेमाल करती है
वर्चुअल-DOM
- नोलन लॉसन का Pokedex - प्रोग्रेसिव रेंडरिंग में मदद के लिए "वेब वर्कर में हर चीज़ करें" का इस्तेमाल करने वाला एक बेहतरीन प्रोग्रेसिव वेब ऐप्लिकेशन है. (राइट-अप)
Angular.js
- केनेथ ऑचेनबर्ग की लिखी हुई Timey.in - संसाधनों को पहले से कैश करने के लिए भी
sw-precacheका इस्तेमाल करती है
नोट बंद करना
जैसा कि बताया गया है, प्रोग्रेसिव वेब ऐप्लिकेशन अभी अपने शुरुआती दौर में हैं. हालांकि, उनके पीछे की रणनीति को समझने और यह देखने का यह एक रोमांचक समय है कि वे आपके वेब ऐप्लिकेशन पर कितनी अच्छी तरह से काम कर सकते हैं.
पॉल किनलन फ़िलहाल, प्रोग्रेसिव वेब ऐप्लिकेशन के लिए वेब की बुनियादी बातों के दिशा-निर्देशों की प्लानिंग कर रहे हैं. अगर आपके पास ऐसे विषयों के बारे में इनपुट है जिन्हें आपको शामिल करना है, तो कृपया थ्रेड पर टिप्पणी करें.
इसके बारे में और पढ़ें
- प्रोग्रेसिव वेब ऐप्लिकेशन: जानकारी खोए बिना टैब से बचना
- प्रोग्रेसिव वेब ऐप्लिकेशन, वेब डेवलपमेंट का भविष्य क्यों हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: प्राइमटाइम के लिए तैयार
- ServiceWorker की मदद से प्रोग्रेसिव ऐप्लिकेशन बनाने का तरीका
- प्रोग्रेसिव वेब ऐप्लिकेशन, आपके आने वाले समय के लिए फ़ायदेमंद हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: मोबाइल इस्तेमाल करने का नया तरीका
- पेश है Pokedex.org: पोकेमॉन के चाहने वालों के लिए एक प्रोग्रेसिव वेब ऐप्लिकेशन
- Chrome डेवलपर समिट का Recap: प्रोग्रेसिव वेब ऐप्लिकेशन