ReactJS के साथ Magento के फ्रंट-एंड प्रदर्शन को बढ़ाना

Magento

ई-कॉमर्स समाधान के निर्माण के लिए Magento एक ओपन-सोर्स PHP आधारित प्लेटफ़ॉर्म है। मैगेंटो कंपनी (अब एडोब का हिस्सा) द्वारा निर्मित, यह दुनिया भर में 350,000 से अधिक डेवलपर्स द्वारा उपयोग किया जाता है। यह बिजनेस-टू-कस्टमर और बिजनेस-टू-बिजनेस उद्देश्यों के लिए उच्च अनुकूलन योग्य डिजिटल स्टोरफ्रंट के निर्माण में सक्षम बनाता है। Magento 2, Magento E-Commerce Platform का परिवर्तित संस्करण, ब्रांड की नई वास्तुकला, कोडिंग संरचना और डेटाबेस डिज़ाइन के साथ आता है।

क) सामान्य अवलोकन

Magento के प्लेटफ़ॉर्म को PHP और MySQL पर बनाया गया है। 10 वर्षों के अपने जीवनकाल के दौरान (मार्च 2008 में संस्करण 1.0 जारी किया गया और नवंबर 2015 में संस्करण 2.0, इसमें संरचना और विकास पैटर्न के संदर्भ में परिवर्तन हुए हैं और अब इसके दूसरे प्रमुख संस्करण, Magento 2 में है।

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

बी) उत्पाद खोज

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

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

c) ElasticSearch

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

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

d) API खोजें

Magento के पास REST API समापन बिंदुओं की एक उचित मात्रा है, जिनमें से एक का उपयोग खोज उत्पादों के लिए किया जा सकता है। यह खोज एपीआई एंडपॉइंट के रूप में लेता है क्योंकि डेटा ने खोज मापदंड नामक एक सरणी भेजी है, जिसमें निम्न संरचना है

अनुरोध करने के लिए, ग्राहक को स्टोर के आधार URL से जुड़े एक विशिष्ट पथ पर एक GET अनुरोध भेजना होगा। रास्ता है / आराम / V1 / खोज /? जिसके लिए खोज मापदंड संलग्न हैं।

2. रिएक्टज

क) एक उपकरण के रूप में प्रतिक्रिया

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

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

b) रिएक्ट का वर्चुअल DOM

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

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

c) राज्य प्रबंधन पुस्तकालय

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

3. प्रतिक्रिया और Magento

Magento 2.3 PWA स्टूडियो नामक एक नए टूल का उपयोग करता है। यह एक प्रगतिशील वेब अनुप्रयोग उपकरण है जो डेवलपर्स को "हेडलेस" तरीके से मैगनेटो के साथ काम करने की अनुमति देगा, जिसका अर्थ है कि सीमांत बैकएंड से सीधे जुड़ा नहीं है और एपीआई के माध्यम से संचार किया जाता है।

अब तक, Magento उपयोगकर्ता इंटरफ़ेस का उपयोग करके बनाया गया था जिसे "ब्लॉक" कहा जाता है जिसमें एक टेम्पलेट (phtml फ़ाइल) और एक PHP ब्लॉक होता है। डेटा को अक्सर इन ब्लॉकों और बैकेंड से आने वाले मॉडल और इंटरफेस के माध्यम से पेज लोड पर प्रदान किया जाता है।

PWA स्टूडियो विकास के लिए रिएक्ट, रेडक्स और वेबपैक का उपयोग करता है।

a) प्रोग्रेसिव वेब ऐप (PWA) क्या है?

प्रोग्रेसिव वेब ऐप एक वेब ऐप है जो देशी ऐप की नकल करने वाले महान उपयोगकर्ता अनुभव प्रदान करने के लिए वेब क्षमताओं (HTML, CSS, जावास्क्रिप्ट) को लागू करता है। अधिक विशेष रूप से, PWA मोबाइल होम स्क्रीन पर एक आइकन के साथ एक मूल ऐप की तरह कार्य कर सकता है, स्प्लैश पृष्ठ (ऐप खोलने के बाद), पूर्ण-स्क्रीन डिस्प्ले, पुश सूचनाएँ, और इसी तरह।

