प्रोग्रेसिव वेब ऐप्स का परिचय

अधिकांश डेवलपर्स ने कम से कम कुछ चर्चा सुनी है प्रगतिशील वेब अनुप्रयोग. ये व्यापक रूप से Google जैसी तकनीक कंपनियों द्वारा समर्थित हैं और जल्दी से बन रहे हैं मल्टी-डिवाइस वेब अनुप्रयोगों के लिए आदर्श.

लेकिन, वास्तव में क्या है एक ठेठ के बीच अंतर और ए प्रगतिशील वेब अप्प?

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

इस गाइड में, मैं कवर करूँगा प्रगतिशील वेब ऐप्स की मूल बातें, कुछ प्राथमिक सुविधाएँ, और आप अपना खुद का निर्माण कैसे शुरू कर सकते हैं.

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

प्रगतिशील वेब ऐप्स (या PWA) वेब ब्राउजर एपीआई का लाभ उठाएं किसी भी उपकरण पर ब्राउज़र में मूल एप्लिकेशन अनुभव बनाने के लिए.

अंततः, प्रोग्रेसिव वेब एप्स में ए मुट्ठी भर प्रौद्योगिकियाँ डेवलपर्स शक्तिशाली देशी जैसे एप्लिकेशन बनाने के लिए उपयोग कर सकते हैं। बहुत से आते हैं वेब एपीआई जैसे सेवा कार्यकर्ता एपीआई या एपीआई पुश करें.

वहां कुछ आवश्यकताओं किसी PWA को कॉल करने के लिए लेकिन ये हैं सबसे महत्वपूर्ण:

• पूरी तरह से है मोबाइल उत्तरदायी.
• का अनुपालन करें प्रगतिशील वृद्धि.
• कर पाना स्थानीय रूप से स्थापित करें स्मार्टफोन और टैबलेट पर.
• ऑफ़लाइन चलता है इंटरनेट के बिना, सेवा श्रमिकों का उपयोग करना.
• सामग्री को कार्यक्षमता से अलग करता है एप्लिकेशन शेल का उपयोग करना.
• HTTPS पर बनाता है अधिक सुरक्षा के लिए.
• खोज योग्य Google खोज में.
• है गतिशील एप्लिकेशन जैसे पृष्ठ लेकिन अभी भी प्रत्येक इसका अपना URL है.

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

आइए प्रगतिशील वेब एप्स के मूल सिद्धांतों में गोता लगाएँ और जानें कि उन्हें क्या बनाता है.

सेवा कर्मी

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

सरल शब्दों में, सेवा कार्यकर्ता जावास्क्रिप्ट फ़ाइल के रूप में कार्य करता है और आपके वेब ऐप की पृष्ठभूमि में चलता है। जब भी यूजर एक घटना करता है, यह कहता है सेवा कार्यकर्ता स्क्रिप्ट या तो डेटा खींचने के लिए, डेटा को बचाने के लिए, या दोनों!

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

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

यदि आप एक प्रगतिशील वेब ऐप बनाने की उम्मीद कर रहे हैं सेवा कार्यकर्ता एपीआई के साथ शुरू करें. बस इसके साथ टिंकर करें और स्थानीय स्तर पर एक सरल डेमो सेट करें। यह बाद के लिए ग्राउंडवर्क सेट करेगा कस्टम अनुप्रयोग सुविधाओं और पृष्ठों का निर्माण यह सब सेवाकर्मियों के माध्यम से चलता है.

के लिये शुरुआती गाइड तथा विस्तृत कोड स्निपेट, मैं विशेष रूप से इन संसाधनों की सिफारिश करता हूं:

• सेवाकर्मियों के साथ शुरुआत करना
• सेवाकर्मियों के साथ शुरुआत करना
• सेवा कार्यकर्ता नमूना: कस्टम ऑफ़लाइन पृष्ठ नमूना

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

अधिकांश देशी ऐप्स एक ऐप शेल आर्किटेक्चर का पालन करें जहां डेटा और ऐप कोड है UI से पूरी तरह से अलग. एप्लिकेशन शेल हो सकता है स्थानीय रूप से कैश किया गया इसलिए प्रत्येक पृष्ठ अविश्वसनीय रूप से तेजी से लोड होता है.

यह उसी के साथ रहता है “मूल एप्लिकेशन” जहाँ लग रहा है इंटरफ़ेस हमेशा दिखाई देता है लेकिन वो सामग्री / कार्यक्षमता अलग तरह से लोड होती है हर बार। इसके बारे में थोड़ा और जानने के लिए Google डेवलपर्स साइट पर इस पृष्ठ को देखें ऐप शेल मॉडल.

ज्यादातर ऐप में ए बहुत ही सरल अनुप्रयोग खोल और आपको अपना आर्किटेक्चर डिजाइन करना चाहिए मन में सादगी.

आमतौर पर, ऐप शेल में ये होते हैं मुख्य तत्व:

• शीर्ष नेविगेशन बार लिंक.
• ताज़ा करें बटन (वैकल्पिक).
• पृष्ठ पृष्ठभूमि कंटेनर.

आप यहाँ एक अच्छा केस स्टडी पा सकते हैं Google का I / O प्रगतिशील वेब ऐप शेल आर्किटेक्चर. उन्होंने यह भी अपने खुद के खोल वास्तुकला के निर्माण के लिए कुछ सुझाव प्रदान करते हैं, यह कैशिंग, और हर पृष्ठ के लिए इसे स्वचालित रूप से खींचना.

शैल वास्तुकला के बारे में सोचो सभी स्थिर यूआई तत्व आप हर एक पृष्ठ पर उपयोग करेंगे। ये होना चाहिए आपके बाकी कोड से अलग हो गया और आसान पुन: उपयोग के लिए कैश किया गया। यह भी देखें Google का परिचय कोड के बहुत से विषय के लिए स्निपेट आपको आरंभ करने में मदद करने के लिए.

