👳🏿 🧒🏾 🤽🏾 प्रगतिशील वेब अनुप्रयोग मूल बातें 👨🏾‍🎤 😬 🍄

क्या आपने कभी "Add to Home Screen" बटन देखा है जो किसी भी साइट को ब्राउज करने पर आपके एंड्रॉइड स्मार्टफोन की स्क्रीन पर दिखाई देता है? यदि आप इस बटन पर क्लिक करते हैं, तो पृष्ठभूमि में फोन पर एक निश्चित एप्लिकेशन इंस्टॉल किया जाएगा, लॉन्च करने के लिए आइकन जो मुख्य स्क्रीन पर जाएगा। अब इस एप्लिकेशन को लॉन्च किया जा सकता है और साइट के साथ पहले की तरह ही काम कर सकता है, लेकिन केवल नियमित टेलीफोन इंटरफेस में।

हम जो बात कर रहे हैं वह एक मोबाइल एप्लिकेशन है जिसे वेब एप्लिकेशन से डाउनलोड किया गया है। इसके अलावा, जैसा कि आप देख सकते हैं, ऐसे एप्लिकेशन को स्थापित करने के लिए आपको Play Market के साथ सहभागिता करने की आवश्यकता नहीं है। नतीजतन, ऐसे अनुप्रयोगों की स्थापना यथासंभव सरल है। हालांकि, यह सबसे दिलचस्प से बहुत दूर है। ऐसे कार्यक्रमों को लॉन्च करने से, आपको उन डेटा के साथ काम करने का अवसर मिलता है जो वे प्रदर्शित करते हैं, यहां तक कि इंटरनेट कनेक्शन के बिना भी। वे आपको ऑफ़लाइन वेब पृष्ठों के साथ सहभागिता करने की अनुमति देते हैं। अच्छा, यह अद्भुत नहीं है?

जिस सामग्री को हम आज प्रकाशित करते हैं, उसके लेखक इस तरह के अनुप्रयोगों के बारे में बात करेंगे कि उन्हें क्यों आवश्यकता है, और उन्हें कैसे बनाया जाए।

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

होम स्क्रीन बटन में जोड़ें

अब बात करते हैं कि वेब एप्लिकेशन पर लागू होने पर "प्रगतिशीलता" क्या है। मैं उन्हें बेहतर तरीके से जानने का प्रस्ताव करता हूं, यह पता लगाने के लिए कि वे नियमित वेब अनुप्रयोगों से कैसे भिन्न हैं, और, इसके अलावा, मैं आपको बताना चाहता हूं कि मुझे विश्वास है कि पीडब्ल्यूए पारंपरिक मोबाइल अनुप्रयोगों से बेहतर है।

एक प्रगतिशील वेब अनुप्रयोग क्या है?

"प्रोग्रेसिव वेब ऐप" शब्द एलेक्स रसेल और फ्रांसिस बेरिमन द्वारा गढ़ा गया था। एलेक्स के अनुसार, प्रगतिशील वेब अनुप्रयोग केवल ऐसी वेबसाइटें हैं जिन्होंने सही विटामिन लिया है। पीडब्ल्यूए के दिल में जो झूठ है उसे नई रूपरेखा या नई तकनीक नहीं कहा जा सकता है। यह वास्तव में, उन्नत विकास विधियों का एक सेट है जो आपको क्लासिक डेस्कटॉप या मोबाइल एप्लिकेशन के व्यवहार के समान वेब एप्लिकेशन के व्यवहार को बनाने की अनुमति देता है।

होम स्क्रीन पर PWA आइकन

