वर्डप्रेस और WooCommerce के आधार पर प्रगतिशील वेब ऐप्स बनाना चाहते हैं? यहाँ है कैसे (w / कोड उदाहरण)

वर्डप्रेस और WooCommerce के आधार पर प्रगतिशील वेब ऐप्स बनाना चाहते हैं? यहाँ है कैसे (w / कोड उदाहरण)

वर्डप्रेस और WooCommerce के आधार पर प्रगतिशील वेब ऐप्स बनाना चाहते हैं? यहाँ है कैसे (w / कोड उदाहरण)
СОДЕРЖАНИЕ
02 июня 2020

जैसा कि आप शायद पहले से ही बता सकते हैं, यह पोस्ट थोड़ा सा है "उन्नत" पक्ष, लेकिन यह एक ऐसे विषय से निपटता है जो बहुत दिलचस्प है और हमारी वेबसाइट और / या ऐप्स के लिए इस पूरे मोबाइल-पहले पथ पर चलने के लिए एक नई शाखा प्रस्तुत करता है।.


जिस चीज को हम कहते हैं "प्रतिक्रियात्मक वेब डिज़ाइन" कुछ समय के लिए हमारे साथ रहा है, और खेल में इस स्तर पर, अधिकांश डेवलपर्स / वेबसाइट / वेब-टूल पहले से ही इसके सिद्धांतों को पूरी तरह से एकीकृत कर चुके हैं। लेकिन यह अंत का खेल है "मोबाइल के अनुकूल"? या शायद यह सिर्फ शुरुआत है.

ठीक है, Google सोचता है कि यह बाद का है। और आने वाले प्रगतिशील वेब ऐप्स में!

जिस पोस्ट को आप पढ़ने जा रहे हैं, वह हमारा दूसरा संस्करण है "देव घर के अंदर" पहल (यहाँ पिछले एक) इसे एलेक्जेंड्रा एंगेल ने एक साथ रखा था Appticles.com.

एलेक्जेंड्रा दर्ज करें:

वर्डप्रेस और WooCommerce पर प्रगतिशील वेब ऐप्स

प्रगतिशील वेब एप्स को समझना

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

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

Google उनका वर्णन करता है जैसा कि किया जा रहा है:

  • विश्वसनीय – तुरंत लोड करें
  • तेज – उपयोगकर्ता इंटरैक्शन का तुरंत जवाब दें
  • मनोहन – देशी ऐप की तरह व्यवहार करना

इन सभी बिंदुओं को हिट करने के लिए, एक प्रगतिशील वेब ऐप में निम्नलिखित क्षमताएं होनी चाहिए:

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

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

प्रगतिशील वेब ऐप्स बनाम उत्तरदायी वेब डिज़ाइन

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

पिछले वर्षों में, RWD मोबाइल वेब समाधानों के लिए एक समाधान है, लेकिन ए फॉरेस्टर पिछले साल की रिपोर्ट से पता चला है कि RWD संतृप्ति तक पहुंच गया है – 87% डिजिटल अनुभव निर्माताओं ने इसे गले लगाया – और वेब पर ऐप-जैसे अनुभवों को पसंद करने के लिए ग्राहकों की अपेक्षाओं में बदलाव हमारी आंखों के सामने हो रहा है।.

क्या PWA मोबाइल वेब उपयोगकर्ताओं को उलझाने के लिए समाधान हैं?

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

  • उदाहरण के लिए, पीओ ने एक PWA का निर्माण किया, जिसने एक तेज़, प्रभावी और विश्वसनीय मोबाइल वेब अनुभव प्रदान किया। नई रणनीति 76% की वृद्धि दी ब्राउज़रों में कुल रूपांतरणों में और होमस्क्रीन में चार गुना अधिक इंटरैक्शन दर.
  • एक अन्य उपयोग के मामले में, OLX ऐड टू होमस्क्रीन और पुश नोटिफिकेशन का उपयोग करके मोबाइल वेब उपयोगकर्ताओं को फिर से जोड़ना चाहता था। वे 250% की वृद्धि हुई सगाई और अन्य मेट्रिक्स में भी सुधार हुआ: पेज इंटरेक्टिव होने तक का समय 23% तक गिर गया, जिसमें 80% की गिरावट दर थी। मुद्रीकरण में भी सुधार हुआ, क्लिकथ्रू दर (CTR) 146% बढ़ गई.

हम कैसे जानते हैं कि एक मोबाइल वेब ऐप प्रगतिशील है?

