अगर आप तकनीकी लीड या डिजिटल मार्केटिंग ऐनलिस्ट हैं और आपको अपने Adobe Experience Manager (AEM) के वेब ऐप्लिकेशन को एक मॉडर्न वेब अनुभव देना है और इसके लिए विकल्पों की तलाश है, तो यह लेख आपके लिए है. इसमें यह बताया जाएगा कि प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) क्या हैं और आपको AEM में PWA बनाने के लिए क्या करना है. यह जानकारी, बिना कोडिंग के, WorkBox लाइब्रेरी का इस्तेमाल करके हासिल की जाती है.
PWA का इस्तेमाल क्यों करें?
प्रोग्रेसिव वेब ऐप्लिकेशन, उस काम का बेहतर तरीके से इस्तेमाल करते हैं जो मॉडर्न वेब कर सकता है. इन्हें आपके डिवाइस पर इंस्टॉल किया जा सकता है और तेज़ी से लोड किया जा सकता है. साथ ही, अगली विज़िट तुरंत लोड हो जाती हैं. वे इनपुट का तुरंत जवाब देते हैं. वे असुरक्षित कनेक्शन पर या ऑफ़लाइन होने पर भी अच्छी तरह से काम करते हैं. PWA में, ऐप्लिकेशन की तरह काम करने का अनुभव देने के लिए मॉडर्न एपीआई का इस्तेमाल किया जाता है. इसमें, वैकल्पिक फ़ुल स्क्रीन यूज़र इंटरफ़ेस (यूआई), बैकग्राउंड में अपडेट करने, और डेटा को ऑफ़लाइन ऐक्सेस करने की सुविधा मिलती है.
किसी वेब ऐप्लिकेशन को प्रोग्रेसिव वेब ऐप्लिकेशन में बेहतर बनाने के लिए, दो आर्टफ़ैक्ट जोड़ने की ज़रूरत होती है:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट: एक JSON कॉन्फ़िगरेशन फ़ाइल, जो ऐप्लिकेशन के एंट्री पॉइंट यूआरएल के बारे में बताती है. यह PWA और अन्य कॉन्फ़िगरेशन को दिखाने के लिए इस्तेमाल किया जाने वाला आइकॉन होता है, जो ऐप्लिकेशन के दिखने और काम करने के तरीके के बारे में बताता है.
- सर्विस वर्कर: यह एक ऐसी स्क्रिप्ट है जो बैकग्राउंड में चलने वाली सेवाएं देती है. इसकी मदद से, PWA में इस्तेमाल होने वाले संसाधनों और उन्हें ऐक्सेस करने की रणनीतियों के बारे में बताया जाता है.
सर्विस वर्कर क्या है?
इसके मूल रूप में, सर्विस वर्कर बस एक स्क्रिप्ट होती है, जिसे आपका ब्राउज़र तब स्वतंत्र रूप से चलता है, जब आप अपने वेब ऐप्लिकेशन से इंटरैक्ट करते हैं. एक सक्रिय सर्विस वर्कर, कैश एपीआई का इस्तेमाल करके स्मार्ट कैशिंग जैसी सेवाएं देता है और बैकग्राउंड सिंक एपीआई का इस्तेमाल करके, डेटा को अप-टू-डेट रखता है. साथ ही, पुश नोटिफ़िकेशन के साथ इंटिग्रेट करता है. कैश मेमोरी में सेव करने की सही रणनीति वाला सर्विस वर्कर, कई स्थितियों के लिए उपयोगकर्ता को स्थिर और भरोसेमंद अनुभव देता है. इससे पहले से कैश मेमोरी में सेव किए गए संसाधनों को तुरंत लौटाया जा सकता है, कैश में डेटा सेव किया जा सकता है, और वेब से कनेक्ट होने पर संसाधनों को अपडेट किया जा सकता है.
सर्विस वर्कर के लिए, शुरुआत से लिखना मुश्किल हो सकता है. वर्कबॉक्स को आसान बनाने के लिए बनाया गया था. वर्कबॉक्स, लाइब्रेरी का एक सेट है जो सर्विस वर्कर को लिखने और उन्हें मैनेज करने के साथ-साथ, कैश मेमोरी एपीआई का इस्तेमाल करके कैश मेमोरी में सेव करने में आपकी मदद करता है. सर्विस वर्कर और कैश स्टोरेज एपीआई को एक साथ इस्तेमाल करने पर, नेटवर्क या कैश मेमोरी से ऐसेट (एचटीएमएल, सीएसएस, JS, इमेज वगैरह) के अनुरोध का तरीका कंट्रोल किया जाता है. यहां तक कि इसकी मदद से, ऑफ़लाइन होने पर भी कैश मेमोरी में सेव किया गया कॉन्टेंट दिखाया जा सकता है. Workbox की मदद से, प्रोडक्शन के लिए तैयार कोड का इस्तेमाल करके, दोनों को तेज़ी से सेट अप और मैनेज किया जा सकता है. साथ ही, इन दोनों को भी मैनेज किया जा सकता है.
AEM साइट को PWA पर अपग्रेड करना
Adobe एक्सपीरियंस मैनेजर (AEM), कॉन्टेंट मैनेजमेंट की एक बेहतरीन सुविधा है. इसकी मदद से, वेबसाइटें, मोबाइल ऐप्लिकेशन, फ़ॉर्म, और डिजिटल साइनेज तैयार किए जाते हैं. इससे अपने मार्केटिंग कॉन्टेंट और ऐसेट को मैनेज करना आसान हो जाता है.
AEM, वेब ऐप्लिकेशन बनाने के लिए रिच लाइब्रेरी उपलब्ध कराता है. हालांकि, अब तक सर्विस वर्कर और मेनिफ़ेस्ट को जोड़कर PWA बनाना मुश्किल था.
Adobe Experience Manager Sites, यूज़र इंटरफ़ेस (यूआई) बनाने वाला टूल है. यह Adobe Experience Manager का हिस्सा है. AEM Sites को Adobe एक्सपीरियंस मैनेजर के साथ क्लाउड सेवा के तौर पर इस्तेमाल करने पर, किसी भी मौजूदा AEM वेबसाइट या एक पेज के ऐप्लिकेशन को इंस्टॉल किए जा सकने वाले ऑफ़लाइन-सुविधा वाले प्रोग्रेसिव वेब ऐप्लिकेशन में बदलना आसान हो जाता है. इसमें सिर्फ़ कॉन्फ़िगरेशन और कोडिंग की ज़रूरत नहीं होती. यह प्रोग्रेसिव वेब ऐप्लिकेशन के लिए सबसे सही तरीके डिलीवर करने के लिए Workbox का इस्तेमाल करता है. साथ ही, बॉयलरप्लेट मेनिफ़ेस्ट को लिखने और सर्विस वर्कर की मुश्किलों को कम करता है.
AEM, कॉन्टेंट को स्थानीय भाषा में उपलब्ध कराने की सुविधा देता है. इसका मतलब है कि हर जगह के लिए, अलग-अलग ब्रैंडिंग और अलग-अलग ऑफ़लाइन कॉन्टेंट भी बनाया जा सकता है. ऐसा करने के लिए, हर भाषा के मास्टर के लिए अलग-अलग PWA कॉन्फ़िगरेशन बनाएं.
AEM पर PWA कॉन्फ़िगरेशन का इस्तेमाल शुरू करना
Adobe Experience Manager में Cloud Service के तौर पर लॉग इन करें. इसके बाद, Adobe Experience Manager के किसी भी पेज या लैंग्वेज मास्टर को चुनें और प्रॉपर्टी पर क्लिक करें. आपको प्रोग्रेसिव वेब ऐप्लिकेशन नाम का एक टैब दिखेगा. ध्यान दें: अगर आपको यह टैब नहीं दिखता है, तो इस सुविधा को चालू करने के लिए कृपया Adobe की सहायता टीम से संपर्क करें. आप कुछ ही क्लिक में, अपने प्रोग्रेसिव वेब ऐप्लिकेशन को इंस्टॉल करने और उसके लुक और स्टाइल को कॉन्फ़िगर कर सकते हैं.
अगर आपने AEM Sites के ट्यूटोरियल पूरे कर लिए हैं, तो हो सकता है कि आपने पहले भी WKND साइट को देखा हो. इस लेख में, WKND डेमो को शुरुआती पॉइंट के तौर पर इस्तेमाल किया गया है. काम पूरा होने के बाद, WorkBox का इस्तेमाल करके, WKND को वेब ऐप्लिकेशन से PWA में अपडेट कर दिया जाएगा.
मेनिफ़ेस्ट कॉन्फ़िगर करें
वेब ऐप्लिकेशन मेनिफ़ेस्ट एक JSON फ़ाइल है, जिसमें ऐसी प्रॉपर्टी शामिल हैं जो PWA के लुक और व्यवहार के बारे में बताती हैं. Adobe Experience Manager Sites से प्रॉपर्टी को कॉन्फ़िगर करने के लिए एक अच्छा यूज़र इंटरफ़ेस मिलता है.
शुरुआती यूआरएल, आपके PWA का शुरुआती पॉइंट होता है. जब कोई उपयोगकर्ता अपने फ़ोन पर PWA आइकॉन पर टैप करेगा, तो वह स्टार्टअप यूआरएल ऐक्सेस कर रहा होगा. डिसप्ले मोड यह कॉन्फ़िगर करता है कि ऐप्लिकेशन, विंडो वाला है या फ़ुलस्क्रीन. ऐप्लिकेशन का स्क्रीन ओरिएंटेशन भी तय किया जा सकता है. थीम का रंग, विंडो और टूलबार का रंग होता है. वहीं, ऐप्लिकेशन के लॉन्च होने पर बैकग्राउंड का रंग, स्प्लैश स्क्रीन का रंग होता है. आइकन वह चित्र है जो डिवाइस पर ऐप्लिकेशन इंस्टॉल होने पर डिवाइस की होम स्क्रीन या ऐप्लिकेशन ड्रॉर पर दिखाई देता है. इमेज में दिखाया गया कॉन्फ़िगरेशन, नीचे दिखाया गया मेनिफ़ेस्ट JSON जनरेट करता है.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
स्टार्ट यूआरएल आपके डोमेन के डिफ़ॉल्ट लैंडिंग पेज से अलग हो सकता है. start_url पैरामीटर को बदलकर, उपयोगकर्ताओं को सीधे ऐप्लिकेशन वाले पेज पर भेजा जा सकता है. ऐसा डिफ़ॉल्ट पेज के बजाय सीधे ऐप्लिकेशन वाले पेज पर किया जा सकता है जिसकी पुष्टि नहीं हुई है या नए उपयोगकर्ता की जानकारी दिखेगी. इसकी मदद से, PWA उपयोगकर्ताओं को ऐप्लिकेशन जैसा बेहतर अनुभव मिलता है.
AEM समझता है कि अलग-अलग स्थान-भाषाओं का रंग-रूप अलग हो सकता है. अलग-अलग भाषाओं या भाषाओं के लिए अलग-अलग प्रॉपर्टी, रंग, और आइकॉन कॉन्फ़िगर किए जा सकते हैं. इसके बाद, लिंक किए गए पेजों के साथ कॉन्फ़िगरेशन को सिंक किया जा सकता है.
ब्राउज़र पर PWA को ऐक्सेस करने के बाद, राइट क्लिक करके जांच की जा सकती है. ऐसा करके, DevTools को खोलकर ऐप्लिकेशन पैनल में मेनिफ़ेस्ट देखा जा सकता है.
सर्विस वर्कर को कॉन्फ़िगर करें
कॉन्टेंट को कैश मेमोरी में सेव करने और इस्तेमाल करने के लिए कैश मेमोरी में सेव करने की रणनीति को कॉन्फ़िगर किया जा सकता है.
अगर आपने सर्विस वर्कर का इस्तेमाल किया है, तो आपको कैश मेमोरी में सेव करने की रणनीतियों के बारे में पता हो सकता है. कैश मेमोरी में सेव करने की रणनीतियां तय करती हैं कि किन संसाधनों को कैश मेमोरी में सेव करना है. साथ ही, उन संसाधनों को पहले कैश मेमोरी में, नेटवर्क में या नेटवर्क फ़ॉलबैक वाली कैश मेमोरी में खोजना है या नहीं. इसके बाद, सर्विस वर्कर के इंस्टॉल होने पर, संसाधनों को प्री-कैश मेमोरी में सेव करने का विकल्प चुना जा सकता है. AEM ऐप्लिकेशन सर्विस वर्कर, एक वॉर्म कैश रणनीति लागू करते हैं. इसका मतलब है कि अगर पाथ मौजूद नहीं है या उसमें गड़बड़ी है, तो भी उपयोगकर्ता अनुभव पर असर नहीं पड़ेगा.
AEM में, "clientlibs" शब्द क्लाइंट-साइड लाइब्रेरी का मतलब है: आपके प्रोजेक्ट में जोड़े गए मिलते-जुलते JavaScript, CSS, और स्टैटिक रिसॉर्स का कॉम्बिनेशन, जिन्हें क्लाइंट वेब ब्राउज़र उपलब्ध कराता है और इस्तेमाल करता है. यूज़र इंटरफ़ेस में अपनी क्लाइंट-साइड लाइब्रेरी को तय करके, उन्हें आसानी से ऑफ़लाइन इस्तेमाल करने के लिए सेट किया जा सकता है.
इसमें तीसरे पक्ष के संसाधन भी शामिल किए जा सकते हैं, जैसे कि फ़ॉन्ट. यह ऑफ़लाइन कैश कॉन्फ़िगरेशन, वर्कबॉक्स का इस्तेमाल करने वाले आपके ऐप्लिकेशन के लिए जनरेट किए गए सर्विस वर्कर को कॉन्फ़िगरेशन की जानकारी देता है. आपके ऐप्लिकेशन को इंस्टॉल करने लायक बनाने के लिए, बस इतना ही. इंस्टॉल होने के बाद, ऐप्लिकेशन आइकॉन आपके मोबाइल डिवाइस की होम स्क्रीन पर बिलकुल किसी प्लैटफ़ॉर्म ऐप्लिकेशन की तरह दिखेगा. आइकॉन पर क्लिक करने से wknd साइट को ऐक्सेस किया जा सकेगा.
कृपया ध्यान दें कि आपके पास अपने कॉन्टेंट या इन सेटिंग को कभी भी बदलने का विकल्प है. बदलावों को पब्लिश करने पर, ब्राउज़र से क्लाइंट को सर्विस वर्कर अपडेट हो जाएगा. साथ ही, उपयोगकर्ता को PWA का नया वर्शन उपलब्ध होने का मैसेज दिखेगा. उपयोगकर्ता इस मैसेज पर क्लिक करके, ऐप्लिकेशन को फिर से लोड कर सकता है और नए अपडेट पा सकता है. सर्विस वर्कर की जानकारी देखने के लिए, ब्राउज़र डेवलपर टूल और ऐप्लिकेशन पैनल को खोला जा सकता है.
स्थानीय तौर पर कैश मेमोरी में सेव किए गए कॉन्टेंट को देखने के लिए, कैश मेमोरी को बढ़ाया जा सकता है:
नतीजे
अब अपनी कड़ी मेहनत के नतीजे देखने का समय आ गया है. सिर्फ़ कॉन्फ़िगरेशन और कोडिंग के बिना ही आपने अपनी AEM साइट को बेहतर बनाकर, प्रोग्रेसिव वेब ऐप्लिकेशन बना दिया है.
Chrome डेवलपर टूल में लाइटहाउस ऑडिट की सुविधा होती है. इसकी मदद से देखा जा सकता है कि आपका वेब ऐप्लिकेशन और कॉन्फ़िगरेशन, प्रोग्रेसिव वेब ऐप्लिकेशन के मानकों के हिसाब से कितना सही है.
नतीजा
प्रगतिशील वेब ऐप्लिकेशन आपकी वेबसाइट को ऐप्लिकेशन जैसा अनुभव देते हैं, जो वितरण पर नियंत्रण देते हुए विकास और रखरखाव की कम लागत पर क्रॉस प्लैटफ़ॉर्म और वेब की खुले प्रकृति का इस्तेमाल करता है. इससे उपयोगकर्ताओं की दिलचस्पी बढ़ती है और उन्हें अपने साथ जोड़े रखने में मदद मिलती है. साथ ही, इससे कन्वर्ज़न रेट भी बढ़ता है. Workbox के साथ में AEM की मदद से, सिर्फ़ कॉन्फ़िगरेशन और कोडिंग किए बिना अपनी मौजूदा साइट को PWA में बेहतर बनाया जा सकता है.
रेफ़रंस
- WKND ट्यूटोरियल
- सेवा देने वाले लोग
- कैश एपीआई
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- PWA में, अडैप्टिव आइकॉन सहायता की सुविधा, जिसे मास्क किए जा सकने वाले आइकॉन के साथ इस्तेमाल किया जा सकता है
- Adobe Experience Manager की साइटों के बारे में ज़्यादा जानें
- वर्कबॉक्स के बारे में ज़्यादा जानें:
- वर्कबॉक्स के डेटा को कैश मेमोरी में सेव करने की रणनीतियां:
- प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में ज़्यादा जानें