प्रगतिशील वेब ऐप्स का परिचय

जावास्क्रिप्ट सीखने में रुचि है? मेरी ईबुक jshandbook.com पर प्राप्त करें

प्रोग्रेसिव वेब ऐप्स (PWA) मोबाइल एप्लिकेशन डेवलपमेंट . में नवीनतम चलन हैं वेब प्रौद्योगिकियों का उपयोग करना। लेखन के समय (2018 की शुरुआत में), वे केवल Android उपकरणों पर लागू होते हैं ।

PWA बहुत जल्द iOS 11.3 और macOS 10.13.4 पर आने वाले हैं।

WebKit, जो कि Safari और Mobile Safari के अंतर्गत आता है, ने हाल ही में (अगस्त 2017) घोषित किया है कि उन्होंने ब्राउज़र में सर्विस वर्कर्स को पेश करने पर काम करना शुरू कर दिया है। इसका मतलब है कि जल्द ही ये iOS डिवाइस में भी लैंड करेंगे। इसलिए प्रोग्रेसिव वेब ऐप्स अवधारणा संभवतः iPhones और iPads पर लागू होगी, यदि Apple इस दृष्टिकोण को प्रोत्साहित करने का निर्णय लेता है।

यह कोई नई तकनीक नहीं है, बल्कि एक नया शब्द है जो उन तकनीकों के समूह की पहचान करता है जिनका लक्ष्य वेब-आधारित ऐप्स के लिए बेहतर अनुभव बनाना है।

एक प्रगतिशील वेब ऐप क्या है

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

यह तकनीक मूल रूप से 2015 में Google द्वारा पेश की गई थी, और यह डेवलपर और उपयोगकर्ताओं दोनों के लिए कई फायदे साबित करती है।

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

देवों को इंस्टॉलेशन के घर्षण में कमी . से लाभ हो सकता है , और ऐसे समय में जब स्टोर में ऐप होने से वास्तव में 99,99% ऐप्स के लिए खोज योग्यता के मामले में कुछ भी नहीं मिलता है, Google खोज वही लाभ प्रदान कर सकता है यदि अधिक नहीं।

एक प्रोग्रेसिव वेब ऐप एक ऐसी वेबसाइट है जिसे कुछ ऐसी तकनीकों के साथ विकसित किया गया है जो मोबाइल के अनुभव को सामान्य मोबाइल-अनुकूलित वेबसाइट की तुलना में अधिक सुखद बनाती हैं। यह लगभग एक देशी ऐप पर काम करने जैसा लगता है, क्योंकि यह निम्नलिखित सुविधाएँ प्रदान करता है:

• ऑफ़लाइन समर्थन
• तेज़ लोड होता है
• सुरक्षित है
• पुश नोटिफिकेशन उत्सर्जित करने में सक्षम है
• यूआरएल बार के बिना एक इमर्सिव, पूर्ण-स्क्रीन उपयोगकर्ता अनुभव है

मोबाइल प्लेटफ़ॉर्म (लेखन के समय Android, लेकिन यह तकनीकी रूप से उसी तक सीमित नहीं है) प्रोग्रेसिव वेब ऐप्स के लिए बढ़ते समर्थन की पेशकश करते हैं। वे उपयोगकर्ता को ऐप को होम स्क्रीन पर जोड़ने . के लिए भी कहते हैं जब वह उपयोगकर्ता ऐसी साइट पर जाता है।

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

प्रगतिशील वेब ऐप्स विकल्प

जब मोबाइल अनुभव बनाने की बात आती है, तो PWA विकल्पों की तुलना में कैसे खड़ा होता है?

आइए प्रत्येक के पेशेवरों और विपक्षों पर ध्यान दें, और देखते हैं कि PWA कहाँ उपयुक्त हैं।

मूल मोबाइल ऐप्स

मोबाइल ऐप बनाने के लिए नेटिव मोबाइल ऐप सबसे स्पष्ट तरीका है। उद्देश्य-सी या आईओएस पर स्विफ्ट, एंड्रॉइड पर जावा / कोटलिन और विंडोज फोन पर सी#।

प्रत्येक प्लेटफ़ॉर्म का अपना UI और UX सम्मेलन होता है, और देशी विजेट वह अनुभव प्रदान करते हैं जिसकी उपयोगकर्ता अपेक्षा करता है। उन्हें प्लेटफ़ॉर्म ऐप स्टोर के माध्यम से तैनात और वितरित किया जा सकता है।

देशी ऐप्स के साथ मुख्य दर्द बिंदु यह है कि क्रॉस-प्लेटफ़ॉर्म विकास के लिए कई अलग-अलग तरीकों और सर्वोत्तम प्रथाओं के साथ सीखने, महारत हासिल करने और अद्यतित रहने की आवश्यकता होती है। यदि, उदाहरण के लिए, आपके पास एक छोटी टीम है या आप 3 प्लेटफार्मों पर एक ऐप बनाने वाले एकल डेवलपर हैं, तो आपको तकनीक और पर्यावरण को सीखने में बहुत समय व्यतीत करना होगा। आप विभिन्न पुस्तकालयों को प्रबंधित करने और विभिन्न वर्कफ़्लो का उपयोग करने में भी बहुत समय व्यतीत करेंगे (उदाहरण के लिए, iCloud केवल iOS उपकरणों पर काम करता है - कोई Android संस्करण नहीं है)।

