वर्डप्रेस के लिए प्रगतिशील वेब ऐप्स क्यों?

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

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

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

अब हम दोनों को मिल सकता है? तो अगर हम एक मोबाइल एप्लिकेशन की क्षमताओं और मोबाइल वेब की पहुंच गठबंधन कर सकते हैं, हम कुछ सोना प्राप्त कर सकते हैं । पीडब्ल्यूए। अब पीडब्ल्यूए या पीडब्ल्यू क्या हैं, प्रगतिशील वेब ऐप हैं। जो वेब एप्लिकेशन हैं जो देशी ऐप्स के रूप में दिखते हैं और व्यवहार करते हैं। वे उत्तरोत्तर वेब अनुप्रयोगों को बढ़ाते हैं, देशी ऐप्स की तरह दिखते हैं और महसूस करते हैं।

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

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

इसकी यह भी देखा गया है कि ५०% स्मार्टफोन यूजर्स को ब्राउजिंग या शॉपिंग करते समय कंपनी की मोबाइल साइट का इस्तेमाल करने की संभावना ज्यादा होती है, क्योंकि वे कोई ऐप डाउनलोड नहीं करना चाहते और ऐप्स बहुत ज्यादा फोन मेमोरी लेते हैं । और वह नंबर एक मुद्दा है कि उन मोबाइल आवेदन uninstalling की ओर जाता है । आप देख सकते है कि फिर से, कहते हैं, उम, पूर्ण, माफ करना ।

मैं और अधिक नहीं हो सकता ।

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

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

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

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

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

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

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

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

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

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

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

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

इसलिए हमने इस बारे में बात की कि पीडब्ल्यूए क्या हैं और इससे क्या फायदे हैं । दाएँ। और अब यह महत्वपूर्ण क्यों है? क्या होगा अगर हम BWL का निर्माण किया था? हम ऐसा कैसे करते हैं? इसलिए हम कुछ सरल चरणों में पीडब्ल्यूए का निर्माण कर सकते हैं। सबसे पहले हम वेब ऐप मैनिफेस्ट बना सकते हैं। तो वेब ऐप प्रकट क्या है? खैर, यह सिर्फ एक डिजाइन फ़ाइल है जिसमें मेटाडेटा होता है।

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

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

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

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

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

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

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

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

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

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

यदि कोई नया कैश संस्करण है और कोई नया कैश संस्करण नहीं मिला है। बिलकुल ठीक। यदि आप निरीक्षण तत्व से आवेदन करने जाते हैं, तो यह वह जगह है जहां आपको जानकारी मिलेगी। यदि सेवा कर्मियों ने पंजीकरण कराया है, तो आपको स्रोत का दर्जा मिल गया है। और फिर आप प्रकट करने के लिए जा सकते हैं, और यह हमारी मैनिफेस्ट.जेसन फाइल जानकारी है।

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

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

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

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

बिलकुल ठीक। तो यह लाने की घटना है । इस तरह लाने की घटना की तरह लग रहा है । तो आप देख सकते हैं कि यह इन यूआरएल से प्रतिक्रिया ला रहा है। और यदि आप नेटवर्क टैब पर जाते हैं और तत्व का निरीक्षण करते हैं, तो यह सेवा कर्मी कैसे दिखते हैं। आखिरी बात, यदि आप होम स्क्रीन में एक कस्टम ऐड करना चाहते हैं, तो आप जोड़ सकते हैं कि मैं गिटहब के लिए लिंक साझा करूंगा ताकि आप कोड की जांच कर सकें।

मैं इस के विस्तार में नहीं जा रहा होगा । यह बहुत आसान है। बिलकुल ठीक। इसलिए अब हम codeytek.com जाते हैं । यह हमारा प्रगतिशील वेब ऐप है, जो होम स्क्रीन में जोड़ें। जैसा कि हमें पॉपअप मिला, आप देख सकते हैं कि यह होम स्क्रीन में जोड़ रहा है, और फिर हम अपने होम स्क्रीन पर जाते हैं। हमारा आवेदन है, उस पर क्लिक करें।

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

यह हर डेवलपर का सपना है। है न? हां, सच में? ठीक। अब तक, इसलिए, अब तक हमने सीखा है कि पीडब्ल्यूए क्या हैं, वे क्या विशेषताएं प्रदान करते हैं, वगैरह। अब, क्या होगा अगर मैं एक तकनीकी विशेषज्ञ नहीं हूं? जैसे मैं एक डेवलपर नहीं हूं और मुझे यकीन है कि यह सवाल आपके दिमाग में आएगा कि मैं डेवलपर नहीं हूं, सही।

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

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

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