सबसे पहले, प्रगतिशील होना एक स्कोर है, न कि हां या नहीं, और वहां क्रोम प्लगइन कहा जाता है प्रकाशस्तंभ आप इस स्कोर को मापने के लिए उपयोग कर सकते हैं। यह प्लगइन वास्तव में उपयोग करने के लिए आसान है और सभी PWA क्षमताओं के साथ एक रिपोर्ट उत्पन्न करता है, मूल रूप से यह हमें बताता है कि एक वेब ऐप को पूरी तरह से प्रगतिशील बनने के लिए हमें क्या बदलने की आवश्यकता है। WooCommerce PWA के हमारे अल्फा संस्करण के लिए, हमने लाइटहाउस पर 91 स्कोर को हिट करने में कामयाब रहे.

प्रकाशस्तंभ

हम PWA कैसे बना सकते हैं?

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

प्रतिक्रिया

दोनों AngularJS और React के अपने फायदे हैं:

  • कोणीय / ईओण का संयोजन आजकल बहुत लोकप्रिय है। आयनिक एक महान ढांचा है जो मूल रूप से मोबाइल एप्लिकेशन के लिए बनाया गया था, लेकिन प्रगतिशील वेब ऐप और यहां तक ​​कि डेस्कटॉप एप्लिकेशन तक विस्तारित हो गया है.
  • प्रतिक्रिया वास्तव में सहज और समझने में आसान है। यह एक शानदार बॉयलरप्लेट, क्रिएट-रिएक्शन-ऐप से लाभान्वित होता है, जो डिफ़ॉल्ट रूप से पीडब्ल्यूए समर्थन के साथ आता है.

इन दोनों के अलावा, VueJS लोकप्रियता में भी बढ़ रहा है.

अगला, हम वर्डप्रेस और WooCommerce के शीर्ष पर प्रतिक्रिया के साथ निर्मित ई-कॉमर्स एप्लिकेशन से कुछ कोड नमूने देखने जा रहे हैं बाकी एपीआई.

आप भी इन लेखों में रुचि ले सकते हैं:

  • सर्वश्रेष्ठ कोणीय व्यवस्थापक डैशबोर्ड टेम्पलेट

WooCommerce REST API को समझना

जब ई-कॉमर्स एप्लिकेशन के निर्माण की बात आती है, तो सबसे पहले हमें एक एपीआई की आवश्यकता होती है, जहां से हम डेटा पुनः प्राप्त कर सकते हैं। सौभाग्य से, कोर में REST एपीआई के शामिल होने से बैकएंड के रूप में वर्डप्रेस का उपयोग करने के लिए दरवाजा खुल गया है। इसके अलावा, ई-कॉमर्स ऐप्स के लिए हम REST API का उपयोग कर सकते हैं लोकप्रिय WooCommerce प्लगइन.

WooCommerce में एक एनपीएम पैकेज भी है (WooCommerce एपीआई) एपीआई कॉल करने के लिए, लेकिन दुर्भाग्य से इस पैकेज के लिए उपभोक्ता कुंजी और उपभोक्ता रहस्य दोनों को अनुरोधों को प्रमाणित करने की आवश्यकता होती है। यदि हम उपभोक्ता रहस्य का उपयोग किसी फ्रंटएंड ऐप में करते हैं तो हमारे पास एक सुरक्षा समस्या होगी.

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

तो, हमें अपने वर्डप्रेस प्लगइन में एक प्रॉक्सी बनाना था, जो एपीआई एंडपॉइंट के प्रतिबंधित सेट तक पहुंच की अनुमति देता है। आधार के रूप में, हमने WooCommerce REST API PHP रैपर का उपयोग किया, जैसा कि आप नीचे दिए गए उदाहरण में देख सकते हैं:

पर कोड देखें सार.

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

इस तरह, हम श्रेणियों और उत्पादों को पढ़ने की अनुमति दे सकते हैं, लेकिन केवल एक ऑर्डर के लिए ऑपरेशन बनाने की अनुमति देते हैं.

चार सरल चरणों में नया रिएक्ट ऐप बनाना

एक बार जब हम एपीआई सेट कर लेते हैं, तो हम अपने रिएक्ट एप्लिकेशन पर काम करना शुरू कर सकते हैं। इंस्टॉल करने के बाद NodeJS तथा NPM विश्व स्तर पर, आप जल्दी से एक रिएक्ट JS ऐप बनाने के लिए create-react-app पैकेज का उपयोग कर सकते हैं जिसमें डिफ़ॉल्ट रूप से PWA समर्थन है.

  1. इंस्टॉल NodeJS और NPM विश्व स्तर पर
  2. इंस्टॉल बनाने प्रतिक्रिया-ऐप बॉयलरप्लेट
    npm इंस्टॉल-रिएक्शन-ऐप-जी स्थापित करें
  3. उत्पन्न नई प्रतिक्रिया आवेदन
    create-reaction-app मेरा ऐप
  4. आवेदन शुरू करें
    cd my-app & npm शुरू