हाइब्रिड ऐप्स

हाइब्रिड एप्लिकेशन वेब टेक्नोलॉजीज का उपयोग करके बनाए जाते हैं, लेकिन ऐप स्टोर पर तैनात किए जाते हैं। बीच में एप्लिकेशन को पैकेज करने के लिए एक ढांचा या किसी तरह बैठता है ताकि इसे पारंपरिक ऐप स्टोर पर समीक्षा के लिए भेजा जा सके।

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

मैंने शुरू में Xamarin को सूची में शामिल किया था, लेकिन कार्लोस एडुआर्डो पेरेज़ ने सही ढंग से बताया कि Xamaring नेटिव कोड जेनरेट करता है।

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

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

साथ ही, जटिल विचारों के प्रदर्शन को नुकसान हो सकता है।

रिएक्टिव नेटिव के साथ निर्मित ऐप्स

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

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

प्रदर्शन की तुलना नेटिव ऐप्स से की जा सकती है, क्योंकि आप जो बनाते हैं वह अनिवार्य रूप से एक नेटिव ऐप है जिसे ऐप स्टोर के माध्यम से वितरित किया जाता है।

प्रगतिशील वेब ऐप्स सुविधाएं

पिछले अनुभाग में, आपने मुख्य प्रतियोगियों . को देखा था प्रगतिशील वेब ऐप्स की। तो उनकी तुलना में PWA कैसे खड़े हैं, और उनकी मुख्य विशेषताएं क्या हैं?

याद रखें — वर्तमान में, प्रोग्रेसिव वेब ऐप्स केवल Android उपकरणों के लिए हैं।

सुविधाएं

प्रोग्रेसिव वेब ऐप्स में एक चीज है जो उन्हें उपरोक्त तरीकों से पूरी तरह से अलग करती है:वे ऐप स्टोर पर तैनात नहीं हैं।

यह एक प्रमुख लाभ है। ऐप स्टोर फायदेमंद है अगर आपके पास फीचर होने के लिए पहुंच और भाग्य है, जो आपके ऐप को वायरल कर सकता है। लेकिन जब तक आप शीर्ष 0.001% में न हों, तब तक आपको ऐप स्टोर पर अपना छोटा स्थान रखने से अधिक लाभ नहीं मिलने वाला है।

प्रगतिशील वेब ऐप्स खोज इंजन का उपयोग करके खोजे जा सकते हैं , और जब कोई उपयोगकर्ता आपकी साइट पर आता है जिसमें PWA क्षमताएं होती हैं, डिवाइस के संयोजन में ब्राउज़र उपयोगकर्ता से पूछता है कि क्या वे ऐप को होम स्क्रीन पर इंस्टॉल करना चाहते हैं . यह बहुत बड़ा है, क्योंकि नियमित SEO आपके PWA पर लागू हो सकता है, जिससे भुगतान प्राप्त करने पर निर्भरता बहुत कम हो जाती है।

ऐप स्टोर में नहीं होने का अर्थ है आपको Apple या Google की स्वीकृति की आवश्यकता नहीं है उपयोगकर्ताओं की जेब में होना। आप जब चाहें तब अपडेट जारी कर सकते हैं, बिना मानक अनुमोदन प्रक्रिया से गुजरे जो कि iOS ऐप के लिए विशिष्ट है।

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

प्रगतिशील वेब ऐप्स ऑफ़लाइन चलाएं ।

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

साथ ही, साझा करने की क्षमता उन उपयोगकर्ताओं के लिए एक बेहतर अनुभव प्रदान करती है जो आपके ऐप को साझा करना चाहते हैं, क्योंकि उन्हें केवल एक URL की आवश्यकता होती है।

लाभ

तो उपयोगकर्ताओं और डेवलपर्स को प्रोग्रेसिव वेब ऐप्स की परवाह क्यों करनी चाहिए?

1. PWA हल्के होते हैं। नेटिव ऐप्स का वजन 200MB या उससे अधिक हो सकता है, जबकि PWA KB की सीमा में हो सकता है।
2. कोई मूल प्लेटफ़ॉर्म कोड नहीं है
3. प्राप्ति की लागत कम है (पहली बार अनुभव प्राप्त करने के लिए किसी वेबसाइट पर जाने की तुलना में किसी उपयोगकर्ता को ऐप इंस्टॉल करने के लिए राजी करना कहीं अधिक कठिन है)
4. अपडेट बनाने और जारी करने के लिए काफी कम प्रयास की आवश्यकता है
5. उनके पास नियमित ऐप-स्टोर ऐप्स की तुलना में डीप लिंक के लिए बहुत अधिक समर्थन है

मूल अवधारणाएं

