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

38

इसका क्या मतलब है कि Magento एक प्रगतिशील वेब अनुप्रयोग प्लेटफ़ॉर्म बन रहा है?
Magento में PWA की कोड संरचना क्या होगी?
REST API और PWA के साथ क्या सौदा है?

— आदित्य शाह
स्रोत

50

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

मोबाइल ऐप की तरह दिखता है और व्यवहार करता है।
लो लाभ की मूल के मोबाइल , डिवाइस सुविधाओं की आवश्यकता के बिना एक app की दुकान का दौरा करने के अंत उपयोगकर्ता, एक खरीद कर और डाउनलोड यह स्थानीय स्तर पर ।

PWA क्यों?

उपवास
सुरक्षित (उत्तर का दूसरा अंतिम विषय)
उत्तरदायी
क्रॉस-ब्राउज़र संगत
ऑफलाइन मोड (उत्तर में अंतिम विषय की जांच करें)
मोबाइल "इंस्टॉल करें"
साझा करने योग्य सामग्री

यह उत्तर भी शामिल है - PWA के साथ Magento 2.3 की स्थापना

चलिए Flipkart का एक उदाहरण लेते हैं

भारत की सबसे बड़ी ई-कॉमर्स साइट फ्लिपकार्ट ने अपनी वेब उपस्थिति और देशी ऐप को प्रोग्रेसिव वेब एप्लिकेशन में संयोजित करने का फैसला किया, जिसके परिणामस्वरूप रूपांतरणों में 70% की वृद्धि हुई है

Flipkart

पहुंच

विकसित फ्लिपकार्ट लाइट, एक प्रगतिशील वेब ऐप
त्वरित लोड समय के लिए सेवाकर्मियों को जोड़ा गया
चिकना फ्रेमवर्क और स्क्रॉलिंग 60 फ्रेम / सेकंड पर
उपयोगकर्ताओं को अपने होम स्क्रीन पर मोबाइल वेब-पेज जोड़ने के लिए प्रोत्साहित करने के लिए "होम स्क्रीन में जोड़ें" प्रॉम्प्ट बनाया गया

परिणाम

नया प्रगतिशील वेब ऐप फ्लिपकार्ट को रूपांतरण 70% बढ़ाने में मदद करता है

फ्लिपकार्ट ऑफलाइन मोड पर भी काम करता है

सेवा कार्यकर्ताओं को हर नेटवर्क अनुरोध को रोकना और उपयोगकर्ता के ऑफ़लाइन होने पर भी कैश से प्रतिक्रिया देने के लिए स्क्रिप्ट किया जा सकता है।
सेवा कर्मचारी रैपर लाइब्रेरी जो सरल पैटर्न जैसे कि NetworkFirst, CacheFirstया का उपयोग करने में सक्षम बनाता है NetworkOnly। फ्लिपकार्ट ऐप में उपयोग किए गए कैश को ब्राउज़ पेज पर पिछले खोज परिणामों और पिछले कुछ विज़िट किए गए उत्पाद पृष्ठों पर संग्रहीत करने के लिए SW-Toolboxप्रदान करता है ।LRU
टूलबॉक्स में TTL-based कैशे अमान्यकरण तंत्र भी होता है जिसका उपयोग हम तारीख की सामग्री को शुद्ध करने के लिए करते हैं। सेवा कार्यकर्ता निम्न-स्तरीय स्क्रिप्ट योग्य प्राइमेटिव प्रदान करते हैं जो इसे संभव बनाते हैं।

लेकिन ... लेकिन ... लेकिन ...

Magento के PWA स्टूडियो क्या है?

• Magento PWA स्टूडियो परियोजना डेवलपर टूल का एक सेट है जो Magento 2 के शीर्ष पर PWA स्टोरफ्रंट के विकास, परिनियोजन और रखरखाव के लिए अनुमति देता है।