ऑनलाइन और ऑफलाइन समर्थन

अधिकांश देशी ऐप्स इंटरनेट के बिना ठीक चल रहा है. प्रगतिशील वेब एप्स इसी व्यवहार का पालन करने के लिए हैं.

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

यदि आप सेवा कार्यकर्ता एपीआई का उपयोग कर रहे हैं, तो एक नज़र डालें कैश एपीआई जो है उसी ढांचे का हिस्सा. यह आम तौर पर सबसे अच्छा तरीका है स्थानीय रूप से डेटा स्टोर करें तथा इसे सेवाकर्मियों से प्राप्त करें बाद में.

आप भी कर सकते हैं किसी भी वेब ऐप का परीक्षण करें का उपयोग करते हुए प्रकाशस्तंभ, पीडब्ल्यूए प्रौद्योगिकियों के लिए सुविधा अनुपालन और समर्थन की जांच के लिए एक नि: शुल्क उपकरण.

PWA हमेशा ऑफ़लाइन समर्थन की आवश्यकता है सेवा कार्यकर्ता एपीआई के माध्यम से, इसलिए वे कर सकते हैं कम कनेक्टिविटी वाले राज्यों में काम करते हैं. प्रकाशस्तंभ अन्य सुविधाओं के एक मेजबान के साथ ऑफ़लाइन समर्थन के लिए परीक्षण करने का सबसे अच्छा तरीका है.

जीवंत उदाहरण

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

लेकिन, के लिए धन्यवाद PWA चट्टानों गैलरी, मैं कुछ अद्भुत उदाहरणों को दिखाने के लिए उत्सुक हूं कि PWA वास्तव में क्या कर सकता है.

1. मुद्रा परिवर्तक

यह काफी सरल है मुद्रा परिवर्तक विनिमय दर लेता है और वर्तमान की गणना करता है दुनिया भर में मुद्राओं की एक टन के बीच अंतर.

आप देखेंगे कि यह वेब ऐप है पूरी तरह से उत्तरदायी, स्पर्श का समर्थन करता है, तथा स्वत: अपडेट के बिना किसी पेज को रिफ्रेश किए.

ये कुछ ऐसी सुविधाएँ हैं जिनकी आप किसी से अपेक्षा करते हैं ठेठ प्रगतिशील वेब अनुप्रयोग. इस ऐप को स्थानीय रूप से भी सहेजा जा सकता है अपने फोन को ऑफ़लाइन काम करने के लिए, हालांकि यह वर्तमान विनिमय दरों की जांच करने के लिए एक JSON फ़ाइल से कनेक्ट करता है.

2. अंग्रेजी उच्चारण

मैं बस इस वेब ऐप को निहारता हूं क्योंकि यह अद्वितीय और अविश्वसनीय रूप से अच्छी तरह से डिज़ाइन किया गया है। अंग्रेजी उच्चारण मानचित्र ऑनलाइन वीडियो curates जहां लोग अमेरिका और ब्रिटेन के विशिष्ट क्षेत्रों से उच्चारण करते हैं.

नक्शे पर कहीं भी क्लिक करके, आप सुन सकते हैं कि लोग दुनिया के विभिन्न हिस्सों में कुछ शब्दों का उच्चारण कैसे करते हैं। एप्लिकेशन को तेजी से बिजली है और यह है GitHub पर खुला-खट्टा किसी को भी बाहर की जाँच करने के लिए.

इंटर्न पर चलता है प्रतिक्रिया / Redux साथ में Firebase और एक Google मानचित्र से API कनेक्शन. निश्चित रूप से शुरुआती अध्ययन और सीखने के लिए काफी सरल कुछ का एक बड़ा उदाहरण है.

3. Pokedex.org

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

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

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

4. फ्लिपकार्ट

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

आईटी इस पूरी तरह से उत्तरदायी तथा पृष्ठों को गतिशील रूप से लोड करता है. पृष्ठ URL ब्राउज़र में जोड़े जाते हैं, इसलिए आप उन्हें कॉपी / पेस्ट कर सकते हैं और उन्हें एक विशिष्ट वेबसाइट की तरह साझा कर सकते हैं.

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

और, जब मैं पूरे फ्लिपकार्ट स्रोत कोड के लिए एक रेपो नहीं ढूंढ सका, तो ए GitHub पर Flipkart पेज साथ में छोटे कोड स्निपेट उनकी डेवलपर टीम से.

और अधिक सीखना

प्रगतिशील वेब अनुप्रयोग हैं अविश्वसनीय रूप से लोकप्रिय है और निश्चित रूप से भाप प्राप्त करेगा जैसा कि अधिक डेवलपर देशी / हाइब्रिड ऐप्स से स्विच करते हैं.

वहाँ एक वार्षिक शिखर सम्मेलन कहा जाता है प्रोग्रेसिव वेब ऐप समिट और वे YouTube पर वीडियो प्रकाशित करते हैं जिन्हें आप मुफ्त में देख सकते हैं। यह एक शानदार तरीका है एक टिकट के लिए भुगतान के बिना कुछ समर्थक ज्ञान उठाओ.

लेकिन, यदि आप अधिक विस्तृत की तलाश कर रहे हैं PWA कोडिंग गाइड निश्चित रूप से इन ट्यूटोरियल की जाँच करें:

• प्रगतिशील वेब ऐप्स के लिए एक शुरुआतकर्ता गाइड
• React के साथ अपना पहला प्रगतिशील वेब ऐप बनाएं
• पॉलिमर के साथ एक प्रगतिशील वेब ऐप का निर्माण