• उत्तरदायी :UI डिवाइस के स्क्रीन आकार के अनुकूल हो जाता है
• ऐप जैसा अहसास :यह एक वेबसाइट की तरह नहीं बल्कि एक ऐप की तरह लगता है (जितना संभव हो)
• ऑफ़लाइन सहायता :यह ऑफ़लाइन अनुभव प्रदान करने के लिए डिवाइस संग्रहण का उपयोग करेगा
• इंस्टॉल करने योग्य :डिवाइस ब्राउज़र उपयोगकर्ता को आपका ऐप इंस्टॉल करने का संकेत देता है
• फिर से जुड़ना :पुश सूचनाएं उपयोगकर्ताओं को एक बार इंस्टॉल होने के बाद आपके ऐप को फिर से खोजने में मदद करती हैं
• खोज योग्य :खोज इंजन और एसईओ अनुकूलन ऐप स्टोर की तुलना में बहुत अधिक उपयोगकर्ता प्रदान कर सकते हैं
• ताजा :ऐप ऑनलाइन होने के बाद खुद को और सामग्री को अपडेट करता है
• सुरक्षित :यह HTTPS का उपयोग करता है
• प्रगतिशील :यह किसी भी पुराने डिवाइस पर काम करेगा, भले ही इसमें कम सुविधाएं हों (जैसे कि एक वेबसाइट के रूप में, इंस्टॉल करने योग्य नहीं)
• लिंक करने योग्य :URL का उपयोग करके इसे इंगित करना आसान है

सेवा कर्मचारी

प्रगतिशील वेब ऐप की परिभाषा का एक हिस्सा यह है कि इसे ऑफ़लाइन काम करना चाहिए।

चूंकि वेब ऐप को ऑफ़लाइन काम करने की अनुमति देने वाली चीज़ सर्विस वर्कर है, इसका मतलब है कि सर्विस वर्कर एक प्रोग्रेसिव वेब ऐप का अनिवार्य हिस्सा हैं ।

चेतावनी:सेवा कार्यकर्ता वर्तमान में केवल क्रोम (डेस्कटॉप और एंड्रॉइड), फ़ायरफ़ॉक्स और ओपेरा द्वारा समर्थित हैं। समर्थन पर अद्यतन डेटा के लिए https://caniuse.com/#feat=serviceworkers देखें।

टिप:सेवा कर्मचारियों को वेब वर्कर्स के साथ भ्रमित न करें। वे पूरी तरह से अलग चीज हैं।

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

सुरक्षा कारणों से, केवल HTTPS साइटें ही सर्विस वर्कर्स का उपयोग कर सकती हैं, और यही कारण है कि HTTPS के माध्यम से एक प्रोग्रेसिव वेब ऐप पेश किया जाना चाहिए।

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

सेवा कर्मियों के लिए संपूर्ण मार्गदर्शिका देखें

ऐप मेनिफेस्ट

ऐप मेनिफेस्ट एक JSON फ़ाइल है जिसका उपयोग आप अपने प्रगतिशील वेब ऐप के बारे में डिवाइस जानकारी प्रदान करने के लिए कर सकते हैं।

आप मेनिफेस्ट में हर . में एक लिंक जोड़ते हैं आपकी वेब साइट के प्रत्येक पृष्ठ पर शीर्षलेख:

<link rel="manifest" href="/manifest.webmanifest">

यह फ़ाइल डिवाइस को बताएगी कि कैसे सेट किया जाए:

• एप्लिकेशन का नाम और संक्षिप्त नाम
• आइकन के स्थान, विभिन्न आकारों में
• प्रारंभिक URL, डोमेन के सापेक्ष
• डिफ़ॉल्ट अभिविन्यास
• स्प्लैश स्क्रीन

उदाहरण

{   "name": "The Weather App",   "short_name": "Weather",   "description": "Progressive Web App Example",   "icons": [{    "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-256x256.png",     "sizes": "256x256",     "type": "image/png"   }],   "start_url": "/index.html?utm_source=app_manifest",   "orientation": "portrait",   "display": "standalone",   "background_color": "#3E4EB8",  "theme_color": "#2F3BA2" }

ऐप मेनिफेस्ट एक W3C वर्किंग ड्राफ्ट है, जिस पर https://www.w3.org/TR/appmanifest/

ऐप शेल

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

उदाहरण के लिए, ऐप्पल के ह्यूमन इंटरफेस गाइडलाइन्स के सुझाव को एक स्प्लैश स्क्रीन का उपयोग करने के लिए लें जो यूजर इंटरफेस जैसा दिखता है। यह एक मनोवैज्ञानिक संकेत प्रदान करता है जो इस धारणा को कम करने के लिए पाया गया था कि ऐप को लोड होने में काफी समय लग रहा था।

कैशिंग

ऐप शेल को कॉन्टेंट से अलग कैश किया जाता है, और इसे सेटअप किया जाता है ताकि कैश से शेल बिल्डिंग ब्लॉक्स को पुनर्प्राप्त करने में बहुत कम समय लगे।

जावास्क्रिप्ट सीखने में रुचि है? मेरी ईबुक jshandbook.com पर प्राप्त करें