Magento PWA स्टूडियो परियोजना निम्नलिखित उपकरण प्रदान करती है:

PWA मॉड्यूल

इसके हेल्पर्स, सर्वर-साइड कार्यक्षमता जैसे मॉड्यूल हैं और Magento PWA स्टूडियो का उपयोग करके बनाए गए सभी विषयों के लिए एक नींव के रूप में कार्य करता है ।

Pwa-buildpack -

बिल्डपैक Webpackप्लगइन्स और टूल्स का एक सेट है जो Magento PWA थीम के विकास के लिए उपयोग किया जाता है।
यह Magento 2 प्लेटफ़ॉर्म के लिए स्थानीय विकास वातावरण को सेटअप और कॉन्फ़िगर करने के लिए भी उपयोग किया जाता है।

इसमें निम्नलिखित उपकरण शामिल हैं:

PWADevServer
Magento रिज़ॉल्वर
Magento रूट घटक प्लगइन
Magento-लेआउट-लोडर
सेवा कार्यकर्ता प्लगइन

Peregrine - Peregrine Magento-React componentsविशिष्ट कार्यात्मकताओं को संभालने के लिए बनाया गया हैrouting,जैसेroot-components, लेआउट लेआउट, उत्पाद सूची, मूल्य प्रदर्शन, आदि।

Venia विषय -venia-conceptMagento PWA स्टूडियो का उपयोग करके Magento द्वारा बनाई गई एक डेमो थीम है। यह वर्तमान में उपलब्ध कार्यक्षमता, वर्कफ़्लो और पृष्ठों को दिखाता है

PWA स्टूडियो नहीं है

Magento की एक नई रिलीज
एक रिप्लेसमेंट ऑल फ्रंट-एंड
एक डेस्कटॉप अनुप्रयोग

PWA स्टूडियो में प्रयुक्त उपकरण और पुस्तकालय

Webpack

वेबपैक का प्राथमिक कार्य आपके प्रोजेक्ट के मॉड्यूल में निर्भरता से एक या एक से अधिक बंडल बनाना है।

ऐप शेल

कुल आकार छोटा है
आरंभिक लोड तीन फ़ाइलों अनुरोध करता है: login.html, shell-1234.js,3456.js
प्रारंभिक भार को लोड करने की आवश्यकता है: Shell + Router + content
पृष्ठ शैल दृष्टिकोण के साथ खोल पहले दिखाई देता है।

पेज शेल

कुल आकार बड़ा है (डैशबोर्ड में सामग्री डैशबोर्ड -1234.js और 4567.js पर है)
ऐप को ऑफलाइन तैयार होने में अधिक समय लगता है।
आरंभिक लोड केवल दो फ़ाइलों अनुरोध करता है: login.html,login-2345.js
प्रारंभिक भार को लोड करने की आवश्यकता है: Shell + content
shell + contentअनुप्रयोग शैल दृष्टिकोण के साथ की तुलना में दिखाई पहले हो।

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

ReactJs

उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय।

Redux

एक वेब अनुप्रयोग में राज्य के प्रबंधन के लिए एक जावास्क्रिप्ट पुस्तकालय का उपयोग किया जाता है।

GraphQL

क्लाइंट पक्ष पर डेटा क्वेरी भाषा और सर्वर साइड पर एक सेवा परत।

मैग्नेटो में ग्राफकलाइन

प्रमाणीकरण और स्कीमा

फ्रंट-एंड क्वेरीज़ की मात्रा कम करना

चरण रेंडर

डेस्कटॉप ब्राउज़र संगतता

समर्थित नहीं : IE, सफारी

मोबाइल ब्राउज़र संगतता

समर्थित नहीं : Android Webview, IE, Safari

PWA अधिक सुरक्षित हैं

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

PWA - ऑफ़लाइन मोड

ऑफ़लाइन विकिपीडिया एप्लिकेशन PWA का एक अच्छा उदाहरण हैजो ऐप शेल मॉडल का उपयोग करता है।