नीचे एप्लिकेशन का एक स्क्रीनशॉट है जो create-react-app द्वारा जनरेट किया गया है, इसमें वह सब कुछ है जो हमें चाहिए, इसलिए हम कोडिंग शुरू कर सकते हैं, जिसमें लाइव रीलोड भी शामिल है:

नमूना प्रतिक्रिया अनुप्रयोग

नया ऐप शुरू करते समय कुछ बातों का ध्यान रखना चाहिए:

1) ऐप फ़ाइलों को व्यवस्थित करना
ऐप को बेहतरीन तरीके से तैयार करने के तरीके के बारे में कई अच्छे ट्यूटोरियल हैं। मैं फ़ोल्डर-दर-सुविधा पसंद करता हूं, क्योंकि यह बेहतर स्केलेबिलिटी की अनुमति देता है। आप एक पा सकते हैं यहाँ वास्तव में अच्छी व्याख्या.
2) लिंटर और कोडिंग मानक
यदि आप उनका उपयोग नहीं करते हैं, लेकिन कोडिंग मानक कष्टप्रद हो सकते हैं, लेकिन इस कदम से पीछे मत हटें. वे अप्रयुक्त निर्भरता को साफ करने में मदद करते हैं और यह सुनिश्चित करते हैं कि डेटा को घटक स्तर पर ठीक से सत्यापित किया गया है। इसके अलावा, यदि आप एक प्रीटियर एडिटर प्लगइन स्थापित करते हैं जो स्वचालित रूप से आपके कोड को प्रारूपित करता है, तो कोडिंग मानकों का उपयोग करना एक हवा बन जाता है। मानक के लिए ही, मैं लोकप्रिय को पसंद करता हूं Airbnb द्वारा बनाया गया.
3) छोटे घटक
घटक फ़ाइलों को छोटा रखने से उन्हें परीक्षण और प्रबंधन करने में आसानी होती है। आप एक एकल घटक में कोड लिखना शुरू कर सकते हैं और, एक बार जब यह बड़ा हो जाता है, तो इसे छोटे घटक में विभाजित करें। यूआई / यूएक्स घटकों के लिए, कई पुस्तकालय हैं जो रिएक्ट के साथ संगत हैं, जैसे कि सामग्री यूआई, शब्दार्थ यूआई या और भी बूटस्ट्रैप, बस कुछ उदाहरण देने के लिए.

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

आप श्रेणियों की एक सूची, उत्पादों की सूची और एक साइड मेनू देख सकते हैं। आइए कोड में गोता लगाएँ – आप देखेंगे कि इस तरह के उदाहरण को बनाने के लिए रिएक्ट का उपयोग करना कितना आसान है.

उदाहरण ई-कॉमर्स ऐप

ReactJS में गोताखोरी

नीचे एक रिएक्ट घटक है जो एपीआई से उत्पाद श्रेणियों का एक सेट पढ़ता है। घटक की स्थिति श्रेणियों की एक खाली सूची के साथ आरंभ की जाती है। घटकWillMount पद्धति में, जिसे रीकाउंट द्वारा स्वचालित रूप से कहा जाता है, प्रस्तुत करने से पहले हम श्रेणियों को लाने का अनुरोध करते हैं और हम प्रतिक्रिया प्राप्त करने के बाद उन्हें राज्य में जोड़ते हैं:

पर कोड देखें सार.

जैसा कि आप देख सकते हैं, श्रेणियों के प्राप्त होने पर हमें रेंडर विधि को कॉल करने की आवश्यकता नहीं है, रिएक्ट हमारे लिए इसका ध्यान रखता है और घटक को फिर से प्रस्तुत करता है। रेंडर विधि सिर्फ एक और कस्टम घटक देता है जिसे श्रेणियाँलिस्ट कहा जाता है जो श्रेणियों का डेटा प्राप्त करता है और इस तरह दिखता है:

पर कोड देखें सार.

उपरोक्त घटक श्रेणियों की सूची पर प्रसारित होता है जो इसे एक प्रस्ताव के रूप में प्राप्त करता है और एकल श्रेणी तत्व को प्रस्तुत करने के लिए श्रेणीकार्ड नामक एक अन्य कस्टम घटक को कॉल करता है।.