PWA प्रगतिशील अनुप्रयोग संवर्द्धन के माध्यम से उपयोगकर्ता को नई उपयोगिता प्रदान करता है। सामान्य तौर पर, इसका मतलब है कि विभिन्न पीढ़ियों के मोबाइल उपकरणों पर पीडब्ल्यूए, लगभग एक ही काम करेगा। बेशक, साधारण टेलीफोन अनुप्रयोगों की कुछ विशेषताएं उनके लिए उपलब्ध नहीं हो सकती हैं, लेकिन ऐसे अनुप्रयोग आमतौर पर विभिन्न उपकरणों पर काम करते हैं जिस तरह से उन्हें उनके लिए काम करना चाहिए।

आपको उन्नत वेब एप्लिकेशन की आवश्यकता क्यों है?

इससे पहले कि हम समझें कि पीडब्ल्यूए की आवश्यकता क्यों है, आइए बात करते हैं कि वेब एप्लिकेशन और नियमित मोबाइल एप्लिकेशन डिजाइन करते समय हमें किन समस्याओं का सामना करना पड़ता है।

धीमा इंटरनेट कनेक्शन। शायद, जहां आप रहते हैं, तेज इंटरनेट के साथ सब कुछ क्रम में है, इसलिए यह समस्या आपको प्रभावित नहीं करती है। लेकिन दुनिया की 60% आबादी अभी भी 2G इंटरनेट का उपयोग करती है। यहां तक कि संयुक्त राज्य अमेरिका में, कुछ उपयोगकर्ताओं को केवल साधारण टेलीफोन लाइनों का उपयोग करके साधारण मोडेम की गति के बराबर गति उपलब्ध है।
धीमी लोडिंग वेबसाइट। यदि साइट बहुत धीरे-धीरे लोड होती है, तो क्या आप जानते हैं कि उपयोगकर्ता कितनी देर तक क्लोज विंडो बटन पर क्लिक करने से पहले इंतजार कर रहा है? तीन सेकंड! 53% उपयोगकर्ता साइटों को छोड़ देते हैं जो बहुत धीमी है।
अनुप्रयोगों को स्थापित करने की जटिलता। उपयोगकर्ता नियमित मोबाइल एप्लिकेशन इंस्टॉल करने के इच्छुक नहीं हैं। औसत उपयोगकर्ता प्रति माह 0 एप्लिकेशन इंस्टॉल करता है।
एप्लिकेशन के साथ काम करने में उपयोगकर्ताओं को शामिल करना। उपयोगकर्ता अपना अधिकांश समय नियमित मोबाइल ऐप्स में बिताते हैं, लेकिन मोबाइल वेब ऐप की पहुंच लगभग तीन गुना है। नतीजतन, अधिकांश उपयोगकर्ता विशेष रूप से अनुप्रयोगों के साथ काम करने में सक्रिय रूप से शामिल नहीं होते हैं, हालांकि ये उपयोगकर्ता तीन मोबाइल अनुप्रयोगों में 80% समय बिताते हैं जो वे अक्सर उपयोग करते हैं।

प्रगतिशील वेब अनुप्रयोग इन समस्याओं को हल करने में मदद करते हैं।

कार्रवाई में पी.डब्ल्यू.ए

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

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

कैसे एक प्रगतिशील वेब अनुप्रयोग बनाने के लिए?

Google ने उन्नत वेब एप्लिकेशन विकसित करने के लिए एक चेकलिस्ट प्रकाशित की है। किसी एप्लिकेशन के लिए न्यूनतम आवश्यकताओं पर विचार करें, जिसका अनुपालन हमें PWA को कॉल करने की अनुमति देता है।

▍1। आवेदन प्रकट

PWA मेनिफ़ेस्ट एक manifest.json फ़ाइल कुछ इस तरह से होती है:

 { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [   {     "src": "images/icons/icon-72x72.png",     "sizes": "72x72",     "type": "image/png"   },   {     "src": "images/icons/icon-96x96.png",     "sizes": "96x96",     "type": "image/png"   },   {     "src": "images/icons/icon-128x128.png",     "sizes": "128x128",     "type": "image/png"   },   {     "src": "images/icons/icon-144x144.png",     "sizes": "144x144",     "type": "image/png"   },   {     "src": "images/icons/icon-152x152.png",     "sizes": "152x152",     "type": "image/png"   },   {     "src": "images/icons/icon-192x192.png",     "sizes": "192x192",     "type": "image/png"   },   {     "src": "images/icons/icon-384x384.png",     "sizes": "384x384",     "type": "image/png"   },   {     "src": "images/icons/icon-512x512.png",     "sizes": "512x512",     "type": "image/png"   } ], "splash_pages": null }

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