यह रिपीट विज़िट पर तुरंत लोड होता है, लेकिन गतिशील रूप से जेएस का उपयोग करके सामग्री प्राप्त करता है।
इस सामग्री को भविष्य की यात्राओं के लिए ऑफ़लाइन कैश्ड किया जाता है।

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

PWA के साथ Magento 2.3 इंस्टॉलेशन के साथ शुरू करें

1. DIR / var / www / html / (m203 मेरी Magento 2.3 निर्देशिका है) में निम्नलिखित कमांड दर्ज करें:

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. कमांड लाइन द्वारा Magento स्थापित करें:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. आधार pwa थीम बनाएं, जो PWA वेनिया थीम के लिए उनके माता-पिता होंगे ।

अभी के लिए क्लोन बेस pwa थीम रिपॉजिटरी देता है। https://github.com/magento-research/theme-frontend-pwa

4. डायरेक्टरी बनाएं app/design/frontend/Magento/pwaऔर यहां बेस थीम की सभी फाइलें और डायरेक्टरीज कॉपी करें।

चेक बेस बेस थीम उपलब्ध है या नहीं।
Run: php bin/magento setup:upgrade
और अपने Magento के व्यवस्थापक- > सामग्री-> थीम्स पर नेविगेट करें

5. PWA स्टूडियो प्रोजेक्ट डाउनलोड करें।

6. अपने Magento इंस्टॉलेशन के रूट डायरेक्टरी में नेविगेट करें और प्रोजेक्ट के मॉड्यूल डायरेक्टरी (pwa-studio / package / pwa-मॉड्यूल) से जुड़कर एक Pwa सिम्लिंक फ़ोल्डर बनाएं।

इस निर्देशिका से मैंने अपना कमांड चलाया - / var / www / html / m230
यह एक निर्देशिका है जहाँ मेरा pwa डाउनलोड स्रोत / var / www / html / PWA / है

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. लिंक विषय निर्देशिका के रूप में अच्छी तरह से। अपने Magento स्थापना की मूल निर्देशिका के लिए नेविगेट करें और परियोजना के मॉड्यूल निर्देशिका (pwa-स्टूडियो / संकुल / वेनिया-अवधारणा) से जोड़ने वाला Pwa सिम्लिंक फ़ोल्डर बनाएँ।

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. अब अपने पीएवी-स्टूडियो प्रोजेक्ट के वेनिया-कॉन्सेप्ट डायरेक्टरी में नेविगेट करें, .env.distएक नई .envफाइल में कॉपी करें और URL के साथ वेरिएबल्स को अपने Magento डेवलपमेंट स्टोर में अपडेट करें।

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. इंस्टॉल करें venia थीम और Pwa मॉड्यूल:

run: php bin/magento setup:upgrade

हम देख सकते हैं कि वेनिया थीम सफलतापूर्वक स्थापित है।

10. से venia विषय कॉन्फ़िगर करें admin->Content->Configuration

11. पथ ( /var/www/html/PWA/pwa-studio-master) चलाने के लिए नेविगेट करें :

npm install

या

npm install webpack-dev-server -g

12. और अंत में नेविगेट करें /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

बधाई हो! आपने वेनिआ थीम परियोजना के लिए अपना विकास वातावरण स्थापित किया है।

— आदित्य शाह
स्रोत

4

अच्छा आर एंड डी !! यह डेवलपर्स के लिए मददगार होगा।

— सनी रहवर

3

@ आदित्यशाह बहुत अच्छा जवाब। :)

— प्रिंस पटेल

यह कदम न तो काम कर रहा है: ln -s pwa-studio / package / pwa-मॉड्यूल ऐप / डिज़ाइन / फ्रंटएंड / मैगेंटो / वेनिया न ही इसका निर्माण स्थल थीम

— हसन अली शहजाद

कृपया चरण संख्या