ये सभी घटक उनके बीच की दूरी को पार करके संवाद करते हैं। मुख्य श्रेणियाँ घटक एपीआई को कॉल करता है और श्रेणियाँ सूची के लिए श्रेणियों की एक सूची नीचे देता है, जो बदले में श्रेणी कार्ड के लिए एक श्रेणी का विवरण देता है।.

Redux का उपयोग करते हुए वैश्विक ऐप राज्य का प्रबंधन

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

यदि हम मूल एप्लिकेशन घटक में यह सभी डेटा जोड़ते हैं, तो बड़े अनुप्रयोगों को प्रबंधित करना बहुत मुश्किल हो जाएगा। यह वह जगह है जहां पुस्तकालयों जैसे ReduxJs अंदर आओ, बस स्पष्ट करने के लिए, Redux का उपयोग किसी भी जावास्क्रिप्ट ढांचे के संयोजन में किया जा सकता है, यह रिएक्ट के लिए विशिष्ट नहीं है.

इसके अलावा, Redux का उपयोग करने का मतलब यह नहीं है कि हम घटक स्तर पर राज्य या प्रॉप का उपयोग नहीं कर सकते हैं। Redux का उपयोग केवल उन डेटा को बनाए रखने के लिए किया जाना चाहिए जो एप्लिकेशन स्तर पर समझ में आता है.

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

पर कोड देखें सार.

इस उदाहरण में, वैश्विक ऐप स्टोर में श्रेणियों की एक सूची और उत्पादों की एक सूची होगी, जो कि Redux से कम्बाइन्ड्यूसर विधि का उपयोग करके एक साथ विलय कर रहे हैं.

फिर, हम Redux क्रियाओं को परिभाषित करके जारी रखते हैं, जो बहुत ही सरल कार्य हैं जो उन वस्तुओं को वापस करते हैं जिनमें एक प्रकार की संपत्ति होनी चाहिए। चूंकि JS अतुल्यकालिक है, इसलिए हमें दो कार्यों की आवश्यकता होगी: एक सिग्नलिंग के लिए जब एक अनुरोध भेजा जाता है और दूसरा जब प्रतिक्रिया प्राप्त होती है तो सिग्नलिंग के लिए। जब ये क्रियाएं होंगी, तो पूरा ऐप पता कर लेगा.

नीचे, हमने एक फ़ंक्शन भी जोड़ा है जिसे fetchProducts कहा जाता है। जैसा कि आप देख सकते हैं, यह फ़ंक्शन:

  • अनुरोध उत्पादों की कार्रवाई को भेजता है,
  • उत्पादों को पुनः प्राप्त करने के लिए एपीआई को कॉल करता है,
  • जब कोई परिणाम प्राप्त होता है तो getProducts कार्रवाई को भेजता है.

पर कोड देखें सार.

एप्लिकेशन स्थिति को संशोधित करने के लिए, हम एक तथाकथित Redux जोड़ेंगे "कम करने". Reducer केवल एक फ़ंक्शन है जो विशेष कार्यों को सुनता है और वैश्विक स्थिति के एक हिस्से को बदलता है, इस मामले में उत्पादों की सूची.

अनुरोध उत्पाद कार्रवाई प्राप्त करते समय यह Reducer कुछ भी नहीं करता है, यह हमेशा वर्तमान स्थिति देता है। प्राप्त उत्पादों की कार्रवाई के लिए, रिड्यूसर उस डेटा को लौटाता है जिसे इसे पारित किया जाता है, इस मामले में यह उत्पादों की एक सूची होगी.

पर कोड देखें सार.

चीजों को लपेटने के लिए, हम इन क्रियाओं और नए उत्पाद घटक में रिड्यूसर का उपयोग करते हैं.

पर कोड देखें सार.

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

इस तरह, यह ऐप स्टोर से उत्पादों के डेटा को सीधे एक्सेस कर सकता है, उत्पादों की सूची पर पुनरावृति कर सकता है और किसी एकल उत्पाद तत्व को प्रस्तुत करने के लिए ProductCard घटक का उपयोग कर सकता है.

पर कोड देखें सार.

अब तक, हमने कुछ उदाहरण देखे हैं कि डेटा कैसे प्रदर्शित किया जाता है, लेकिन क्या होगा यदि हम उपयोगकर्ता के इंटरैक्शन को जोड़ना चाहते हैं, उदाहरण के लिए उत्पाद को कार्ट में जोड़ना?

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

कार्ट उदाहरण में जोड़ें

वर्डप्रेस के साथ ऐप को लिंक करना

ये सभी मूल उदाहरण हैं जिन्हें आपने शुरू किया है, और आप शायद सोच रहे हैं कि हम इस ऐप को वर्डप्रेस के साथ कैसे जोड़ सकते हैं.

