ऐप्स आपके फोन पर हावी हैं। लंबे समय तक, ऐप्स ने आपके डेस्कटॉप या ब्राउज़र को उसी तरह प्रभावित नहीं किया। हाल के वर्षों में यह बदल गया है। प्रोग्रेसिव वेब ऐप्स (PWA) कद में बढ़ रहे हैं और सभी प्रकार की वेबसाइटों के साथ हमारी बातचीत को बदल रहे हैं।
लेकिन प्रोग्रेसिव वेब ऐप वास्तव में क्या है? एक PWA ऐसा क्या करता है जो एक वेबसाइट नहीं करती? यहां आपको प्रोग्रेसिव वेब ऐप्स के बारे में जानने की जरूरत है।
प्रोग्रेसिव वेब ऐप क्या है?
प्रोग्रेसिव वेब ऐप्स वेब एप्लिकेशन हैं जो यूजर्स को एक नियमित साइट प्रदान करते हैं लेकिन एक नेटिव मोबाइल ऐप के रूप में दिखाई देते हैं। PWAs एक नेटिव मोबाइल ऐप की उपयोगिता को आधुनिक ब्राउज़र फीचर सेट में लाने का प्रयास करते हैं, जिससे विकास के दोनों क्षेत्रों में प्रगति का पूरा लाभ उठाया जाता है।
तो एक PWA को क्या परिभाषित करता है?
- यूनिवर्सल: एक PWA को हर यूजर के लिए निर्बाध रूप से (खैर, लगभग) काम करना चाहिए, चाहे उनका ब्राउज़र कोई भी हो।
- रेस्पॉन्सिव: PWAs को किसी भी डिवाइस के साथ काम करना चाहिए, जैसे आपका लैपटॉप, टैबलेट, स्मार्टफोन, आदि।
- डिज़ाइन: डिज़ाइन को नेटिव मोबाइल ऐप्स की नकल करनी चाहिए, जिसका अर्थ है सुव्यवस्थित, आसानी से खोजे जाने वाले मेनू, उन्नत सुविधाओं के लिए सरल इंटरएक्टिविटी के साथ।
- सुरक्षित: PWAs को यूजर डेटा को सुरक्षित रखने के लिए HTTPS का उपयोग करना चाहिए।
- खोजने योग्य: यूजर्स PWAs ढूंढ सकते हैं, और वे एक एप्लिकेशन के रूप में आसानी से पहचाने जाने योग्य हैं (एक "साइट" के बजाय)।
- एंगेजमेंट: एक PWA के पास पुश नोटिफिकेशन जैसे नेटिव एंगेजमेंट फीचर्स तक पहुंच होनी चाहिए।
- अपडेट्स: PWAs अपडेटेड रहते हैं, एक सेवा या साइट के नवीनतम संस्करणों की सेवा करते हैं।
- इंस्टॉलेशन: यूजर्स को ऐप स्टोर की आवश्यकता के बिना PWA को अपनी होम स्क्रीन पर आसानी से "इंस्टॉल" करने की अनुमति दें।
- शेयरिंग: PWAs को शेयर करने के लिए केवल एक URL की आवश्यकता होती है, बिना किसी इंस्टॉलेशन के।
जैसा कि आप देख सकते हैं, PWAs का लक्ष्य यूजर्स को नेटिव ऐप की सुव्यवस्थित विशेषताओं और इंटरफेस डिज़ाइन के साथ एक पूर्ण वेबसाइट अनुभव प्रदान करना है।
प्रोग्रेसिव वेब ऐप कैसे काम करता है?
प्रोग्रेसिव वेब ऐप्स की कुंजी ब्राउज़र सर्विस वर्कर्स हैं।
एक सर्विस वर्कर एक स्क्रिप्ट है जो आपके ब्राउज़र के बैकग्राउंड में चलती है, "एक वेब पेज से अलग, उन सुविधाओं के लिए दरवाजा खोलती है जिनके लिए वेब पेज या यूजर इंटरैक्शन की आवश्यकता नहीं होती।" आप वर्तमान में पुश नोटिफिकेशन और बैकग्राउंड सिंक जैसे सर्विस वर्कर्स का उपयोग कर सकते हैं, लेकिन तत्काल PWA भविष्य इन स्क्रिप्ट्स को अधिक शक्ति देता है।
इस प्रकार, सर्विस वर्कर्स PWA मानक की नींव बनाते हैं, लगभग तात्कालिक परिणामों के लिए वेब कैश का उपयोग करते हैं।
सर्विस वर्कर्स से पहले, गो-टू ब्राउज़र कैश स्क्रिप्ट एप्लिकेशन कैश (या ऐप कैश) थी। ऐप कैश ऑफलाइन-फर्स्ट सेवाओं की एक विस्तृत श्रृंखला में फीचर करता है लेकिन कुछ हद तक एरर-प्रोन था। इसके अलावा, ऐप कैश की कई प्रसिद्ध सीमाएं हैं, जैसा कि ए लिस्ट अपार्ट बताता है।
लेकिन डेवलपर्स के लिए मुख्य समस्या यह है कि AppCache वास्तव में कैसे काम करता है, इसके साथ सीधी बातचीत की कमी, डेवलपर्स को उत्पन्न होने वाली समस्याओं को सटीक रूप से ठीक करने से रोकती है। बदले में, पूर्ण ऑफलाइन कार्यक्षमता वाली वेबसाइटें और सेवाएं एक जोखिम भरा विकल्प थीं।
हालांकि, सर्विस वर्कर्स केवल तब तक चलते हैं जब तक उनकी कार्रवाई की आवश्यकता होती है। एक PWA में, जब आप किसी चीज़ पर क्लिक करते हैं या किसी सुविधा का उपयोग करते हैं, तो एक सर्विस वर्कर एक्शन में आ जाता है। सर्विस वर्कर (याद रखें, यह एक स्क्रिप्ट है) इवेंट को प्रोसेस करता है, यह तय करता है कि ऑफलाइन कैश अनुरोध को पूरा कर सकता है या नहीं। विचार यह है कि PWA के लिए चुनने के लिए कई ऑफलाइन कैश हैं, जिससे ऑफलाइन कार्यक्षमता की एक बहुत व्यापक श्रृंखला मिलती है।
इसके अलावा, कैश केवल ऑफलाइन स्पीड बूस्ट के लिए नहीं है। उदाहरण के लिए, आप एक PWA पर जाते हैं, लेकिन आपका कनेक्शन बेहद खराब है। सर्विस वर्कर एक पिछले कैश को सर्व करता है, पूरी तरह से कार्यात्मक, आपके अनुभव को बाधित किए बिना।
प्रोग्रेसिव वेब ऐप ब्राउज़र सपोर्ट
प्रोग्रेसिव वेब ऐप का उपयोग करने के लिए दो आवश्यकताएं हैं: एक संगत ब्राउज़र और एक PWA-इनेबल्ड सेवा।
पहले, ब्राउज़र्स को देखते हैं। PWA ब्राउज़र सपोर्ट चेक करने के लिए आपके पास दो विकल्प हैं। पहला है जेक आर्किबाल्ड का Is Service Worker Ready? जो प्रमुख ब्राउज़र्स, प्लस सैमसंग इंटरनेट की PWA-रेडी स्थिति को आसानी से प्रदर्शित करता है।
PWA ब्राउज़र सपोर्ट के अधिक विस्तृत अवलोकन के लिए, आपको कैन आई यूज़ देखना चाहिए, एक वेबसाइट जो विभिन्न वेब और ब्राउज़र तकनीक के कार्यान्वयन को ब्राउज़र वर्जन द्वारा सूचीबद्ध करने में विशेषज्ञता रखती है। उदाहरण के लिए, यदि आप सर्च बार में "सर्विस वर्कर्स" इनपुट करते हैं, तो आपको एक टेबल मिलती है जो प्रत्येक ब्राउज़र द्वारा PWA सर्विस वर्कर्स को लागू किए गए वर्जन नंबर को प्रदर्शित करती है।
कैन आई यूज़ सर्विस वर्कर्स टेबल पुष्टि करता है कि सभी प्रमुख ब्राउज़र PWAs का समर्थन करते हैं। यह कई वैकल्पिक डेस्कटॉप ब्राउज़र्स और मोबाइल ब्राउज़र्स के लिए PWA सपोर्ट को भी दर्शाता है।
इसे थोड़ा और तोड़ते हैं:
- डेस्कटॉप ब्राउज़र (पूर्ण समर्थन): क्रोम, फायरफॉक्स, ओपेरा, एज, सफारी
- डेस्कटॉप ब्राउज़र (आंशिक समर्थन/पुराना वर्जन): QQ ब्राउज़र, बाइडू ब्राउज़र
- मोबाइल ब्राउज़र (पूर्ण समर्थन): क्रोम, फायरफॉक्स, सफारी, UC ब्राउज़र, सैमसंग इंटरनेट, मिंट ब्राउज़र, वीचैट
- मोबाइल ब्राउज़र (आंशिक समर्थन/पुराना वर्जन): QQ ब्राउज़र, एंड्रॉइड ब्राउज़र, ओपेरा मोबाइल
तो, सभी प्रमुख ब्राउज़र PWAs का समर्थन करते हैं। माइक्रोसॉफ्ट एज और सफारी पूर्ण समर्थन सूची में सबसे हाल के जोड़ हैं। इसके विपरीत, QQ ब्राउज़र और बाइडू ब्राउज़र दोनों अब पुराने वर्जन का उपयोग करते हैं और जैसे दूसरे स्तर पर गिर गए हैं।
प्रोग्रेसिव वेब ऐप कैसे ढूंढें और इंस्टॉल करें
अब जब आप जानते हैं कि किस ब्राउज़र का उपयोग करना है, तो आप PWA खोजने और इंस्टॉल करने के बारे में सोच सकते हैं। इस उदाहरण के लिए, मैं गूगल क्रोम के साथ एक सैमसंग गैलेक्सी S8 का उपयोग करूंगा।
प्रोग्रेसिव वेब ऐप्स हर जगह हैं। कई कंपनियों ने अपनी साइटों और सेवाओं को एक प्रोग्रेसिव वेब ऐप वर्जन पेश करने के लिए अनुकूलित किया है। कई मामलों में, आप पहली बार एक PWA का सामना तब करेंगे जब आप किसी सेवा के होमपेज या मोबाइल साइट पर जाएंगे, जो होम स्क्रीन में जोड़ें डायलॉग बॉक्स को ट्रिगर करता है।
नीचे दिए गए वीडियो को देखें कि जब आप ट्विटर मोबाइल साइट पर जाते हैं तो क्या होता है।
बेशक, अनगिनत साइट्स पर जाकर होम स्क्रीन ट्रिगर देखने की उम्मीद करना उपयोगी नहीं है। वास्तव में, यह बिल्कुल समय लेने वाला है। शुक्र है, आपको ऐसा करने की ज़रूरत नहीं है क्योंकि PWAs को कैटलॉग करने के लिए समर्पित कुछ साइट्स हैं।
पहले, आउटवेब आज़माएं। यह PWAs की एक बहुत अच्छी रेंज सूचीबद्ध करता है, जिसमें नए विकल्प बार-बार दिखाई देते हैं। अगला, pwa.rocks आज़माएं। इसमें एक छोटा चयन है, लेकिन कुछ आसान PWAs जिन्हें आप अपने डिवाइस में जोड़ना चाहेंगे।
इसके अलावा, जनवरी 2019 में, एंड्रॉइड के लिए क्रोम 72 ट्रस्टेड वेब एक्टिविटी (TWA) के साथ शिप हुआ। TWA क्रोम टैब्स को स्टैंडअलोन मोड में खोलने की अनुमति देता है। बदले में, यह PWAs को गूगल प्ले ऐप स्टोर में प्रदर्शित होने की अनुमति देता है। गूगल प्ले पर दिखाई देने वाले पहले कुछ PWAs ट्विटर लाइट, इंस्टाग्राम लाइट, और गूगल मैप्स गो थे, जिनके साथ समय के साथ और अधिक दिखाई देने के लिए तैयार हैं।
क्या प्रोग्रेसिव वेब ऐप्स नेटिव ऐप्स को रिप्लेस कर देंगे?
प्रोग्रेसिव वेब ऐप्स आपके ब्राउज़र और एक नेटिव मोबाइल ऐप के बीच एक उत्कृष्ट हाइब्रिड कदम हैं। क्या PWAs पूरी तरह से नेटिव ऐप्स को रिप्लेस कर देंगे? यह मुझसे एक कठिन नहीं है। PWAs एक लाइटवेट पेशकश के रूप में महान हैं, लेकिन यह देखते हुए कि वे वर्तमान में मुख्य रूप से मौजूदा साइटों और सेवाओं को दोहराने पर ध्यान केंद्रित करते हैं, वे नेटिव ऐप्स को रिप्लेस नहीं करेंगे।
कम से कम, अभी के लिए नहीं।
PWAs काम करते हैं। PWA Stats पर उपलब्ध डेटा इसका समर्थन करता है। यहां कुछ दिलचस्प संख्याएं हैं जो दर्शाती हैं कि PWAs आमतौर पर उपयोग की जाने वाली वेबसाइटों के साथ हमारी बातचीत को कैसे बदल रहे हैं:
- ट्रिवागो ने अपने PWA को होम स्क्रीन पर जोड़ने वाले यूजर्स के लिए 150 प्रतिशत एंगेजमेंट वृद्धि देखी।
- फोर्ब्स का PWA "होमपेज सिर्फ 0.8 सेकंड में पूरी तरह से लोड होता है," जबकि प्रति विजिट इंप्रेशन 10 प्रतिशत बढ़ गए हैं। फोर्ब्स के PWA ने यूजर सेशन की लंबाई को दोगुना भी देखा।
- ट्विटर लाइट ने प्रति सेशन पेज में 65 प्रतिशत की वृद्धि देखी, ट्वीट्स में बड़े पैमाने पर 75 प्रतिशत की वृद्धि के साथ। यह "3G पर 5 सेकंड से कम समय में इंटरैक्टिव" भी है।
- अलीबाबा ने मोबाइल रूपांतरण में 76 प्रतिशत की वृद्धि देखी।
PWAs अभी तक मुख्यधारा नहीं हैं। लेकिन उनके द्वारा प्रदान किए जाने वाले लाभों की विशाल श्रृंखला के साथ, जैसे आपके डिवाइस पर स्थान बचाना, आप भविष्य में उनके बारे में अधिक सुनेंगे।