— आदित्य शाह

@ AdityaShah उपरोक्त चरणों का पालन करने के बाद, मैं ब्राउज़र द्वारा साइट से कनेक्ट करने में सक्षम नहीं हूं। कृपया संलग्न स्क्रीनशॉट prnt.sc/m4tlbx

— user00247

6

PWA - प्रोग्रेसिव वेब एप्लिकेशन आम तौर पर वेब एप्लिकेशन है जो उपयोगकर्ता समृद्ध वेब का अनुभव करता है। के रास्ते में:

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

"इसका क्या मतलब है कि Magento एक प्रगतिशील वेब अनुप्रयोग प्लेटफ़ॉर्म बन रहा है?"

जैसा कि मैगेंटो 2.3 संस्करण की रिलीज़ की तैयारी कर रहा है, यह एक "PWA" सुविधा है, जिसमें उपयोगकर्ता सहभागिता का एक तरीका है, दृश्यपटल को अधिक कुशल बनाना है।

REST API और PWA के साथ क्या सौदा है?

जैसा कि मैगनेटो "PWA" का उपयोग कर रहा है, यह "ग्राफ़ / एपीआई" को भी जोड़ रहा है, "REST / SOAP" के फ्रंट-एंड डेवलपमेंट साइड एपीआई विकल्प के रूप में "ग्राफलाइन" एपीआई प्रदान करने के लिए।

"PWA" और "magento2.3 ओपन-कॉमर्स" की नई सुविधा के बारे में अधिक विस्तृत जानकारी प्राप्त करने के लिए आप इस Magento के आधिकारिक पृष्ठ पर जा सकते हैं ।

— हिमांशु
स्रोत

REST API सेवा संपर्क और इंटरफ़ेस और मॉडल

— आदित्य शाह

फिर सेवा संपर्क पद्धति का पदावनत किया जाएगा?

— आदित्य शाह

1

@ AdityaShah नहीं, यह वहां होगा जहां ग्राफकॉन एपीआई फ्रंटएंड डेवलपमेंट एपीआई के लिए है यह "डेटा क्वेरी लैंग्वेज" की तरह है, ग्राफकलाइन आपको उस डेटा की संरचना को परिभाषित करने की अनुमति देता है जिसकी आपको आवश्यकता है।

If you run a REST call such as GET /V1/products/:sku on a simple product, the system might fetch more than 100 lines of data. If all you need is the current price, the call has returned significantly more information than you need. With GraphQL, a query against the same SKU could return just the price.

— हिमांशु

ओह ओकेम तो हम एपीआई को कस्टमाइज़ कर सकते हैं और नए बना सकते हैं जैसे हम अभी कर रहे हैं .. और वहां पर ग्राफ़किन लागू करें

— आदित्य शाह

आप ग्राफक के बारे में और अधिक यहाँ से पढ़ सकते हैं devdocs.magento.com/guides/v2.3/graphql/index.html

— हिमांशु

4

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

वेब का अर्थ है कि यह वेब की भाषाओं (HTML, CSS, जावास्क्रिप्ट) में लिखा गया है। यह आपको एक ऐसी साइट बनाने की अनुमति देता है जो एक ऐप को केवल एक प्लेटफ़ॉर्म पर प्रतिबंधित किए बिना अधिक ऐप जैसी कार्यक्षमता देता है, जैसे कि iOS या Android।

एप्लिकेशन का मतलब है कि यह दुकानदार के डिवाइस या कंप्यूटर पर कोड इंस्टॉल करता है और चलाता है। ऐसा करने से अतीत के एकल-पृष्ठ जावास्क्रिप्ट ऐप्स की तुलना में अधिक गति और क्षमता पैदा होती है।

PWA अनिवार्य रूप से नियमित वेब पेज और मोबाइल ऐप का एक हाइब्रिड है, जो वेब के लिए मोबाइल ऐप जैसे अनुभवों के लिए अनुमति देता है।

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