ठीक है, हम ऐप को एक उपडोमेन पर होस्ट कर सकते हैं और इसे एपीआई से कनेक्ट कर सकते हैं, या हम इसे एक वर्डप्रेस थीम के रूप में उपयोग कर सकते हैं – जिसका अर्थ है एक index.php फ़ाइल के साथ एक बहुत ही मूल विषय बनाना जो सिर्फ एक जावास्क्रिप्ट / सीएसएस फ़ाइल लोड करेगा। क्रिएट-रिएक्शन-ऐप बॉयलरप्लेट में एप्लिकेशन के निर्माण को बनाने के लिए कमांड शामिल हैं, इसलिए हम उत्पादन फ़ाइलों को तुरंत प्राप्त कर सकते हैं.

पर कोड देखें सार.

सेवाकर्मियों का उपयोग कहां करें

ऑफ़लाइन मोड के लिए, हम एक सेवा कार्यकर्ता जोड़ सकते हैं जो उपयोगकर्ताओं के ऑफ़लाइन होने पर भी ऐप शेल प्रदर्शित करेगा। सेवा कर्मचारी केवल एक जावास्क्रिप्ट फ़ाइल है जो ब्राउज़र में खुद को पंजीकृत करता है.

पर कोड देखें सार.

ऐसी कई रणनीतियाँ हैं जिनका उपयोग आप ऑफ़लाइन मोड के लिए कर सकते हैं, जैसे नेटवर्क पहले या कैश पहले, और आप Google में इन के बारे में पढ़ सकते हैं ऑफ़लाइन रसोई की किताब.

एप्लिकेशन के शेल को कैशिंग करने से नेटवर्क कनेक्शन होने पर भी लाभ होता है, क्योंकि ऐप बहुत तेज़ी से लोड होगा.

यदि आप आगे भी जाना चाहते हैं और एपीआई से आने वाले डेटा को कैशिंग करना शुरू करते हैं, तो आप ब्राउज़र के स्थानीय भंडारण से डेटा को बचाने / पुनः प्राप्त करने के लिए एनपीएम पैकेजों का उपयोग कर सकते हैं जैसे Redux-persist और संशोधित करना।.

वेब पुश सूचनाओं के लिए, हम पर एक नज़र डालने की सलाह देते हैं एक सिग्नल फ्री वर्डप्रेस प्लगइन. यह प्लगइन उत्तरदायी विषयों के साथ भी काम करता है, इसलिए आपको इसे तुरंत देखना चाहिए.

आगे क्या होगा?

आप ऐसा कर सकते हैं खोजो ऊपर WooCommerce PWA के लिए डेमो यहाँ.

हम पहले से ही बीटा संस्करण पर काम कर रहे हैं और यहाँ हमारे रोडमैप का एक हिस्सा है:

  • ऑफ़लाइन मोड क्षमताओं को जोड़ें
  • पुश सूचनाएँ जोड़ें
  • चेकआउट प्रक्रिया को अंतिम रूप दें

यदि आप इसे अपनी आवश्यकताओं के लिए योगदान या अनुकूलित करना चाहते हैं, तो आप ई-कॉमर्स प्रगतिशील वेब एप्लिकेशन का अल्फा संस्करण पा सकते हैं GitHub पर.

PWA का डेमो

आप प्रोग्रेसिव वेब ऐप्स और मोबाइल वर्डप्रेस परिदृश्य पर उनकी भूमिका के बारे में क्या सोचते हैं? क्या आप अपने अगले प्रोजेक्ट के साथ इस रास्ते पर चल रहे हैं?

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

करोल के द्वारा लेआउट और प्रस्तुति.

लेखक के बारे में: एलेक्जेंड्रा एंगेल सह-संस्थापक और सीटीओ हैं Appticles.com – प्रगतिशील वेब एप्लिकेशन के निर्माण के लिए एक मंच। प्लेटफ़ॉर्म के विस्तार के रूप में, Appticles में एक वर्डप्रेस प्लगइन है (वर्डप्रेस मोबाइल पैक) जिसने 1M डाउनलोड को पार कर लिया है। एलेक्जेंड्रा एक पूर्ण स्टैक डेवलपर है। उसने दो बिजनेस एक्सेलेरेटर – स्टार्टअपबुटकैंप (कोपेनहेगन / डेनमार्क) और प्रॉस्पर वीमेन एक्सेलेरेटर (सेंट लुइस / यूएस) में भाग लिया। 2017 की शुरुआत में, वह कॉडेट में सह-संस्थापक के रूप में शामिल हुईं.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector