আপনি যদি আপনার অ্যাডোব এক্সপেরিয়েন্স ম্যানেজার (AEM) ওয়েব অ্যাপ্লিকেশনে একটি আধুনিক ওয়েব অভিজ্ঞতা প্রদান করতে আগ্রহী একজন প্রযুক্তিগত নেতৃত্ব বা ডিজিটাল বিপণন বিশ্লেষক হন এবং এটি করার জন্য আপনার বিকল্পগুলি খুঁজছেন, তাহলে আপনি সঠিক নিবন্ধে এসেছেন। এটি প্রগ্রেসিভ ওয়েব অ্যাপস (PWA) কী এবং কোডিং ছাড়াই কনফিগারেশনের মাধ্যমে ওয়ার্কবক্স লাইব্রেরি ব্যবহার করে AEM-এ একটি PWA তৈরি করতে আপনার কী প্রয়োজন তা কভার করবে।
কেন PWA?
আধুনিক ওয়েব যা করতে পারে তা প্রগতিশীল ওয়েব অ্যাপস লাভ করে। এগুলি আপনার ডিভাইসে ইনস্টলযোগ্য, দ্রুত লোড হয়, পরবর্তী ভিজিটগুলি তাত্ক্ষণিকভাবে লোড হয়৷ তারা দ্রুত ইনপুট সাড়া. তারা একটি অবিশ্বস্ত সংযোগে বা অফলাইনে ভাল কাজ করে। PWAs একটি ঐচ্ছিক পূর্ণ স্ক্রীন UI, ব্যাকগ্রাউন্ড আপডেট এবং ডেটাতে অফলাইন অ্যাক্সেস সহ একটি আকর্ষক অ্যাপের মতো অভিজ্ঞতা প্রদান করতে আধুনিক API ব্যবহার করে।
একটি প্রগতিশীল ওয়েব অ্যাপে একটি ওয়েব অ্যাপ উন্নত করতে দুটি শিল্পকর্ম যোগ করতে হবে:
- একটি ওয়েব অ্যাপ ম্যানিফেস্ট : একটি JSON কনফিগারেশন ফাইল যা অ্যাপের এন্ট্রি পয়েন্ট ইউআরএল সংজ্ঞায়িত করে, PWA এবং অন্যান্য কনফিগারেশনের প্রতিনিধিত্ব করতে ব্যবহৃত আইকন যা অ্যাপ্লিকেশনটি কেমন দেখায় এবং আচরণ করে তা বর্ণনা করে।
- একটি পরিষেবা কর্মী : একটি স্ক্রিপ্ট যা ব্যাকগ্রাউন্ড পরিষেবাগুলি প্রদান করে যা আপনার PWA যে সংস্থানগুলি ব্যবহার করে এবং সেগুলি অ্যাক্সেস করার কৌশলগুলি সংজ্ঞায়িত করে আপনার PWA সমৃদ্ধ করে৷
একটি সেবা কর্মী কি?
এর মূল অংশে, একজন পরিষেবা কর্মী শুধুমাত্র একটি স্ক্রিপ্ট যা আপনার ওয়েব অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার সময় আপনার ব্রাউজার স্বাধীনভাবে চলে। একজন সক্রিয় পরিষেবা কর্মী ক্যাশে API ব্যবহার করে স্মার্ট ক্যাশিং, ব্যাকগ্রাউন্ড সিঙ্ক API ব্যবহার করে ডেটা আপ টু ডেট রাখা এবং পুশ বিজ্ঞপ্তিগুলির সাথে একীভূত করার মতো পরিষেবাগুলি প্রদান করে৷ সঠিক ক্যাশিং কৌশল সহ একজন পরিষেবা কর্মী বিভিন্ন পরিস্থিতিতে স্থিতিশীল এবং নির্ভরযোগ্য ব্যবহারকারীর অভিজ্ঞতা প্রদান করে, প্রাক-ক্যাশে করা সংস্থানগুলি তাত্ক্ষণিকভাবে ফেরত দেয়, ক্যাশে ডেটা সংরক্ষণ করে এবং ওয়েবে সংযুক্ত থাকাকালীন সংস্থানগুলি আপডেট করে৷
সেবা কর্মীদের স্ক্র্যাচ থেকে লিখতে কঠিন হতে পারে. ওয়ার্কবক্স এটি সহজ করার জন্য তৈরি করা হয়েছিল। ওয়ার্কবক্স হল লাইব্রেরির একটি সেট যা আপনাকে পরিষেবা কর্মীদের লিখতে এবং পরিচালনা করতে এবং ক্যাশে স্টোরেজ API দিয়ে ক্যাশে করতে সহায়তা করে। পরিষেবা কর্মীরা এবং ক্যাশে স্টোরেজ API, যখন একসাথে ব্যবহার করা হয়, নেটওয়ার্ক বা ক্যাশে থেকে কীভাবে সম্পদ (এইচটিএমএল, সিএসএস, জেএস, চিত্র, ইত্যাদি) অনুরোধ করা হয় তা নিয়ন্ত্রণ করে, এমনকি অফলাইনে থাকা অবস্থায় আপনাকে ক্যাশে করা সামগ্রী ফেরত দেওয়ার অনুমতি দেয়। ওয়ার্কবক্সের সাহায্যে, আপনি প্রোডাকশন-রেডি কোড সহ উভয়ই দ্রুত সেট আপ এবং পরিচালনা করতে পারেন এবং আরও অনেক কিছু।
একটি AEM সাইটকে একটি PWA এ আপগ্রেড করা হচ্ছে
Adobe Experience Manager (AEM) হল ওয়েবসাইট, মোবাইল অ্যাপস, ফর্ম এবং ডিজিটাল সাইনেজ তৈরির জন্য একটি ব্যাপক বিষয়বস্তু ব্যবস্থাপনা সমাধান। এটি আপনার বিপণন বিষয়বস্তু এবং সম্পদ পরিচালনা করা সহজ করে তোলে।
যদিও AEM ওয়েব অ্যাপ্লিকেশন তৈরির জন্য একটি সমৃদ্ধ লাইব্রেরি প্রদান করে, এখন পর্যন্ত একটি পরিষেবা কর্মী এবং একটি ম্যানিফেস্ট যোগ করে একটি PWA তৈরি করা কঠিন।
Adobe Experience Manager Sites হল UI বিল্ডিং টুল যা Adobe Experience Manager এর অংশ। যখন Adobe Experience Manager-এর সাথে একটি ক্লাউড পরিষেবা হিসাবে ব্যবহার করা হয়, তখন AEM সাইটগুলি যেকোন বিদ্যমান AEM ওয়েবসাইট বা একক পৃষ্ঠার অ্যাপ্লিকেশনকে শুধুমাত্র কনফিগারেশন এবং কোনো কোডিং ছাড়াই একটি ইনস্টলযোগ্য অফলাইন-সক্ষম প্রগ্রেসিভ ওয়েব অ্যাপে রূপান্তর করা সহজ করে তোলে। এটি প্রগতিশীল ওয়েব অ্যাপগুলির জন্য সর্বোত্তম অনুশীলনগুলি সরবরাহ করতে ওয়ার্কবক্স ব্যবহার করে এবং বয়লারপ্লেট ম্যানিফেস্ট এবং পরিষেবা কর্মীদের লেখার জটিলতাগুলিকে বিমূর্ত করে৷
AEM বিষয়বস্তুর স্থানীয়করণ সমর্থন করে যার অর্থ আপনি বিভিন্ন লোকেলের জন্য বিভিন্ন ব্র্যান্ডিং এবং এমনকি ভিন্ন অফলাইন সামগ্রী থাকতে পারেন। এটি করতে প্রতিটি ভাষা মাস্টারের জন্য বিভিন্ন PWA কনফিগারেশন তৈরি করুন।
AEM-এ PWA কনফিগারেশন দিয়ে শুরু করা
একটি ক্লাউড পরিষেবা হিসাবে অ্যাডোব এক্সপেরিয়েন্স ম্যানেজারে লগ ইন করুন এবং যেকোন অ্যাডোব এক্সপেরিয়েন্স ম্যানেজার সাইট পৃষ্ঠা বা ভাষা মাস্টার নির্বাচন করুন এবং বৈশিষ্ট্যগুলিতে ক্লিক করুন৷ আপনি প্রগ্রেসিভ ওয়েব অ্যাপ নামে একটি ট্যাব দেখতে পাবেন। (দ্রষ্টব্য: যদি আপনি এই ট্যাবটি দেখতে না পান, তাহলে এই বৈশিষ্ট্যটি সক্ষম করতে অনুগ্রহ করে Adobe-এর সাথে যোগাযোগ করুন।) আপনি মাত্র কয়েকটি ক্লিকে আপনার প্রগতিশীল ওয়েব অ্যাপের ইনস্টলেশন এবং চেহারা এবং অনুভূতি কনফিগার করতে পারেন।
আপনি যদি AEM সাইট টিউটোরিয়ালগুলি সম্পূর্ণ করে থাকেন তবে আপনি সম্ভবত WKND সাইটটি আগে দেখেছেন। এই নিবন্ধটি শুরু বিন্দু হিসাবে WKND ডেমো ব্যবহার করে। আপনার কাজ শেষ হলে আপনি ওয়ার্কবক্স ব্যবহার করে একটি ওয়েব অ্যাপ থেকে PWA-তে WKND আপডেট করবেন।
ম্যানিফেস্ট কনফিগার করুন
ওয়েব অ্যাপ ম্যানিফেস্ট হল একটি JSON ফাইল যাতে এমন বৈশিষ্ট্য রয়েছে যা PWA এর চেহারা এবং আচরণ বর্ণনা করে। অ্যাডোব এক্সপেরিয়েন্স ম্যানেজার সাইটগুলি বৈশিষ্ট্যগুলি কনফিগার করার জন্য একটি বন্ধুত্বপূর্ণ ইউজার ইন্টারফেস প্রদান করে।
স্টার্ট URL হল আপনার 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"
}
]
}
স্টার্ট URL আপনার ডোমেনের ডিফল্ট ল্যান্ডিং পৃষ্ঠা থেকে আলাদা হতে পারে। start_url প্যারামিটার পরিবর্তন করে, আপনি আপনার ব্যবহারকারীদের সরাসরি অ্যাপ্লিকেশন অভিজ্ঞতায় পাঠাতে পারেন ডিফল্ট পৃষ্ঠার পরিবর্তে একটি অপ্রমাণিত বা নতুন ব্যবহারকারী উপস্থাপন করা হবে। এটি PWA ব্যবহারকারীদের একটি মসৃণ, আরও অ্যাপের মতো অভিজ্ঞতা প্রদান করে।
AEM বুঝতে পারে যে বিভিন্ন লোকেলের একটি ভিন্ন চেহারা এবং অনুভূতি থাকতে পারে। আপনি বিভিন্ন লোকেল বা ভাষার জন্য বিভিন্ন বৈশিষ্ট্য, রঙ এবং আইকন কনফিগার করতে পারেন এবং তারপর লিঙ্কযুক্ত পৃষ্ঠাগুলির সাথে কনফিগারেশনটি সিঙ্ক্রোনাইজ করতে পারেন।
একবার ব্রাউজারে PWA অ্যাক্সেস করা হলে, আপনি DevTools আনতে এবং অ্যাপ্লিকেশন প্যানেলের অধীনে ম্যানিফেস্ট দেখতে ডান ক্লিক এবং পরিদর্শন করতে পারেন।
পরিষেবা কর্মী কনফিগার করুন
আপনি বিষয়বস্তু ক্যাশে কনফিগার করতে পারেন এবং ব্যবহার করার জন্য ক্যাশিং কৌশল।
আপনি যদি পরিষেবা কর্মীদের ব্যবহার করে থাকেন তবে আপনি ক্যাশিং কৌশলগুলির সাথে পরিচিত হতে পারেন। ক্যাশিং কৌশলগুলি নির্দিষ্ট করে যে কোন সংস্থানগুলিকে ক্যাশে করতে হবে এবং সেই সংস্থানগুলি প্রথমে ক্যাশে, প্রথমে নেটওয়ার্কে বা নেটওয়ার্ক ফলব্যাক সহ ক্যাশেতে সন্ধান করতে হবে। পরিষেবা কর্মী ইনস্টল করা হলে আপনি প্রাক-ক্যাশে সম্পদ নির্বাচন করতে পারেন। AEM অ্যাপ্লিকেশন পরিষেবা কর্মীরা একটি উষ্ণ ক্যাশে কৌশল প্রয়োগ করে যার অর্থ আপনি একটি অনুপস্থিত বা ভাঙা পথ উল্লেখ করলেও ব্যবহারকারীর অভিজ্ঞতা ভঙ্গ হবে না।
AEM-এ, "ক্লায়েন্টলিবস" শব্দটি ক্লায়েন্ট-সাইড লাইব্রেরিগুলিকে বোঝায়: সম্পর্কিত জাভাস্ক্রিপ্ট, সিএসএস, এবং স্ট্যাটিক রিসোর্সগুলির সংমিশ্রণ যা আপনার প্রোজেক্টে যোগ করা হয়েছে যা ক্লায়েন্ট ওয়েব ব্রাউজার দ্বারা পরিবেশিত এবং ব্যবহার করা হয়। ব্যবহারকারী ইন্টারফেসে সেই লাইব্রেরিগুলি নির্দিষ্ট করে আপনি সহজেই আপনার ক্লায়েন্ট-সাইড লাইব্রেরিগুলিকে অফলাইনে ব্যবহার করার জন্য সেট করতে পারেন।
আপনি ফন্টের মতো তৃতীয় পক্ষের সংস্থানগুলিও অন্তর্ভুক্ত করতে পারেন। এই অফলাইন ক্যাশে কনফিগারেশন একটি পরিষেবা কর্মীকে কনফিগারেশন তথ্য প্রদান করে যা আপনার অ্যাপ্লিকেশনের জন্য তৈরি করা হয় যা অভ্যন্তরীণভাবে ওয়ার্কবক্স ব্যবহার করে। আপনার অ্যাপ্লিকেশনটি ইনস্টলযোগ্য করার জন্য এটিই মোটামুটি। একবার ইনস্টল হয়ে গেলে, অ্যাপ্লিকেশন আইকনটি আপনার মোবাইল ডিভাইসের হোম স্ক্রিনে একটি প্ল্যাটফর্ম অ্যাপের মতো দেখাবে। আইকনে ক্লিক করলে wknd সাইটে প্রবেশ করা যাবে।
অনুগ্রহ করে মনে রাখবেন যে আপনি যেকোনো সময় আপনার সামগ্রী বা এই সেটিংস পরিবর্তন করতে পারেন৷ আপনি যখন আপনার পরিবর্তনগুলি প্রকাশ করবেন, তখন পরিষেবা কর্মী ব্রাউজার দ্বারা ক্লায়েন্টে আপডেট হবে এবং ব্যবহারকারীর কাছে একটি বার্তা উপস্থাপন করা হবে যে PWA এর একটি নতুন সংস্করণ উপলব্ধ। ব্যবহারকারী অ্যাপ্লিকেশনটি পুনরায় লোড করতে এবং সর্বশেষ আপডেট পেতে বার্তাটিতে ক্লিক করতে পারেন। আপনি পরিষেবা কর্মীর বিবরণ দেখতে ব্রাউজার বিকাশকারী সরঞ্জাম এবং অ্যাপ্লিকেশন প্যানেল খুলতে পারেন৷
স্থানীয়ভাবে ক্যাশে করা বিষয়বস্তু দেখতে আপনি ক্যাশে স্টোরেজ প্রসারিত করতে পারেন:
ফলাফলগুলো
আপনার কঠোর পরিশ্রমের ফলাফল দেখার সময় এসেছে। শুধু কনফিগারেশনের সাথে এবং কোডিং ছাড়াই আপনি আপনার AEM সাইটটিকে একটি প্রগতিশীল ওয়েব অ্যাপে পরিণত করেছেন।
Chrome বিকাশকারী সরঞ্জামগুলি একটি বাতিঘর অডিট প্রদান করে যা আপনাকে আপনার ওয়েব অ্যাপ্লিকেশন এবং কনফিগারেশন প্রগতিশীল ওয়েব অ্যাপ মানগুলির সাথে কতটা সঙ্গতিপূর্ণ তা পরীক্ষা করতে দেয়৷
উপসংহার
প্রগতিশীল ওয়েব অ্যাপস আপনার ওয়েবসাইটের জন্য একটি অ্যাপ-এর মতো অভিজ্ঞতা প্রদান করে, যা বিতরণের উপর নিয়ন্ত্রণ প্রদান করার সময় বিকাশ ও রক্ষণাবেক্ষণের কম খরচে ক্রস প্ল্যাটফর্ম এবং ওয়েবের খোলা প্রকৃতি ব্যবহার করে। এটি ব্যস্ততা, ধারণকে উন্নত করে এবং সবচেয়ে গুরুত্বপূর্ণভাবে, উচ্চ রূপান্তর হার চালায়। ওয়ার্কবক্সের সাথে AEM আপনার বিদ্যমান সাইটটিকে শুধুমাত্র কনফিগারেশন এবং কোনো কোডিং ছাড়াই PWA-তে উন্নত করা সহজ করে তোলে।