एक साइट जो मैनिफ़ेस्ट.जॉसन फ़ाइल को आसान बनाती है

▍2। सेवा कार्यकर्ता

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

यहाँ एक उदाहरण serviceworker.js फ़ाइल है।

 self.addEventListener('fetch', event => {   //           const {request} = event;   const url = new URL(request.url);   if(url.origin === location.origin) {       event.respondWith(cacheData(request));   } else {       event.respondWith(networkFirst(request));   } }); async function cacheData(request) {   const cachedResponse = await caches.match(request);   return cachedResponse || fetch(request); }

▍3। माउस

PWA डिवाइस पर इंस्टॉल किए गए लॉन्च के लिए आइकन का उपयोग किया जाता है। उपरोक्त साइट, जो प्रकट फ़ाइलों को बनाने में मदद करती है, आपको स्वचालित रूप से एकल छवि फ़ाइल 512x512 पिक्सेल के आकार के आधार पर एप्लिकेशन आइकन का एक सेट उत्पन्न करने की अनुमति देती है जो इस साइट पर अपलोड की गई है। उत्पन्न फ़ाइलें .png प्रारूप में सहेजी जाती हैं।

▍4। सुरक्षा

कुछ एप्लिकेशन को PWA कहे जाने के लिए, अन्य बातों के अलावा, HTTPS का उपयोग करके एक सुरक्षित संचार चैनल पर डेटा के आदान-प्रदान का समर्थन करना चाहिए। Cloudflare और LetsEncrypt जैसी सेवाओं की क्षमताओं का उपयोग करके इस तरह के कनेक्शन को व्यवस्थित करने के लिए SSL प्रमाणपत्र प्राप्त करना आसान है। इन दिनों एप्लिकेशन सुरक्षा केवल आवश्यक नहीं है, यह उपयोगकर्ता के लिए एप्लिकेशन की विश्वसनीयता प्रदर्शित करने और उसके साथ भरोसेमंद रिश्ते बनाने का भी एक तरीका है।

परिणाम

इस लेख में, हमने प्रगतिशील वेब अनुप्रयोगों के बारे में बात की, इस बारे में बात की कि उनकी आवश्यकता क्यों है, वे किन समस्याओं का समाधान करते हैं, उनके लिए क्या आवश्यकताएँ प्रस्तुत की जाती हैं। यहां हमने उनके विकास के विषय पर भी बात की, विशेष रूप से, हमने PWA मेनिफेस्ट, सर्विस वर्कर, एप्लिकेशन आइकन के बारे में बात की, और उन्हें HTTPS का उपयोग करके संरक्षित करने की आवश्यकता है। पीडब्ल्यूए तकनीक को अक्सर एंड्रॉइड स्मार्टफोन से संबंधित कुछ के रूप में माना जाता है, और हाल ही में, इस दृष्टिकोण से जीवन का अधिकार था। हालांकि, इस साल हुई घटनाओं को देखते हुए, हम कह सकते हैं कि कई प्लेटफार्मों पर PWA का एक बहुत ही दिलचस्प भविष्य है। PWA का विषय, वास्तव में, इस सब से दूर है। इसलिए, यह बहुत संभव है कि हम इसमें वापस लौट आएं।

प्रिय पाठकों! आप प्रगतिशील वेब अनुप्रयोगों के बारे में कैसा महसूस करते हैं?

प्रगतिशील वेब अनुप्रयोग मूल बातें