आप https://github.com/magento-research/pwa-studio पर कोड संरचना की जांच कर सकते हैं

Magento PWA, PWA के लिए REST API के विकल्प के रूप में GraphQL का उपयोग कर रहा है ।

मैगेंटो PWA पर अधिक जानकारी के लिए, आप निम्नलिखित लिंक से जा सकते हैं:

— अंशु मिश्रा
स्रोत

तो क्या इसका मतलब है कि मैगेंटो 2.3 एप्लीकेशन के साथ आएगा?

— आदित्य शाह

हाँ, PWA को 2.3 के साथ रिलीज़ किया जाएगा, लेकिन निश्चित नहीं है कि इसे Open Source के साथ भी बंडल किया जाएगा। जो मैं सोच रहा हूं कि यह ओपन सोर्स के लिए कॉमर्स और एडऑन के साथ बंडल किया जाएगा।

— अंशु मिश्रा

क्योंकि यदि Magento PWA, PWA के लिए REST API के विकल्प के रूप में GraphQL का उपयोग कर रहा है। तब REST API सेवा संपर्क और इंटरफ़ेस और मॉडल के आधार पर काम कर रहा है .. तब सेवा संपर्क पद्धति का पदावनत किया जाएगा?

— आदित्य शाह

नहीं, मुझे ऐसा नहीं लगता। मुझे लगता है कि मैगेंटो जरूरत के अनुसार उनका उपयोग करेगा और ग्राफकॉल के अपने नियम और विपक्ष हैं। मेरे विचार में, वे दोनों का उपयोग और रख रहे होंगे।

— अंशु मिश्रा

3

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

PWAs ऑफ़र फास्ट, फ्रिक्शनलेस, "ऐप-लाइक" अधिक ट्रैफ़िक, उच्च रूपांतरण और तेज़ पेज लोड करने वाले अनुभव मैगेंटो व्यापारियों के लिए

इसलिए आम तौर पर, Magento अपना रूप बदल रहा है और रूपांतरण बढ़ा रहा है। इसके बारे में यहाँ और पढ़ें ।

PWA आमतौर पर जावास्क्रिप्ट, सीएसएस, और HTML के साथ बनाया जाता है जिनका प्रदर्शन और उपयोगिता का एक स्तर होता है जो लगभग देशी ऐप्स के समान होता है। PWA में ख़ासियतें शामिल हैं:
1. वे एक प्रगतिशील कोडबेस के साथ अधिकांश (यदि सभी नहीं हैं) ब्राउज़रों और उपकरणों (मोबाइल और डेस्कटॉप) के साथ काम करते हैं (अक्सर रिएक्ट एसएस की तरह घटक)
2. सभी स्क्रीन को फिट करें और एक उत्तरदायी डिज़ाइन का उपयोग करके कारकों को ऑफ़लाइन कनेक्टिविटी (HTTPS आवश्यक) सक्षम करने के लिए सेवा कार्यकर्ताओं का उपयोग करें
3. एक ऐप जैसा अनुभव प्रदान करें, जो पुश-नोटिफिकेशन जैसे री-इंगेजमेंट टूल का लाभ उठाता है
4. उपयोग किए गए संसाधनों का वर्णन करने के लिए एक वेब ऐप प्रकट करना

आप यहां और अधिक पढ़ सकते हैं।

SOAP (सिंपल ऑब्जेक्ट एक्सेस प्रोटोकॉल) और REST (रिप्रेजेंटेटिव स्टेट ट्रांसफर) सबसे सामान्य वेब सेवा संचार प्रोटोकॉल हैं। अधिकांश भाग के लिए REST को SOAP के लिए पसंद किया जाता है ( यहाँ समझाया गया है )। इसलिए यह तर्कसंगत है कि PWAs जैसी नई तकनीक के साथ REST API को हाथ से इस्तेमाल किया जाए।

