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