PWA के सभी को तीन आवश्यक मानदंड का आश्वासन देना चाहिए: फास्ट (लगभग तुरंत उपयोगकर्ता की बातचीत का जवाब), विश्वसनीय (खराब नेटवर्क स्थितियों के तहत काम करने में सक्षम) और एंगेजिंग (सुचारू ऐप-जैसे अनुभव प्रदान करें)।

PWA और एक देशी ऐप के बीच कुछ प्रमुख अंतर हैं:

• एक मूल ऐप केवल एक निश्चित ऑपरेटिंग सिस्टम (iOS या Android) पर चल सकता है जबकि PWA मोबाइल ब्राउज़र द्वारा संचालित और iOS और Android दोनों पर समर्थित है।
• आपको ऐप स्टोर से मूल एप्लिकेशन डाउनलोड करना होगा; इस बीच, होम स्क्रीन पर जोड़ने के बाद PWA को जल्दी से स्थापित किया जा सकता है।
• देशी ऐप के नवीनतम संस्करण को प्राप्त करने के लिए उपयोगकर्ताओं को अपने ऐप स्टोर तक पहुंच प्राप्त करनी चाहिए लेकिन PWA अपडेट प्राप्त करने के लिए ताज़ा करना चाहिए।
• चूंकि पीडब्ल्यूए एक वेब ब्राउज़र में सही चलता है, इसलिए स्टोर मालिकों के लिए देशी ऐप्स की तुलना में पीडब्ल्यूए को साझा करना और बढ़ावा देना आसान है। PWA डिवाइस की मेमोरी को देशी ऐप्स की तरह काम किए बिना ऑन-डिमांड काम करता है

b) मैगेंटो और PWA

2017 में, Magento ने Google के साथ 2018 के अंत तक Magento प्लेटफ़ॉर्म पर PWA की सर्वोत्तम सुविधाओं को लाने के लिए सहयोग किया। Magento 2.3 को 28 नवंबर, 2018 को रिलीज़ किया गया, जिसमें एक टन प्रभावशाली अपडेट था और Magento PWA इसमें से एक था।

मैगेंटो, वास्तव में, पहले ई-कॉमर्स प्लेटफार्मों में से एक है जो अपने उपयोगकर्ताओं को PWA की क्षमता का पूरी तरह से उपयोग करने में सक्षम बनाता है। Magento ने PWA स्टूडियो भी पेश किया है जो डेवलपर्स के लिए आवश्यक उपकरण प्रदान करता है जो Magento के शीर्ष पर PWA स्टोरफ्रंट को सफलतापूर्वक बनाने और बनाए रखने के लिए है।

c) हमें Magento 2 में PWA क्यों लागू करना चाहिए?

प्रोग्रेसिव वेब एप इंटीग्रेशन मैगेंटो यूजर्स का खासा ध्यान खींच रहा है, खासकर जब मैगेंटो 2 पीडब्ल्यूए स्टूडियो जारी किया गया था। अपनी वेबसाइट को Magento PWA में बदलने के लिए नीचे तीन प्राथमिक प्रेरणाएँ दी गई हैं:

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

डी) मैगेंटो पीडब्ल्यूए पर ध्यान केंद्रित क्यों कर रहा है?

उपरोक्त ग्राफ से पता चलता है कि 2018 में 63.5% ई-कॉमर्स की बिक्री मोबाइल फोन और टैबलेट उपकरणों के माध्यम से हुई। 2019 में, हाथ से पकड़े गए उपकरणों के माध्यम से बिक्री 67.2% तक पहुंचने की उम्मीद है।

