हाल ही में, प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में काफ़ी चर्चा हुई है. ये मॉडल अब भी बाकी मॉडल हैं, लेकिन इनके सिद्धांतों से वनीला JS, React, Polymer, Angular या किसी भी दूसरे फ़्रेमवर्क के साथ बनाए गए ऐप्लिकेशन को समान रूप से बेहतर बनाने में मदद मिल सकती है. इस पोस्ट में, हम आपको कुछ विकल्पों और रेफ़रंस ऐप्लिकेशन के बारे में जानकारी देंगे. इनसे आपको आज के दिन अपने प्रोग्रेसिव वेब ऐप्लिकेशन का इस्तेमाल शुरू करने में मदद मिलेगी.
प्रोग्रेसिव वेब ऐप्लिकेशन क्या होता है?
यह याद रखना ज़रूरी है कि प्रोग्रेसिव वेब ऐप्लिकेशन हर जगह काम करते हैं, लेकिन आधुनिक ब्राउज़र में ये ज़्यादा चार्ज होते हैं. प्रोग्रेसिव एन्हैंसमेंट, इस मॉडल का आधार है.
ऐरन गुस्ताफ़सन ने प्रोग्रेसिव एन्हैंसमेंट की तुलना मूंगफली वाली M&M से की है. मूंगफली आपकी सामग्री है, चॉकलेट कोटिंग आपकी प्रस्तुतिकरण परत है और आपकी JavaScript हार्ड कैंडी शेल है. इस लेयर का रंग अलग-अलग हो सकता है और इसका इस्तेमाल करने वाले ब्राउज़र की क्षमताओं के आधार पर, इसका अनुभव भी अलग-अलग हो सकता है.
कैंडी शेल को ऐसे मानें कि जहां प्रोग्रेसिव वेब ऐप्लिकेशन की कई सुविधाएं मौजूद हो सकती हैं. ये ऐसे अनुभव हैं जो वेब पर मौजूद और सबसे अच्छे ऐप्लिकेशन का मिला-जुला रूप पेश करते हैं. ये एक्सटेंशन, ब्राउज़र टैब में पहली बार आने वाले उपयोगकर्ताओं के लिए काम के हैं. इन्हें इंस्टॉल करने की ज़रूरत नहीं है.
जब उपयोगकर्ता बार-बार इन ऐप्लिकेशन के साथ संबंध बनाते हैं, तो वे कैंडी शेल और भी शानदार बनाते हैं - धीमे नेटवर्क कनेक्शन पर बहुत तेज़ी से लोड हो जाते हैं (सर्विस वर्कर का धन्यवाद), सही पुश नोटिफ़िकेशन भेजते हैं और उपयोगकर्ता की होम स्क्रीन पर फ़र्स्ट-क्लास आइकॉन रखते हैं, जो उन्हें फ़ुलस्क्रीन ऐप्लिकेशन के रूप में लोड कर सकता है. वे स्मार्ट वेब ऐप्लिकेशन इंस्टॉल बैनर का भी फ़ायदा उठा सकते हैं.
प्रोग्रेसिव वेब ऐप्लिकेशन
- प्रोग्रेसिव - ब्राउज़र की पसंद को ध्यान में रखे बिना, हर उपयोगकर्ता के लिए काम करता है. इसकी वजह यह है कि इन्हें मुख्य टेनेंट के तौर पर, प्रोग्रेसिव एन्हैंसमेंट की मदद से बनाया जाता है.
- रिस्पॉन्सिव - किसी भी डिवाइस के नाप या आकार, डेस्कटॉप, मोबाइल, टैबलेट या आगे जो भी हो, उससे फ़िट हो जाता है.
- कनेक्टिविटी स्वतंत्र - ऑफ़लाइन या खराब क्वालिटी के नेटवर्क पर काम करने के लिए, सर्विस वर्कर के साथ बेहतर बनाई गई.
- ऐप्लिकेशन जैसा - ऐप्लिकेशन की शैली के नेविगेशन और इंटरैक्शन उपलब्ध कराने के लिए, ऐप्लिकेशन शेल मॉडल का इस्तेमाल करें.
- फ़्रेश - सर्विस वर्कर अपडेट प्रक्रिया की वजह से यह हमेशा अप-टू-डेट रहता है.
- सुरक्षित - इसे TLS के ज़रिए दिखाया जाता है, ताकि स्नूपिंग को रोका जा सके और यह पक्का किया जा सके कि कॉन्टेंट के साथ छेड़छाड़ न की गई हो.
- खोजे जा सकने वाले - W3C मेनिफ़ेस्ट और सर्विस वर्कर रजिस्ट्रेशन के दायरे की वजह से, ऐप्लिकेशन को "ऐप्लिकेशन" के तौर पर पहचाना जा सकता है. इसकी मदद से सर्च इंजन, उन्हें आसानी से ढूंढ पाते हैं.
- फिर से जोड़ने के काबिल - पुश नोटिफ़िकेशन जैसी सुविधाओं की मदद से, ग्राहकों को फिर से जोड़ने के लक्ष्य को आसान बनाएं.
- इंस्टॉल करने लायक - उपयोगकर्ताओं को ऐप स्टोर की परेशानी के बिना, अपनी होम स्क्रीन पर सबसे काम के ऐप्लिकेशन “बनाए रखने” की सुविधा दें.
- लिंक किया जा सकता है - यूआरएल के ज़रिए आसानी से शेयर किया जा सकता है. साथ ही, इसे आसानी से इंस्टॉल करने की ज़रूरत नहीं होती.
प्रोग्रेसिव वेब ऐप्लिकेशन, Android के लिए Chrome के लिए यूनीक नहीं होते हैं. नीचे हम देख सकते हैं कि Android के लिए Firefox (बीटा वर्शन) में Pokedex प्रोग्रेसिव वेब ऐप्लिकेशन काम करता है. होम स्क्रीन पर जोड़ें और सर्विस वर्कर कैश मेमोरी में जोड़े जाने की सुविधाएं ठीक से काम कर रही हैं.
इस मॉडल की "प्रोग्रेसिव" प्रकृति का एक अच्छा पहलू यह है कि ब्राउज़र वेंडर के लिए बेहतर सहायता उपलब्ध कराने के दौरान, सुविधाओं को धीरे-धीरे अनलॉक किया जा सकता है. Pokedex जैसे प्रोग्रेसिव वेब ऐप्लिकेशन भी Android पर Opera में बढ़िया काम करते हैं. साथ ही, लागू करने के तरीके में कुछ ध्यान देने लायक अंतर हैं:
प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में ज़्यादा जानकारी पाने के लिए, एलेक्स रसेल की ब्लॉग पोस्ट पढ़ें. इसमें उनके बारे में जानकारी दी गई है. पॉल किनलैन ने प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, काफ़ी काम का स्टैक ओवरफ़्लो टैग भी शुरू किया.
सिद्धांत
वेब ऐप्लिकेशन मेनिफ़ेस्ट
मेनिफ़ेस्ट से आपके वेब ऐप्लिकेशन को उपयोगकर्ता की होम स्क्रीन पर स्थानीय-जैसी ज़्यादा मौजूदगी दिखाने में मदद मिलती है. इससे ऐप्लिकेशन को फ़ुल-स्क्रीन मोड में लॉन्च किया जा सकता है (यूआरएल बार मौजूद नहीं होगा). इससे स्क्रीन ओरिएंटेशन को कंट्रोल किया जा सकता है. साथ ही, 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-प्री-कैश मेमोरी पर क्विक प्राइमर लिखा है. इसे 'ऑफ़लाइन-फ़र्स्ट', तेज़, sw-प्री-कैश मेमोरी मॉड्यूल की मदद से, और उसी टूल पर कोडलैब नाम दिया है जो आपके काम आ सकता है.
Chrome, Opera, और Firefox में सर्विस वर्कर के लिए सभी सुविधाएं उपलब्ध हैं. एज लोग इस सुविधा में लोगों की दिलचस्पी के बारे में अच्छे सिग्नल दे रहे हैं. Safari ने एक इंजीनियर की प्रस्तावित पांच वर्षीय योजना के माध्यम से संक्षिप्त रूप से इसमें रुचि का उल्लेख किया था.
ग्राहकों को फिर से जोड़ने के लिए पुश नोटिफ़िकेशन
असरदार तरीके से, ऐसे वेब ऐप्लिकेशन बनाए जा सकते हैं जिनके साथ उपयोगकर्ता टैब के बाहर जुड़ सकते हैं. यह ब्राउज़र बंद किया जा सकता है. साथ ही, आपके अनुभव से जुड़ने के लिए, उसे आपके वेब ऐप्लिकेशन का लगातार इस्तेमाल करने की ज़रूरत भी नहीं है. इस सुविधा के लिए, सर्विस वर्कर और वेब ऐप्लिकेशन मेनिफ़ेस्ट, दोनों की ज़रूरत होती है. ये ऐसी सुविधाएं होती हैं जिनके बारे में पहले ही खास जानकारी दी गई है.
Push API को Chrome में लागू किया गया है. इसे Firefox में डेवलप किया जा रहा है और Edge में विचार किया जा रहा है. फ़िलहाल, Safari से इस सुविधा को लागू करने के इरादे से जुड़ा कोई सार्वजनिक सिग्नल नहीं है.
Open Web पर पुश नोटिफ़िकेशन: मैट गौंट के पुश नोटिफ़िकेशन पाने के बारे में पूरी जानकारी देता है. साथ ही, वेब की बुनियादी बातों पर पुश नोटिफ़िकेशन कोडलैब भी उपलब्ध है.
अगर आपको वीडियो पसंद है, तो Chrome टीम के माइकल वैन ओवेर्कर्क ने छह मिनट का परिचय भी दिया है. इससे आपको पुश नोटिफ़िकेशन मिलेगा.
बेहतर सुविधाओं का इस्तेमाल करना
याद रखें कि आपके उपयोगकर्ता अनुभव में अलग-अलग लेवल हो सकते हैं. यह इस बात पर निर्भर करता है कि आपका वेब ऐप्लिकेशन देखने के लिए किस ब्राउज़र का इस्तेमाल किया जा रहा है. हार्ड कैंडी शेल पर आपका कंट्रोल होता है.
वेब प्लैटफ़ॉर्म पर आने वाली अतिरिक्त सुविधाएं, जैसे कि बैकग्राउंड सिंक्रोनाइज़ेशन (वेब ऐप्लिकेशन बंद होने पर भी सर्वर के साथ डेटा सिंक करने के लिए) और वेब ब्लूटूथ (अपने वेब ऐप्लिकेशन के ब्लूटूथ डिवाइसों से बात करने के लिए) को आपके प्रोग्रेसिव वेब ऐप्लिकेशन में भी इस तरह जोड़ा जा सकता है.
Chrome में वन-शॉट बैकग्राउंड सिंक की सुविधा चालू कर दी गई है. जेक आर्चिबाल्ड के पास अपने ऑफ़लाइन Wikipedia ऐप्लिकेशन और लेख का एक वीडियो है, जिसमें यह जानकारी दी गई है कि वे कैसे इसका इस्तेमाल करते हैं. अगर आप इस एपीआई को आज़माना चाहते हैं, तो Francois Beaufort के पास वेब ब्लूटूथ के कई सैंपल भी उपलब्ध हैं.
फ़्रेमवर्क-फ़्रेंडली
अगर आपको अपने मौजूदा ऐप्लिकेशन या फ़्रेमवर्क पर, ऊपर बताए गए किसी भी सिद्धांत को लागू करना है, तो इससे आपको कोई रुकावट नहीं आएगी. प्रोग्रेसिव वेब ऐप्लिकेशन बनाते समय, ध्यान में रखने लायक कुछ और बातें ये हैं: उपयोगकर्ताओं को ध्यान में रखकर बनाया गया RAIL परफ़ॉर्मेंस मॉडल और FLIP आधारित ऐनिमेशन.
मुझे आशा है कि 2016 के दौरान, हम प्रगतिशील वेब ऐप्लिकेशन के मुख्य फ़ीचर के रूप में इसका समर्थन करते हुए बॉयलरप्लेट और सीड प्रोजेक्ट की बढ़ती हुई संख्या को देखेंगे. तब तक, अपने खुद के ऐप्लिकेशन में इन सुविधाओं को जोड़ने में आने वाली रुकावटें बहुत ज़्यादा नहीं हैं और IMHO के लिए काफ़ी मेहनत करनी पड़ती है.
आर्किटेक्चर
प्रोग्रेसिव वेब ऐप्लिकेशन मॉडल पर "ऑल-इन" मॉडल को लागू करने के अलग-अलग लेवल हैं. हालांकि, एक आम तरीका यह है कि उन्हें ऐप्लिकेशन शेल के तौर पर बनाया जाए. ऐसा करना मुश्किल नहीं है, लेकिन इसके कई फ़ायदे हैं.
ऐप्लिकेशन शेल आर्किटेक्चर आपके ऐप्लिकेशन शेल (यूज़र इंटरफ़ेस) को कैश मेमोरी में सेव करने को बढ़ावा देता है, ताकि यह ऑफ़लाइन काम कर सके और JavaScript का इस्तेमाल करके अपने कॉन्टेंट को पॉप्युलेट कर सके. बार-बार विज़िट करने पर, इससे आपको नेटवर्क के बिना भी स्क्रीन पर तेज़ी से काम के पिक्सल मिल जाते हैं, भले ही आपका कॉन्टेंट बाद में उसी पेज से आता हो. इससे, आपके वीडियो की परफ़ॉर्मेंस में काफ़ी सुधार देखने को मिलेगा.
जेरेमी कीथ ने हाल ही में टिप्पणी की है कि इस तरह के मॉडल में, शायद सर्वर-साइड रेंडरिंग को फ़ॉलबैक के तौर पर नहीं देखा जाना चाहिए. हालांकि, क्लाइंट-साइड रेंडरिंग को बेहतर बनाने की सुविधा के तौर पर देखना चाहिए. यह सही सुझाव है.
ऐप्लिकेशन शेल मॉडल में, सर्वर-साइड रेंडरिंग का ज़्यादा से ज़्यादा इस्तेमाल किया जाना चाहिए. साथ ही, क्लाइंट-साइड प्रोग्रेसिव रेंडरिंग का इस्तेमाल, बेहतर बनाने के लिए उसी तरह किया जाना चाहिए जिस तरह हम सर्विस वर्कर के साथ काम करने पर, अनुभव को "बेहतर" बनाते हैं. इस तक कई तरीकों से पहुंचा जा सकता है.
मेरा सुझाव है कि हम आर्किटेक्चर पर हमारे लेख को पढ़ें. साथ ही, इस बात का आकलन करें कि आपके ऐप्लिकेशन और स्टैक पर, मिलते-जुलते सिद्धांतों को सबसे अच्छे तरीके से कैसे लागू किया जा सकता है.
बॉयलरप्लेट शुरू करना
ऐप्लिकेशन शेल
app-shell डेटा स्टोर करने की जगह में, ऐप्लिकेशन शेल आर्किटेक्चर को करीब-करीब पूरी तरह लागू किया गया है. इसका बैकएंड Express.js में और फ़्रंट-एंड लिखा गया है, जो ES2015 में लिखा गया है.
यह देखते हुए कि इसमें मॉडल के क्लाइंट और सर्वर साइड, दोनों हिस्से शामिल हैं और वहां बहुत कुछ हो रहा है. इसलिए, कोड बेस के बारे में जानने में थोड़ा समय लगेगा. हालांकि, यह प्रोग्रेसिव वेब ऐप्लिकेशन का सबसे बेहतर शुरुआती पॉइंट है. इस प्रोजेक्ट के लिए, हम Docs पर फ़ोकस करेंगे.
पॉलिमर स्टार्टर किट
Polymer वेब ऐप्लिकेशन इस्तेमाल करने का आधिकारिक तौर पर शुरुआती बिंदु, प्रोग्रेसिव वेब ऐप्लिकेशन की इन सुविधाओं के साथ काम करता है:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- Android के लिए Chrome स्प्लैशस्क्रीन
- प्लैटिनम SW एलिमेंट की मदद से, सर्विस वर्कर की ऑफ़लाइन कैश मेमोरी
- प्लैटिनम पुश एलिमेंट के साथ पुश नोटिफ़िकेशन (मैन्युअल सेट अप ज़रूरी है)
कुछ प्रोग्रेसिव पॉलीमर वेब ऐप्लिकेशन में मिलने वाले कुछ बेहतर परफ़ॉर्मेंस पैटर्न (जैसे, ऐप्लिकेशन शेल मॉडल, एक साथ काम न करने वाली सेटिंग) के साथ PSK के मौजूदा वर्शन का इस्तेमाल नहीं किया जा सकता.
हमारा लक्ष्य इन पैटर्न को 2016 में PSK में बेक करने की कोशिश करना है. हालांकि, इससे जुड़े शुरुआती एक्सपेरिमेंट को रॉब डॉडसन के Polymer Zuperkulblog ऐप्लिकेशन में और एरिक बिडलमैन के Polymer Perf Patterns के बेहतरीन शब्दों में देखा जा सकता है.
वेब स्टार्टर किट
नए प्रोजेक्ट को शुरू करने के लिए, हम प्रोग्रेसिव वेब ऐप्लिकेशन की ये सुविधाएं देते हैं:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- Android के लिए Chrome स्प्लैशस्क्रीन
- sw-precache की मदद से सर्विस वर्कर प्री-कैशिंग
अगर आपको vanilla JS/ES2015 के साथ काम करना है और पॉलिमर का इस्तेमाल करने में समस्या हो रही है, तो Web Starter किट एक रेफ़रंस पॉइंट के तौर पर आपके लिए काम का साबित हो सकता है. इस किट से कोड स्निपेट को फिर से इस्तेमाल किया जा सकता है या उसे चुराया जा सकता है.
फ़्रेमवर्क के साथ और बिना स्ट्रक्चर वाले प्रोग्रेसिव वेब ऐप्लिकेशन
समुदाय के सदस्यों ने JS लाइब्रेरी और फ़्रेमवर्क के साथ और उनके बिना भी पहले से ही कई ओपन-सोर्स प्रोग्रेसिव वेब ऐप्लिकेशन बना लिए हैं. अगर आपको प्रेरणा की तलाश है, तो यहां दिए गए डेटा संग्रह स्थान रेफ़रंस के तौर पर काम के हो सकते हैं. ये बहुत ही अच्छे ऐप्लिकेशन भी हैं.
वनिला JavaScript
- पॉल लुईस के वॉइस मेमो को
app-shell(लिखना) से मिलते-जुलते आर्किटेक्चर का इस्तेमाल करके बनाया गया है - जेक आर्चिबाल्ड का ऑफ़लाइन Wikipedia (वीडियो)
- पॉल किनलान की एयर हॉर्नर
- पॉल लुईस का गिटार ट्यूनर (लिखना)
Polymer
- रॉब डॉडसन का Zuperkulblog (स्लाइड)
React
वर्चुअल-डीओएम
- Nolan Lawson का Pokedex - यह एक शानदार प्रोग्रेसिव वेब ऐप्लिकेशन है, जो "वेब वर्कर में सब कुछ करें" का इस्तेमाल करके प्रोग्रेसिव रेंडरिंग में मदद करता है. (लिखें)
Angular.js
- केनेथ ऑकेनबर्ग की Timey.in - यह जानकारी, संसाधन को पहले से कैश मेमोरी में सेव करने के लिए भी
sw-precacheका इस्तेमाल करती है
वीडियो के आखिरी हिस्से के नोट
जैसा कि बताया गया है, प्रोग्रेसिव वेब ऐप्लिकेशन अभी अपने शुरुआती दौर में हैं, लेकिन उनके पीछे के तरीकों को अपनाने और यह देखने का यह एक रोमांचक समय है कि वे आपके अपने वेब ऐप्लिकेशन पर कितनी अच्छी तरह से लागू हो सकते हैं.
फ़िलहाल, पॉल किनलैन प्रोग्रेसिव वेब ऐप्लिकेशन के लिए 'वेब की बुनियादी बातों' के दिशा-निर्देशों की योजना बना रहे हैं. अगर आपके पास ऐसे इनपुट हैं जिनके बारे में आप जानना चाहते हैं, तो कृपया थ्रेड पर बेझिझक टिप्पणी करें.
इसके बारे में और पढ़ें
- प्रोग्रेसिव वेब ऐप्लिकेशन: अपना आत्मविश्वास खोए बिना टैब से बचना
- प्रोग्रेसिव वेब ऐप्लिकेशन, वेब डेवलपमेंट का भविष्य क्यों हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: प्राइमटाइम के लिए तैयार
- ServiceWorker के साथ प्रोग्रेसिव ऐप्लिकेशन बनाना
- आगे बढ़ने वाले वेब ऐप्लिकेशन बेहतर हैं
- प्रोग्रेसिव वेब ऐप्लिकेशन: मोबाइल इस्तेमाल करने का एक नया तरीका
- पेश है Pokedex.org: Pokémon के प्रशंसकों के लिए एक प्रोग्रेसिव वेब ऐप्लिकेशन
- Chrome डेवलपर सम्मेलन का रीकैप: प्रोग्रेसिव वेब ऐप्लिकेशन