মাল্টি-অরিজিন সাইটে প্রোগ্রেসিভ ওয়েব অ্যাপ তৈরি করার ক্ষেত্রে চ্যালেঞ্জ ও সমাধান।
প্রকাশিত: ১৯ আগস্ট, ২০১৯
অতীতে, মাল্টি-অরিজিন আর্কিটেকচার ব্যবহার করার কিছু সুবিধা ছিল। প্রোগ্রেসিভ ওয়েব অ্যাপের ক্ষেত্রে, এই পদ্ধতি অনেক চ্যালেঞ্জের সম্মুখীন হয়। বিশেষ করে, একই উৎস সম্পর্কিত নীতি, সার্ভিস ওয়ার্কার ও ক্যাশে, অনুমতি এবং একাধিক উৎস জুড়ে স্ট্যান্ডঅ্যালোন অভিজ্ঞতা পাওয়ার মতো বিষয় শেয়ার করার ক্ষেত্রে বিধিনিষেধ আরোপ করে।
একাধিক অরিজিনের ভালো ও খারাপ ব্যবহার সম্পর্কে জানুন এবং মাল্টি-অরিজিন সাইটে প্রোগ্রেসিভ ওয়েব অ্যাপ তৈরি করার ক্ষেত্রে চ্যালেঞ্জ ও সমাধান সম্পর্কে ব্যাখ্যা করুন।
একাধিক অরিজিনের ভাল ও খারাপ ব্যবহার
সাইটগুলি মাল্টি-অরিজিন আর্কিটেকচার ব্যবহার করার কিছু বৈধ কারণ রয়েছে, যার বেশিরভাগই ওয়েব অ্যাপ্লিকেশনের একটি স্বাধীন সেট প্রদান করা বা একে অপরের থেকে সম্পূর্ণ আলাদা অভিজ্ঞতা তৈরি করার সাথে সম্পর্কিত। এছাড়াও, কিছু ব্যবহার এড়িয়ে চলা উচিত।
ভাল দিক
প্রথমে প্রয়োজনীয় কারণগুলি দেখে নিন:
লোকালাইজেশন / ভাষা: বিভিন্ন দেশে (যেমন,
https://www.google.com.ar) সাইট দেখানোর জন্য দেশ ভিত্তিক কোড টপ-লেভেল ডোমেন ব্যবহার করা অথবা বিভিন্ন লোকেশনকে টার্গেট করে সাইট ভাগ করার জন্য সাবডোমেন ব্যবহার করা (যেমন:https://newyork.craigslist.org) অথবা নির্দিষ্ট ভাষার কন্টেন্ট (যেমনhttps://en.wikipedia.org) অফার করার জন্য।ইন্ডিপেন্ডেন্ট ওয়েব অ্যাপ: বিভিন্ন সাবডোমেন ব্যবহার করে এমন অভিজ্ঞতা প্রদান করা যার উদ্দেশ্য মূল অরিজিনের সাইট থেকে অনেকটাই আলাদা। যেমন, কোনও খবরের সাইটে, ক্রসওয়ার্ড ওয়েবঅ্যাপ ইচ্ছাকৃতভাবে
https://crosswords.example.comথেকে পরিবেশন করা হতে পারে এবং মূল ওয়েবসাইটের সাথে কোনও রিসোর্স বা কার্যকারিতা শেয়ার না করেই একটি স্বাধীন PWA হিসেবে ইনস্টল ও ব্যবহার করা হতে পারে।
খারাপ দিক
আপনি যদি এর মধ্যে কোনওটিই না করেন, তাহলে প্রোগ্রেসিভ ওয়েব অ্যাপ তৈরি করার সময় মাল্টি-অরিজিন আর্কিটেকচার ব্যবহার করলে অসুবিধা হতে পারে।
তা সত্ত্বেও, অনেক সাইট কোনও নির্দিষ্ট কারণ ছাড়াই বা 'লিগ্যাসি' কারণে এইভাবে স্ট্রাকচার করা চালিয়ে যায়। যেমন, একটি সাইটের বিভিন্ন অংশকে আলাদা করার জন্য সাবডোমেন ব্যবহার করা, যা আসলে একটি ইউনিফায়েড অভিজ্ঞতার অংশ হওয়া উচিত।
যেমন, নিম্নলিখিত প্যাটার্নগুলি ব্যবহার করার জন্য একেবারেই উৎসাহ দেওয়া হয় না:
সাইটের বিভাগ: সাবডোমেনে সাইটের বিভিন্ন বিভাগ আলাদা করা। খবরের সাইটে, হোম পেজ
https://www.example.com-এ দেখা যায়, যেখানে স্পোর্টস বিভাগhttps://sports.example.com-এ, রাজনীতিhttps://politics.example.com-এ এবং আরও অনেক কিছু থাকে। ই-কমার্স সাইটের ক্ষেত্রে, প্রোডাক্ট বিভাগের জন্যhttps://category.example.com, প্রোডাক্ট পৃষ্ঠার জন্যhttps://product.example.comইত্যাদি ব্যবহার করা।ইউজার ফ্লো: আরেকটি পদ্ধতি যা নিরুৎসাহিত করা হয় তা হল সাইটের বিভিন্ন ছোট অংশকে আলাদা করা, যেমন সাবডোমেনে লগ-ইন বা পারচেজ ফ্লোর জন্য পৃষ্ঠা। যেমন,
https://login.example.comএবংhttps://checkout.example.comব্যবহার করে।
যেসব ক্ষেত্রে একটি মাত্র অরিজিনে মাইগ্রেট করা সম্ভব নয়, সেখানে কী কী চ্যালেঞ্জ আসতে পারে এবং (যেখানে সম্ভব) প্রোগ্রেসিভ ওয়েব অ্যাপ তৈরি করার সময় কী কী বিকল্প সমাধান বিবেচনা করা যেতে পারে, তার একটি তালিকা নিচে দেওয়া হল।
বিভিন্ন অরিজিন জুড়ে PWA-এর জন্য চ্যালেঞ্জ এবং সমাধান
একাধিক অরিজিনে ওয়েবসাইট তৈরি করার সময়, ইউনিফায়েড PWA অভিজ্ঞতা প্রদান করা চ্যালেঞ্জিং, মূলত একই-অরিজিন নীতির কারণে, যা একাধিক সীমাবদ্ধতা আরোপ করে। আসুন, এক এক করে সেগুলি দেখা যাক।
সার্ভিস ওয়ার্কার্স
সার্ভিস ওয়ার্কার স্ক্রিপ্ট URL-এর উৎস এবং register() কল করা পৃষ্ঠার উৎস একই হতে হবে। এর অর্থ হল, উদাহরণস্বরূপ, https://www.example.com-এ থাকা কোনও পৃষ্ঠা https://section.example.com-এ থাকা কোনও সার্ভিস ওয়ার্কার URL-এর সাথে register()-কে কল করতে পারবে না।
আরেকটি বিষয় হল, সার্ভিস ওয়ার্কার শুধুমাত্র সেইসব পৃষ্ঠা নিয়ন্ত্রণ করতে পারে যেগুলি তার অরিজিন ও পাথের অধীনে হোস্ট করা হয়। এর অর্থ হল, সার্ভিস ওয়ার্কার https://www.example.com-এ হোস্ট করা থাকলে, এটি শুধুমাত্র সেই অরিজিনের URL কন্ট্রোল করতে পারবে (স্কোপ প্যারামিটার-এ উল্লেখ করা পাথ অনুযায়ী), তবে অন্য সাবডোমেনের কোনও পৃষ্ঠা কন্ট্রোল করতে পারবে না, যেমন, https://section.example.com-এ থাকা পৃষ্ঠা।
এই ক্ষেত্রে, একমাত্র সমাধান হল একাধিক সার্ভিস ওয়ার্কার (প্রতিটি অরিজিনের জন্য একটি) ব্যবহার করা।
ক্যাশ করা হচ্ছে
ক্যাশে অবজেক্ট, indexedDB এবং localStorage-ও একটিমাত্র অরিজিনে সীমাবদ্ধ। এর অর্থ হল, https://www.example.com-এর অন্তর্গত ক্যাশে অ্যাক্সেস করা সম্ভব নয়, যেমন: https://www.section.example.com থেকে।
এই ধরনের পরিস্থিতিতে ক্যাশে সঠিকভাবে ম্যানেজ করার জন্য আপনি কিছু কাজ করতে পারেন:
ব্রাউজার ক্যাশিংয়ের সুবিধা নিন: সবসময় ব্রাউজার ক্যাশিংয়ের ট্র্যাডিশনাল পেশাদার পদ্ধতি ব্যবহার করার পরামর্শ দেওয়া হয়। এই টেকনিকের মাধ্যমে বিভিন্ন অরিজিন জুড়ে ক্যাশে করা রিসোর্স আবার ব্যবহার করার অতিরিক্ত সুবিধা পাওয়া যায়, যা সার্ভিস ওয়ার্কারের ক্যাশের মাধ্যমে করা যায় না। সার্ভিস ওয়ার্কারের সাথে HTTP ক্যাশে কীভাবে ব্যবহার করবেন সেই সংক্রান্ত পেশাদার পদ্ধতির জন্য, আপনি এই পোস্ট দেখতে পারেন।
সার্ভিস ওয়ার্কার ইনস্টলেশন লাইটওয়েট রাখুন: আপনি একাধিক সার্ভিস ওয়ার্কার ম্যানেজ করলে, ব্যবহারকারী যখনই নতুন অরিজিনে নেভিগেট করবেন, তখনই তাকে বড় ইনস্টলেশন খরচ দিতে বাধ্য করবেন না। অন্যভাবে বলতে গেলে: শুধুমাত্র সেইসব রিসোর্স প্রি-ক্যাশে করুন যেগুলি অত্যন্ত প্রয়োজনীয়।
অনুমতি
এছাড়াও, অনুমতিগুলি উৎস অনুযায়ী সীমাবদ্ধ থাকে। এর অর্থ হল, কোনও ব্যবহারকারী যদি https://section.example.com অরিজিনকে কোনও অনুমতি দেন, তাহলে সেটি https://www.example.com-এর মতো অন্যান্য অরিজিনে প্রযোজ্য হবে না।
যেহেতু বিভিন্ন অরিজিনের মধ্যে অনুমতি শেয়ার করার কোনও উপায় নেই, তাই এখানে একমাত্র সমাধান হল প্রতিটি সাবডোমেনে অনুমতির জন্য জিজ্ঞাসা করা যেখানে একটি নির্দিষ্ট ফিচার প্রয়োজন (যেমন লোকেশন)। ওয়েব পুশের মতো বিষয়ের ক্ষেত্রে, আপনি কুকি ব্যবহার করে ট্র্যাক করতে পারেন যে ব্যবহারকারী অন্য সাবডোমেনে অনুমতি দিয়েছেন কিনা, যাতে আবার অনুরোধ করতে না হয়।
ইনস্টল করা
PWA ইনস্টল করতে, প্রতিটি অরিজিনের নিজস্ব ম্যানিফেস্ট থাকতে হবে যার মধ্যে start_url থাকবে যা নিজেই নিজের সাথে সম্পর্কিত। এর অর্থ হল, কোনও ব্যবহারকারী নির্দিষ্ট অরিজিনে (যেমন: https://section.example.com) ইনস্টলেশন প্রম্পট পেলে, তিনি অন্য অরিজিনে (যেমন: https://www.example.com) start_url সহ PWA ইনস্টল করতে পারবেন না।
অন্যভাবে বলতে গেলে, কোনও সাবডোমেনে ইনস্টলেশন প্রম্পট পাওয়া ব্যবহারকারী শুধুমাত্র সাবপেজের জন্য PWA ইনস্টল করতে পারবেন, অ্যাপের মূল URL-এর জন্য নয়।
এছাড়াও, সাইট নেভিগেট করার সময় একই ব্যবহারকারী একাধিক ইনস্টলেশন প্রম্পট পেতে পারেন, যদি প্রতিটি সাবডোমেন ইনস্টলেশন সংক্রান্ত মাপকাঠি পূরণ করে এবং ব্যবহারকারীকে PWA ইনস্টল করার জন্য প্রম্পট করে।
এই সমস্যাটি সমাধান করতে, আপনি নিশ্চিত করতে পারেন যে প্রম্পটটি শুধুমাত্র মূল অরিজিনে দেখানো হয়েছে। কোনও ব্যবহারকারী যখন ইনস্টলেশনের মাপকাঠি পূরণ করে এমন সাবডোমেন ভিজিট করেন:
beforeinstallpromptইভেন্টের জন্য শুনুন।event.preventDefault()-এ কল করে প্রম্পট দেখানো বন্ধ করুন।
এর ফলে, আপনি নিশ্চিত করতে পারবেন যে সাইটের অনাকাঙ্ক্ষিত অংশে প্রম্পট দেখানো হচ্ছে না, তবে আপনি এটি দেখানো চালিয়ে যেতে পারবেন, যেমন, মূল অরিজিনে (যেমন, হোম পেজ)।
স্ট্যান্ডঅ্যালোন মোড
স্ট্যান্ডঅ্যালোন উইন্ডোতে নেভিগেট করার সময়, ব্যবহারকারী PWA-এর ম্যানিফেস্টের মাধ্যমে সেট করা স্কোপের বাইরে চলে গেলে, ব্রাউজার অন্যভাবে কাজ করবে। প্রতিটি ব্রাউজার ভার্সন ও ভেন্ডরের উপর নির্ভর করে আচরণ আলাদা হয়। যেমন, Chrome-এর লেটেস্ট ভার্সনে, ব্যবহারকারী স্ট্যান্ডঅ্যালোন মোডে স্কোপের বাইরে চলে গেলে, Chrome কাস্টম ট্যাব খুলে যায়।
বেশিরভাগ ক্ষেত্রে, এর কোনও সমাধান নেই, তবে সাবডোমেনে হোস্ট করা অভিজ্ঞতার ছোট অংশের জন্য একটি সমাধান প্রয়োগ করা যেতে পারে (যেমন: লগ-ইন ওয়ার্কফ্লো):
- নতুন URL,
https://login.example.com, ফুল স্ক্রিন iframe-এর মধ্যে খুলতে পারে। - iframe-এর মধ্যে টাস্ক সম্পূর্ণ হয়ে গেলে (যেমন, লগ-ইন প্রসেস), iframe থেকে মূল পৃষ্ঠায় কোনও ফলাফল সংক্রান্ত তথ্য পাস করার জন্য postMessage() ব্যবহার করা যেতে পারে।
- চূড়ান্ত ধাপ হিসেবে, মূল পৃষ্ঠা মেসেজটি পেয়ে গেলে, শ্রোতাদের অনিবন্ধিত করা যেতে পারে এবং অবশেষে DOM থেকে iframe সরানো যেতে পারে।
উপসংহার
একই-উৎপত্তি নীতি, একাধিক উৎপত্তির উপর তৈরি সাইটের জন্য অনেক বিধিনিষেধ আরোপ করে যা একটি সুসংগত PWA অভিজ্ঞতা অর্জন করতে চায়। সেই কারণে, ব্যবহারকারীদের সেরা অভিজ্ঞতা প্রদান করতে, আমরা সাইটগুলিকে বিভিন্ন অরিজিনে ভাগ করার বিরুদ্ধে দৃঢ়ভাবে সাজেশন দিই।
আগে থেকে তৈরি সাইটের ক্ষেত্রে, মাল্টি-অরিজিন PWA সঠিকভাবে কাজ করার ক্ষেত্রে সমস্যা হতে পারে, তবে আমরা কিছু সম্ভাব্য সমাধান খুঁজে বের করেছি। প্রত্যেকটিরই কিছু সুবিধা ও অসুবিধা আছে, তাই আপনার ওয়েবসাইটে কোন পদ্ধতি ব্যবহার করবেন তা সিদ্ধান্ত নেওয়ার সময় নিজের বিচারবুদ্ধি প্রয়োগ করুন।
দীর্ঘমেয়াদী স্ট্র্যাটেজি বা সাইট রিডিজাইন করার সময়, মাল্টি-অরিজিন আর্কিটেকচার রাখার কোনও গুরুত্বপূর্ণ কারণ না থাকলে, একটি অরিজিনে মাইগ্রেট করার কথা বিবেচনা করুন।
টেকনিক্যাল রিভিউ ও সাজেশন দেওয়ার জন্য এদের অনেক ধন্যবাদ: পেনি ম্যাকলাচলান, পল কোভেল, ডমিনিক এনজি, আলবার্তো মেদিনা, পিট লেপেজ, জো মেডলি, চেনি সাই, মার্টিন শিয়েরলে এবং আন্দ্রে বান্দারা।