— एलीशा सेनू
स्रोत

लेकिन REST API और PWA के साथ क्या सौदा है? क्योंकि मैगनेटो पहले से ही मोबाइल एप्लिकेशन के लिए अन्य एप प्रदान कर रहा है।

— आदित्य शाह

PWA में मर्ज हो जाएगा REST एपि?

— आदित्य शाह

हां, PWA, REST और SOAP API दोनों का उपभोग करते हैं, लेकिन REST को प्राथमिकता दी जाती है।

— एलिशा सेनू

2

अपने प्रश्न के केवल एक हिस्से का जवाब देने के लिए लेकिन अधिक विशिष्ट 2 Magento।

PWA भविष्य के Magento 2.3 रिलीज के लिए धन्यवाद का निर्माण करना आसान होगा।

https://www.degdigital.com/insights/magento-2-3/

इस लेख से उद्धृत:

PWA

प्रोग्रेसिव वेब ऐप आधुनिक प्रौद्योगिकी सुविधाओं का लाभ उठाने के लिए बनाया गया एक एप्लिकेशन है जो उन डिवाइसों पर "उत्तरोत्तर" तराजू लगाता है जहां वे सुविधाएँ उपलब्ध नहीं हैं। यह डेटा के कैशिंग के लिए भी अनुमति देता है इसलिए वेबसाइट का उपयोग (आंशिक या पूरी तरह से) एक ऑफ़लाइन मोड में किया जा सकता है जब इंटरनेट सेवा धब्बेदार या अस्तित्वहीन होती है। यह आम तौर पर एक आधुनिक जावास्क्रिप्ट फ्रेमवर्क / स्टैक के साथ वेबसाइट के सामने के छोर को लिखकर पूरा किया जाता है जो बैक-एंड एप्लिकेशन से अलग है। यह जावास्क्रिप्ट एप्लिकेशन उपर्युक्त कार्य को पूरा करने के लिए नए (ईश) ब्राउज़र सुविधाओं का उपयोग कर सकता है।

मैगेंटो ने इसके कई लाभों को स्वीकार किया है, और 2017 के उत्तरार्ध में PWA स्टूडियो के नाम से इसे बनाने के प्रयासों की घोषणा की। PWA स्टूडियो में Magento के फ्रंट एंड के लिए PWA को विकसित करने और तैनात करने के उपकरण होंगे। PWA स्टूडियो के साथ एक हल्का (नहीं सुविधा पूर्ण) डेमो साइट आएगी। तत्काल लाभ फ्रंट-एंड प्रदर्शन में एक बड़ी वृद्धि होगी और नए मैगेंटो फ्रंट-एंड डेवलपर्स ऑनबोर्डिंग की गति में 10X के करीब वृद्धि होगी।

संबंधित सामग्री: PWAs यहाँ हैं और वे सब कुछ बदल रहे हैं

GraphQL

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

Magento वर्तमान में REST और SOAP API अनुरोधों का समर्थन करता है जो सेवा अनुबंध का उपयोग करते हैं। हालांकि, ग्राफकॉइन का समर्थन करने के लिए, मैगेंटो एक पूरी तरह से नई परत लिख रहा है जो सीधे क्वेरी एपीआई के लिए इंटरफेस करता है। ग्राफक्यूड क्रियान्वयन इस बात पर आधारित होगा कि कैसे एक PWA दृश्य डेटा की आवश्यकता को पुनः प्राप्त करेगा।

— फ्रेंक गार्नियर
स्रोत

1

प्रोग्रेसिव वेब एप्लिकेशन वेब ब्राउज़र क्षमताओं का उपयोग करता है और उपयोगकर्ताओं को एक मोबाइल ऐप जैसा अनुभव प्रदान करता है।

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

एक उपयोगकर्ता ब्राउज़र की पसंद की परवाह किए बिना एक मूल एप्लिकेशन की तरह ही प्रगतिशील वेब एप्लिकेशन लॉन्च कर सकता है।