चूंकि एम-कॉमर्स अधिक ऑनलाइन बिक्री चला रहा है, इसलिए मैगेंटो ने पीडब्ल्यूए जैसे उन्नत रुझानों को अपने मंच पर लाने के लिए एक बुद्धिमान कदम उठाया है।

ई) कैसे Magento PWA ऑनलाइन व्यापार में सुधार कर सकते हैं?

उल्लेखनीय गति - सभी ऑनलाइन स्टोरों के लिए एक महत्वपूर्ण कारक गति है। यदि किसी मोबाइल साइट को लोड होने में तीन सेकंड से अधिक समय लगता है तो मोबाइल विज़िट में 53% की गिरावट होगी। दूसरे शब्दों में, 53% ग्राहक एक वेबसाइट छोड़ देंगे यदि इसे लोड करने में तीन सेकंड से अधिक समय लगता है। पीडब्ल्यूए यहां एक प्रमुख भूमिका निभाएंगे क्योंकि वे धमाकेदार तेजी से आगे बढ़ रहे हैं। PWA के तेज़ होने का कारण ब्राउज़र-स्तरीय कैशिंग है, जो सेवाकर्मियों की वजह से संभव है। जब उपयोगकर्ता अगली बार इसे खोलता है, तो PWA वेब वर्ज़न के पूर्व-भाग के लिए सेवा कार्यकर्ताओं का उपयोग करता है।

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

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

ऑफलाइन समर्थन - पूरी PWA साइट का एक हिस्सा ऑफ़लाइन काम करने के लिए बनाया जा सकता है। उदाहरण के लिए, ग्राहक आपके ई-कॉमर्स साइट के उत्पादों को ब्राउज़ कर सकते हैं और इसे इंटरनेट कनेक्टिविटी के बिना कार्ट में जोड़ सकते हैं, बशर्ते कि वे पहले पृष्ठों पर गए हों। ग्राहक ऑर्डर को ऑफलाइन भी कर सकते हैं, एक बार इंटरनेट कनेक्ट होने के बाद ऑर्डर प्रोसेस किया जाएगा।

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

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

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

च) ई-कॉमर्स व्यवसायों के लिए पीडब्ल्यूए वादे से क्या लाभ हो सकता है?

चूंकि PWA दो विश्वों के सर्वश्रेष्ठ मेल खाता है - देशी ऐप और मोबाइल वेब, वे एक ही समय में ई-कॉमर्स उद्योग के सामने आने वाली दो महत्वपूर्ण समस्याओं को हल करते हैं:

ü उच्च रूपांतरण दर - मोबाइल एप्लिकेशन पर रूपांतरण की तुलना में मोबाइल वेब पर रूपांतरण कम होते हैं। PWAs सहज अनुप्रयोग-जैसा अनुभव प्रदान करता है, और ऑफ़लाइन समर्थन, गति और क्रॉस-प्लेटफ़ॉर्म संगतता जैसी सुविधाओं के साथ संयुक्त है; रूपांतरण दरें बढ़ सकती हैं।

ü उपयोगकर्ताओं की संख्या में वृद्धि - ग्राहक केवल अच्छी तरह से स्थापित ई-कॉमर्स व्यवसायों के मोबाइल ऐप डाउनलोड करते हैं। पीडब्ल्यूए के साथ, ग्राहक अपने फोन की होम स्क्रीन पर ऑनलाइन स्टोर के पीडब्ल्यूए को एक बटन पर क्लिक करके जोड़ सकते हैं।

छ) एक मैगनेटो 2 वेबसाइट को PWA में बदलने के तरीके?

• Magento 2 PWA एक्सटेंशन स्थापित करें
• Magento 2 PWA स्टूडियो का उपयोग करके खुद का PWA बनाएँ
• Magento 2 PWA थीम का उपयोग करके PWA में साइट बदलें

एच) PWA केस स्टडीज

AliExpress