बिलकुल ठीक। तो मान लीजिए कि आपने सुपर पीडब्ल्यूए प्लगइन को सक्रिय कर दिया है, लेकिन क्या होगा अगर मैं अपने वर्डप्रेस वेबसाइट के लिए अपने उपयोगकर्ताओं को पुश नोटिफिकेशन भेजना चाहता हूं? मैं ऐसा कैसे करूं? खैर, इससे पहले कि हम उस पर कूद, वहां कुछ दिलचस्प है । मुझे आपके साथ साझा करना पसंद है। शोध के आधार पर यह देखा गया है कि स्मार्टफोन यूजर्स को उन मोबाइल साइट्स से खरीदने की संभावना ज्यादा होती है जो प्रॉडक्ट्स पर प्रासंगिक सिफारिशें पेश करती हैं और ८५% स्मार्टफोन यूजर्स का कहना है कि मोबाइल नोटिफिकेशन उपयोगी हैं ताकि वे जो देख रहे थे, उसकी सही सिफारिशें मिल सकें ।

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

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

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

ओह, चलो एक घर स्क्रीन पर चलते हैं। हमारे अनुप्रयोग हैं। चलो इसे खोलते हैं। आप देख सकते हैं कि कोई पता बार नहीं है। तो यह एक देशी ऐप की तरह दिखता है और महसूस करता है। यही कारण है कि हमारे ब्लॉग पृष्ठ है.

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

चलो बंद करते हैं। सब कुछ।

चलो इसे फिर से खोलना।

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

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

अतिविस्‍मयकारी। त्रुटिरहित बनाना। ठीक। तो अब ब्राउज़र अनुकूलता के बारे में थोड़ा और बात करते हैं। तो यह एंड्रॉयड के लिए एंड्रॉयड एज के लिए एंड्रॉयड मोजिला फायरफॉक्स के लिए गूगल क्रोम के साथ संगत है, एंड्रॉयड के लिए बहादुर, सैमसंग इंटरनेट । आईओएस के बारे में क्या? इसलिए आईओएस ने केवल संस्करण 11.3 से पीडब्ल्यूए का समर्थन करना शुरू कर दिया। कुछ फीचर्स ने आईओएस का सपोर्ट किया है, सभी को नहीं ।

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

फ्लिपकार्ट लाइट, स्मैशिंग मैगजीन और Pinterest में और वहां एक और अधिक साथ। rtCamp में, हम wp-decoupled नामक कुछ बनाते हैं, और यह ऑफ़लाइन भी काम करता है। तो यह एक पीडब्ल्यूए है । तो सामने अंत अगले-es का उपयोग कर प्रतिक्रिया में है । और बैकएंड वर्डप्रेस में है। और यह एक वूकॉमर्स एप्लिकेशन है। जैसा कि आप देख सकते हैं कि यह ऑफ़लाइन भी काम कर रहा है।

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

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

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

तो चलिए देखते हैं कि यह कैसे काम करता है।

[ संगीत]

बिलकुल ठीक। तो मुझे आशा है कि आप डेमो मज़ा आया। और यह आपको एक वेबसाइट, एक बेहतर प्रदर्शन और बेहतर उपयोगकर्ता अनुभव देगा। तो संदर्भ के लिए, उह, आप चाहते हैं, आप जा सकते हैं, तो PWA के लिए, आप developers.google.com/web/fundamentals जा सकते हैं । आप पीडब्ल्यूए के लिए कोड की जांच कर सकते हैं जिसे हमने डब्ल्यूपी डिकूपल के लिए गिटहब पर इमरानहसैद/पीडब्ल्यूए-अवधारणाओं पर बनाया था, आप गिटहब पर आरटीकैंप स्लैश डब्ल्यूपी डिकुपल में जा सकते हैं।

और गट्सबाय वूकॉमर्स टीम के लिए भी गिटहब पर इमरानहसाया । यदि आप चाहते हैं कि हम वर्डप्रेस सीखेंगे, तो आप डॉट rtCamp.com सीखने जा सकते हैं और यह वर्डप्रेस सीखने के लिए एक बहुत व्यापक स्रोत है। आप इसे देख सकते हैं। यदि आप विभिन्न तकनीकी ढेरों के लिए प्रोग्रामिंग सीखना चाहते हैं, तो आप Codeytek.com जा सकते हैं।

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

तो मुझे आशा है कि आप इसे मज़ा आया । बहुत-बहुत धन्यवाद। तुम मुझे फॉलो कर सकते हो। चहचहाना। मेरा ट्विटर हैंडल @imranhsayed है। बहुत-बहुत धन्यवाद।