डेमो परीक्षण के लिए, आप इस लिंक पर जा सकते हैं: यहां क्लिक करें

— रोहन हापानी
स्रोत

1

यह I / O 2017 I / O 2017 के दौरान लॉन्च किया गया एक Google उत्पाद है: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

यह HTML पर आधारित एक वेबसाइट है।

यह एक डिवाइस में कैश स्टोर करता है ताकि कोई इसे ऑफलाइन भी इस्तेमाल कर सके।

हालांकि, यह पहली बार धीमा है जो दूसरी यात्रा के दौरान होगा।

जब डिवाइस को इंटरनेट मिलता है तो यह अपडेट हो रहा होता है इसलिए APP जैसी नई चीज को अपडेट करने की जरूरत नहीं होती है।

यदि डिवाइस को इंटरनेट मिलता है तो यह सर्वर पर सभी ईमेल को चलाता है अगर कोई व्यक्ति कुछ ऑफ़लाइन पोस्ट करता है।

आखिरकार, निर्मित iPhone / एंड्रॉइड ऐप की आवश्यकता नहीं है।

सीमा यह केवल HTML फ़ाइल का समर्थन करता है। इसलिए डिवाइस को HTML का समर्थन करना चाहिए।

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

— जुबेर बंदी
स्रोत

1

सेटअप PWA (लिनक्स ओएस)

चरण 1: Magento 2.3.1 स्थापित करें

चरण 2: नोड को स्थापित / अपग्रेड करें

नोड अपग्रेड करने के लिए npm से n मॉड्यूल का उपयोग करें

sudo npm install n -g

नवीनतम स्थिर संस्करण के लिए:

sudo n stable

नवीनतम संस्करण के लिए:

sudo n latest

चरण 3: यार्न स्थापित / अपडेट करें:

sudo npm install --global yarn

sudo npm upgrade --global yarn

चरण 4: नोड-जिप स्थापित करें - Node.js देशी एडऑन बिल्ड टूल

sudo npm install -g node-gyp

चरण 5: PWA स्टूडियो रिपॉजिटरी को क्लोन करें

Html रूट पर जाएं और चलाएं:

git clone https://github.com/magento-research/pwa-studio.git

इसे चलाने के बाद आपको pwa-studio फ़ोल्डर मिलेगा

चरण 6: PWA स्टूडियो निर्भरताएँ स्थापित करें

sudo yarn install

चरण 7: Magento बैकएंड सर्वर को निर्दिष्ट करें

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

उदाहरण आदेश:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

.env फ़ाइल में परिवर्तन (यह आपका Magento URL होगा, व्यवस्थापक url नहीं):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

स्टेप 8: अब एक बिल्ड बनाएं

sudo yarn run build

चरण 9: सर्वर चलाएँ

sudo yarn run watch:venia

केवल वेनिया स्टोरफ्रंट डेवलपमेंट का माहौल शुरू करता है।

sudo yarn run watch:all

पूर्ण PWA स्टूडियो डेवलपर अनुभव चलाता है, जिसमें वेनिया हॉट-रीलोडिंग और समवर्ती बिल्डपैक / पेरेग्रीन रीबिल्ड शामिल हैं।

sudo yarn run build && yarn run stage:venia

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

एक बार जब आप उपरोक्त कमांड को चलाते हैं तो आपको PWA द्वारा निर्मित पुण्य url मिलेगा।

नोट: यदि आप रूड यूजर हैं तो sudo का उपयोग करें।

Magento 2 आधिकारिक देव डॉक्स का पालन करें:

https://devdocs.magento.com/guides/v2.3/pwa/

— सफ़ल झा
स्रोत

1

अरी धन्यवाद सरजी :)

— आदित्य शाह

1

दुआ मुख्य यद रक्खा :)

— सफ़ल झा