AliExpress न केवल चीन में बल्कि विश्व स्तर पर सबसे बड़े ई-कॉमर्स व्यवसाय में से एक है। एक बार जब उन्होंने पीडब्ल्यूए को लागू किया, तो उन्होंने दिनों में परिणाम देखे। उनकी वेबसाइट पर बिताए गए समय में 74% की वृद्धि हुई और पृष्ठ दृश्य दोगुने हो गए।

Flipkart

Flipkart भारत का सबसे बड़ा ई-कॉमर्स स्टोर है और उसने PWA के रूप में Flipkart Lite लॉन्च किया है।

साइट पर उपयोगकर्ताओं का समय PWA के साथ 3.5 मिनट तक बढ़ गया, पहले यह मूल ऐप के मामले में 70 सेकंड था। सगाई की दर बढ़कर 40% हो गई और 70% से अधिक रूपांतरण उन ग्राहकों से देखा गया जो ऐड टू होमस्क्रीन फीचर के माध्यम से पहुंचे थे। डेटा का उपयोग भी एक तिहाई तक कम हो गया।

OLX

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

PWA को लागू करने के बाद, बाउंस दर 80% से नीचे चली गई, और विज्ञापनों पर क्लिक थ्रू रेट (CTR) 146% तक बढ़ गई। पुश सूचनाओं की मदद से, सगाई की दर 250% बढ़ गई।

Jumia

जूमिया अफ्रीका में एक लोकप्रिय ई-कॉमर्स स्टोर है, और पीडब्ल्यूए के लाभों को देखने के बाद, उन्होंने पीडब्ल्यूए को अपने अन्य कार्यों जैसे कि जुमिया ट्रैवल में लागू किया है। एंड्रॉइड और iOS दोनों के मूल ट्रैफ़िक के संयुक्त ट्रैफ़िक की तुलना में उनके PWA में ट्रैफ़िक 12 गुना अधिक बढ़ गया। पहले लेनदेन को पूरा करने के लिए डेटा उपयोग पांच गुना और 2x कम डेटा की आवश्यकता थी। इसके अलावा, आवश्यक डेटा भंडारण 25x तक कम हो गया था।

Konga

कोंगा नाइजीरिया में एक बड़ा खिलाड़ी है, और उन्होंने डेटा की खपत को कम करने के लिए PWA का उपयोग किया। PWA को लागू करने से, प्रारंभिक भार में 92% कम डेटा लिया गया और पहला लेनदेन पूरा करने के लिए 82% कम डेटा की आवश्यकता थी।

वे व्यवसाय जो PWA की सीमित विशेषताओं का उपयोग करते हैं

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

एयर बर्लिन

AirBerlin ने अपने ग्राहकों को हवाई अड्डों पर विश्वसनीय ऑफ़लाइन सहायता प्रदान करने के लिए PWA की ऑफ़लाइन कार्यक्षमता का उपयोग किया। ऑफ़लाइन समर्थन जोड़ा गया था और प्रारंभिक लोड समय एक सेकंड से भी कम हो गया था। इसने अपने यात्रियों को बिना इंटरनेट कनेक्टिविटी के बोर्डिंग पास और यात्रा विवरण तक पहुंचने की अनुमति दी।

वॉशिंगटन पोस्ट

वाशिंगटन पोस्ट ने अपने शीर्ष समाचार फ़ीड के लिए PWA डेमो का उपयोग करते हुए एक सरल PWA संस्करण बनाया। उन्होंने गति पर ध्यान केंद्रित किया। पृष्ठ लोड समय को घटाकर 80ms कर दिया गया। आप इस उत्पाद का लाइव डेमो WAPO.com/PWA पर देख सकते हैं। चूंकि उन्होंने एक अविश्वसनीय परिणाम देखा, इसलिए उन्होंने अपने मुख्य मोबाइल वेब अनुभव के लिए PWA का उपयोग करने का निर्णय लिया।