अगर आप एक तकनीकी लीड या डिजिटल मार्केटिंग विश्लेषक हैं और आपको अपने Adobe Experience Manager (AEM) वेब ऐप्लिकेशन को आधुनिक वेब अनुभव देना है, तो यह लेख आपके लिए है. इस लेख में बताया गया है कि प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) क्या हैं. साथ ही, यह भी बताया गया है कि AEM में बिना कोडिंग के, कॉन्फ़िगरेशन की मदद से WorkBox लाइब्रेरी का इस्तेमाल करके, पीडब्ल्यूए कैसे बनाया जा सकता है.
PWA क्यों?
प्रोग्रेसिव वेब ऐप्लिकेशन, आधुनिक वेब के फ़ायदों का फ़ायदा लेते हैं. इन्हें आपके डिवाइस पर इंस्टॉल किया जा सकता है. साथ ही, ये तेज़ी से लोड होते हैं और अगली बार विज़िट करने पर तुरंत लोड हो जाते हैं. वे इनपुट का तुरंत जवाब देते हैं. ये अविश्वसनीय कनेक्शन या ऑफ़लाइन होने पर भी अच्छी तरह से काम करते हैं. पीडब्ल्यूए में, ऐप्लिकेशन जैसा दिलचस्प अनुभव देने के लिए आधुनिक एपीआई का इस्तेमाल किया जाता है. इसमें एक फ़ुल स्क्रीन यूज़र इंटरफ़ेस (यूआई) भी होता है, जो ज़रूरी नहीं है. इसके अलावा, बैकग्राउंड में अपडेट करने और डेटा को ऑफ़लाइन ऐक्सेस करने की सुविधा भी देता है.
किसी वेब ऐप्लिकेशन को प्रोग्रेसिव वेब ऐप्लिकेशन में बेहतर बनाने के लिए, दो आर्टफ़ैक्ट जोड़ने की ज़रूरत होती है:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट: यह एक JSON कॉन्फ़िगरेशन फ़ाइल है, जिसमें ऐप्लिकेशन के एंट्री पॉइंट यूआरएल, PWA को दिखाने के लिए इस्तेमाल किए जाने वाले आइकॉन, और अन्य कॉन्फ़िगरेशन की जानकारी होती है. इनसे यह पता चलता है कि ऐप्लिकेशन कैसा दिखता है और कैसे काम करता है.
- सर्विस वर्कर: यह एक स्क्रिप्ट है, जो बैकग्राउंड में सेवाएं देती है. इन सेवाओं की मदद से, आपके PWA को बेहतर बनाया जा सकता है. इसके लिए, यह स्क्रिप्ट आपके PWA के इस्तेमाल किए जाने वाले संसाधनों और उन्हें ऐक्सेस करने की रणनीतियों के बारे में बताती है.
सेवा वर्कर क्या है?
सर्विस वर्कर, मूल रूप से एक स्क्रिप्ट होती है. जब आप अपने वेब ऐप्लिकेशन से इंटरैक्ट करते हैं, तब आपका ब्राउज़र इसे अपने-आप चलाता है. चालू सेवा वर्कर, Cache API का इस्तेमाल करके स्मार्ट कैश मेमोरी जैसी सेवाएं देता है. साथ ही, Background Sync API का इस्तेमाल करके डेटा को अप-टू-डेट रखता है और पुश नोटिफ़िकेशन के साथ इंटिग्रेट करता है. कैश मेमोरी का इस्तेमाल करने की सही रणनीति का इस्तेमाल करने वाला सेवा वर्कर, अलग-अलग स्थितियों में उपयोगकर्ताओं को बेहतर अनुभव देता है. साथ ही, पहले से कैश मेमोरी में सेव किए गए संसाधनों को तुरंत दिखाता है, डेटा को कैश मेमोरी में सेव करता है, और वेब से कनेक्ट होने पर संसाधनों को अपडेट करता है.
सर्विस वर्कर को शुरू से लिखना मुश्किल हो सकता है. इसे आसान बनाने के लिए, Workbox बनाया गया था. वर्कबॉक्स, लाइब्रेरी का एक सेट है जो सर्विस वर्कर को लिखने और मैनेज करने में आपकी मदद करता है. साथ ही, कैश मेमोरी एपीआई की मदद से कैश मेमोरी में सेव करने में भी आपकी मदद करता है. सेवा वर्कर और कैश स्टोरेज एपीआई को एक साथ इस्तेमाल करने पर, यह कंट्रोल किया जा सकता है कि नेटवर्क या कैश से एसेट (एचटीएमएल, सीएसएस, JS, इमेज वगैरह) का अनुरोध कैसे किया जाए. साथ ही, ऑफ़लाइन होने पर भी कैश मेमोरी में सेव किया गया कॉन्टेंट दिखाया जा सकता है. Workbox की मदद से, प्रोडक्शन के लिए तैयार कोड की मदद से, दोनों को तुरंत सेट अप और मैनेज किया जा सकता है. साथ ही, और भी बहुत कुछ किया जा सकता है.
AEM साइट को PWA पर अपग्रेड करना
Adobe Experience Manager (AEM), वेबसाइट, मोबाइल ऐप्लिकेशन, फ़ॉर्म, और डिजिटल साइनेज बनाने के लिए, कॉन्टेंट मैनेजमेंट की बेहतर सुविधा देता है. इससे मार्केटिंग कॉन्टेंट और ऐसेट को आसानी से मैनेज किया जा सकता है.
AEM, वेब ऐप्लिकेशन बनाने के लिए एक बेहतर लाइब्रेरी उपलब्ध कराता है. हालांकि, अब तक सेवा वर्कर और मेनिफ़ेस्ट जोड़कर, PWA बनाना मुश्किल था.
Adobe Experience Manager Sites, यूज़र इंटरफ़ेस (यूआई) बनाने वाला टूल है. यह Adobe Experience Manager का हिस्सा है. AEM साइटों को क्लाउड सेवा के तौर पर Adobe Experience Manager के साथ इस्तेमाल करने पर, किसी भी मौजूदा AEM वेबसाइट या सिंगल पेज ऐप्लिकेशन को इंस्टॉल किए जा सकने वाले ऑफ़लाइन-चालू प्रगतिशील वेब ऐप्लिकेशन में आसानी से बदला जा सकता है. इसके लिए, सिर्फ़ कॉन्फ़िगरेशन की ज़रूरत होती है, कोडिंग की नहीं. यह प्रोग्रेसिव वेब ऐप्लिकेशन के लिए सबसे सही तरीके उपलब्ध कराने के लिए Workbox का इस्तेमाल करता है. साथ ही, बॉयलरप्लेट मेनिफ़ेस्ट और सर्विस वर्कर को लिखने में आने वाली मुश्किलों को कम करता है.
AEM, कॉन्टेंट को स्थानीय भाषा में उपलब्ध कराने की सुविधा देता है. इसका मतलब है कि अलग-अलग भाषाओं के लिए, अलग-अलग ब्रैंडिंग और ऑफ़लाइन कॉन्टेंट उपलब्ध कराया जा सकता है. ऐसा करने के लिए, हर भाषा के मास्टर के लिए अलग-अलग PWA कॉन्फ़िगरेशन बनाएं.
AEM पर PWA कॉन्फ़िगरेशन का इस्तेमाल शुरू करना
Cloud Service के तौर पर Adobe Experience Manager में लॉग इन करें. इसके बाद, Adobe Experience Manager साइट का कोई पेज या भाषा का कोई मास्टर चुनें और प्रॉपर्टी पर क्लिक करें. आपको प्रोग्रेसिव वेब ऐप्लिकेशन नाम का एक टैब दिखेगा. (ध्यान दें: अगर आपको यह टैब नहीं दिखता है, तो कृपया इस सुविधा को चालू करने के लिए Adobe से संपर्क करें.) बस कुछ ही क्लिक में, अपने प्रगतिशील वेब ऐप्लिकेशन के इंस्टॉलेशन और लुक को कॉन्फ़िगर किया जा सकता है.
अगर आपने AEM साइटों के ट्यूटोरियल पूरे कर लिए हैं, तो हो सकता है कि आपने पहले WKND साइट देखी हो. इस लेख में, शुरुआत की जगह के तौर पर WKND डेमो का इस्तेमाल किया गया है. इसके बाद, आपके पास WKND को वेब ऐप्लिकेशन से पीडब्ल्यूए में बदलने का विकल्प होगा. इसके लिए, आपको WorkBox का इस्तेमाल करना होगा.
मेनिफ़ेस्ट कॉन्फ़िगर करना
वेब ऐप्लिकेशन मेनिफ़ेस्ट एक 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, और स्टैटिक रिसॉर्स का कॉम्बिनेशन, जो क्लाइंट वेब ब्राउज़र को दिखाया जाता है और उसका इस्तेमाल किया जाता है. उपयोगकर्ता इंटरफ़ेस में क्लाइंट-साइड लाइब्रेरी की जानकारी देकर, उन्हें ऑफ़लाइन इस्तेमाल करने के लिए आसानी से सेट किया जा सकता है.
इसमें तीसरे पक्ष के संसाधन भी शामिल किए जा सकते हैं, जैसे कि फ़ॉन्ट. यह ऑफ़लाइन कैश मेमोरी कॉन्फ़िगरेशन, आपके ऐप्लिकेशन के लिए जनरेट किए गए उस सेवा वर्कर को कॉन्फ़िगरेशन की जानकारी देता है जो अंदरूनी तौर पर workbox का इस्तेमाल करता है. आपके ऐप्लिकेशन को इंस्टॉल करने लायक बनाने के लिए, आपको बस इतना ही करना होगा. इंस्टॉल होने के बाद, ऐप्लिकेशन का आइकॉन आपके मोबाइल डिवाइस की होम स्क्रीन पर दिखेगा, ठीक उसी तरह जैसे किसी प्लैटफ़ॉर्म ऐप्लिकेशन का आइकॉन दिखता है. आइकॉन पर क्लिक करने से, wknd साइट को ऐक्सेस किया जा सकेगा.
कृपया ध्यान दें कि आपके पास अपने कॉन्टेंट या इन सेटिंग को किसी भी समय बदलने का विकल्प होता है. बदलावों को पब्लिश करने पर, ब्राउज़र क्लाइंट पर सेवा वर्कर को अपडेट कर देगा. साथ ही, उपयोगकर्ता को यह मैसेज दिखेगा कि PWA का नया वर्शन उपलब्ध है. उपयोगकर्ता, ऐप्लिकेशन को फिर से लोड करने और नए अपडेट पाने के लिए, मैसेज पर क्लिक कर सकता है. सर्विस वर्कर की जानकारी देखने के लिए, ब्राउज़र डेवलपर टूल और ऐप्लिकेशन पैनल को खोला जा सकता है.
कंप्यूटर पर कैश मेमोरी में सेव किए गए कॉन्टेंट को देखने के लिए, उसे बड़ा करके देखें:
नतीजे
अब अपनी मेहनत के नतीजे देखने का समय आ गया है. कॉन्फ़िगरेशन और बिना कोडिंग के, आपने अपनी AEM साइट को बेहतर बना दिया है. अब यह एक प्रोग्रेसिव वेब ऐप्लिकेशन बन जाएगा.
Chrome डेवलपर टूल, लाइटहाउस ऑडिट की सुविधा देते हैं. इसकी मदद से, यह देखा जा सकता है कि आपका वेब ऐप्लिकेशन और कॉन्फ़िगरेशन, प्रोग्रेसिव वेब ऐप्लिकेशन के स्टैंडर्ड के मुताबिक है या नहीं.
नतीजा
प्रोग्रेसिव वेब ऐप्लिकेशन आपकी वेबसाइट के लिए ऐप्लिकेशन जैसा अनुभव उपलब्ध कराते हैं. यह डिस्ट्रिब्यूशन पर कंट्रोल देते हुए, कम डेवलपमेंट और रखरखाव के लिए कम लागत पर वेब के क्रॉस-प्लैटफ़ॉर्म और ओपन नेचर का इस्तेमाल करता है. इससे यूज़र ऐक्टिविटी और उपयोगकर्ताओं के बने रहने की दर बढ़ती है. सबसे अहम बात यह है कि इससे कन्वर्ज़न रेट भी बढ़ता है. Workbox के साथ AEM का इस्तेमाल करके, अपनी मौजूदा साइट को आसानी से PWA में बदला जा सकता है. इसके लिए, आपको सिर्फ़ कॉन्फ़िगरेशन की ज़रूरत होती है, कोडिंग की नहीं.
रेफ़रंस
- WKND ट्यूटोरियल
- सर्विस वर्कर
- Cache API
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
- मास्क किए जा सकने वाले आइकॉन की मदद से, PWA में अडैप्टिव आइकॉन की सुविधा
- Adobe Experience Manager साइटों के बारे में ज़्यादा जानें
- Workbox के बारे में ज़्यादा जानें:
- Workbox की कैश मेमोरी से जुड़ी रणनीतियां:
- प्रोग्रेसिव वेब ऐप्लिकेशन के बारे में ज़्यादा जानें