প্রকাশিত: ৩ জুন, ২০২৬
প্রোগ্রেসিভ ওয়েব অ্যাপস (পিডব্লিউএ) অ্যাপের মতো অভিজ্ঞতা প্রদানের মাধ্যমে ওয়েব জগতে বৈপ্লবিক পরিবর্তন এনেছে। তবে, এর অন্যতম প্রধান শক্তিটিই একটি দীর্ঘস্থায়ী প্রতিবন্ধকতাও হয়ে দাঁড়িয়েছে: অ্যাপের পরিচয় তার ওয়েব উৎসের সাথে নিবিড়ভাবে সংযুক্ত।
আপনার আর্কিটেকচারকে নতুন ব্র্যান্ডে রূপান্তর করতে বা পুনর্গঠন করতে গিয়ে (উদাহরণস্বরূপ, www.example.com/social থেকে social.example.com এ স্থানান্তরিত হতে গিয়ে), আপনি একটি কষ্টকর উভয়সঙ্কটের সম্মুখীন হয়েছিলেন। ইনস্টল করা কোনো PWA-কে "সরিয়ে" নেওয়ার কোনো উপায় ছিল না। ব্যবহারকারীরা পুরোনো অ্যাপটি ম্যানুয়ালি আনইনস্টল করে নতুনটির জন্য ইনস্টল বাটনটি খুঁজে বের করতে বাধ্য হতেন।
PWA টিম Chrome 150-এ PWA Origin Migration চালু করতে পেরে আনন্দিত। এই নতুন প্ল্যাটফর্ম ফিচারটি ব্যবহারকারীকে ন্যূনতম অসুবিধায় ইনস্টল করা PWA-গুলিকে একটি নতুন, একই-সাইটের অরিজিনে নির্বিঘ্নে স্থানান্তর করতে দেয় এবং একই সাথে ব্যবহারকারীকে পর্যাপ্তভাবে অবহিত রাখে।
উৎস স্থানান্তর যা সক্ষম করে
ব্যবহারকারীর অভিজ্ঞতা ব্যাহত না করেই আপনি আপনার সাইটের কাঠামো পরিবর্তন করতে পারেন:
- প্রযুক্তিগত স্থাপত্যের স্বাধীনতা: আপনার অ্যাপ্লিকেশনের সাবডোমেইন বা পাথ পরিবর্তন করুন।
- বিভক্ত অ্যাপ অবস্থার সমাধান: সেই সমস্যার সমাধান করা হয়েছে যেখানে একটি স্থিতিশীল আইডি ছাড়া
start_urlপরিবর্তন করলে ভুলবশত অ্যাপের একাধিক ইনস্টলেশন তৈরি হয়ে যেত।
ব্যবহারকারীরা একটি সাধারণ আপডেট ডায়ালগের মাধ্যমে তাদের অ্যাপ স্থানান্তর করতে পারেন। একটি সাধারণ অ্যাপ আপডেটের মতোই তাদেরকে এই স্থানান্তর সম্পর্কে জানানো হয়। এক ক্লিকেই পুরোনো অ্যাপটি আনইনস্টল হয়ে যায় এবং নতুন অ্যাপটি ইনস্টল ও চালু হয়ে যায়।
কীভাবে একটি PWA মাইগ্রেট করবেন
একটি PWA মাইগ্রেট করতে, এই ধাপগুলো অনুসরণ করুন। পোস্টের বাকি অংশে এ বিষয়ে আরও বিস্তারিত আলোচনা করা হয়েছে:
- হ্যান্ডশেকটি স্থাপন করুন:
- নতুন অ্যাপে
migrate_fromযোগ করুন। - পুরানো অরিজিনের
/.well-known/web-app-origin-associationফাইলেallow_migrationফিল্ডটি যোগ করুন।
- নতুন অ্যাপে
- আচরণ নির্বাচন করুন:
suggest(বা খালি) ব্যবহারকারীকে বাধা দেওয়া এড়ায়, যা প্রাথমিক রোলআউটের সময় সহায়ক হতে পারে। যদি ব্যবহারকারী পুরোনো URL ব্যবহার চালিয়ে যেতে না পারেন, তবেforceব্যবহারকারীকে ব্লক করে এবং মাইগ্রেশন আবশ্যক করে। - পুরানো অ্যাপটি আপ-টু-ডেট রাখুন: যদি পুরানো সাইটটি নতুন সাইটে রিডাইরেক্ট করে, তাহলে
migrate_fromব্লকেinstall_urlপ্রপার্টিটি ব্যবহার করুন, যাতে ব্রাউজার সম্ভাব্য আপডেটের জন্য পুরানো ম্যানিফেস্টটি খুঁজে পেতে পারে। - গন্তব্য ম্যানিফেস্টে
idপ্রয়োগ করুন: Chrome-এর জন্য গন্তব্য অ্যাপের ম্যানিফেস্টে একটিidফিল্ড থাকা আবশ্যক। এটি নিশ্চিত করে যে,idসেট না করেstart_urlপরিবর্তন করার মাধ্যমে স্প্লিট অ্যাপ তৈরি করার সাধারণ ভুলটি অ্যাপটি করতে পারবে না।
দ্বিমুখী করমর্দন: এটি কীভাবে কাজ করে
নিরাপত্তা নিশ্চিত করতে এবং প্রতিকূল অধিগ্রহণ প্রতিরোধ করতে, মাইগ্রেশনের জন্য পুরাতন ও নতুন অরিজিনের মধ্যে একটি সুরক্ষিত হ্যান্ডশেক প্রয়োজন। এই হ্যান্ডশেক নিশ্চিত করে যে উভয় সাইট একই সত্তা দ্বারা নিয়ন্ত্রিত।
ধাপ ১: নতুন অ্যাপটি তার পূর্বসূরিকে ঘোষণা করে (প্রয়োজনীয়)।
নতুন অ্যাপ্লিকেশনটির ওয়েব অ্যাপ ম্যানিফেস্টে একটি migrate_from ফিল্ড যোগ করুন।
// Manifest at https://fileman.google.com/manifest.json
{
"name": "File Manager",
"id": "/files/",
"start_url": "/files/index.html",
....
"migrate_from": [
"https://drive.google.com/"
]
}
ধাপ ২: পুরাতন উৎস মাইগ্রেশনটি নিশ্চিত করে (প্রয়োজনীয়)
একটি নতুন সাইট যাতে একতরফাভাবে একটি পুরোনো অ্যাপ দখল করতে না পারে, সেজন্য পুরোনো অরিজিনকে অবশ্যই মাইগ্রেশনটির সুস্পষ্ট অনুমোদন দিতে হবে। এটি একটি .well-known কনফিগারেশন ফাইলের মাধ্যমে এই কাজটি করে থাকে।
// File at https://drive.google.com/.well-known/web-app-origin-association
{
"https://fileman.google.com/files/": {
"allow_migration": true
}
}
ধাপ ৩: সক্রিয় সংকেত প্রদান (ঐচ্ছিক)
ব্যবহারকারীর নতুন সাইটে যাওয়ার জন্য অপেক্ষা না করেই আপডেটটি কার্যকর করতে, পুরোনো অ্যাপের ম্যানিফেস্টটি আপডেট করে নতুন সাইটটিকে নির্দেশ করুন।
// Manifest at https://drive.google.com/manifest.json
{
"name": "Drive",
"start_url": "/",
"migrate_to": {
"id": "https://fileman.google.com/files/",
"install_url": "https://fileman.google.com/drive/installwebapp?usp=migrate"
}
}
ধাপ ৪: পুনঃনির্দেশ পরিচালনা করুন (ঐচ্ছিক)
migrate_to ফিল্ড ব্যবহার করার বিকল্প হিসেবে, আপনি পুরোনো অ্যাপের URL-গুলোকে নতুন অ্যাপে রিডাইরেক্ট করে মাইগ্রেশনের সংকেত দিতে পারেন এবং scope_extensions এর উপর নির্ভর করতে পারেন যাতে পুরোনো অ্যাপে 'আউট অফ স্কোপ' ব্যানারটি প্রদর্শিত না হয় । এর মানে হলো, পুরোনো অ্যাপের ম্যানিফেস্টটি কখনোই দেখা যাবে না এবং ফলস্বরূপ এটি কখনোই আপডেট করা যাবে না। অ্যাপ মাইগ্রেশন হওয়ার আগে পুরোনো অ্যাপটিকে আপডেট চালিয়ে যাওয়ার সুযোগ দিতে, migrate_from ভেতরে install_url সেট করুন, যাতে ব্রাউজারকে এমন একটি URL ফেচ করার কথা জানানো যায় যেখানে রিডাইরেকশন ছাড়াই পুরোনো ম্যানিফেস্টটি সংযুক্ত থাকে।
// Manifest at https://fileman.google.com/manifest.json
{
"name": "File Manager",
"id": "/files/",
"start_url": "/files/index.html",
....
"migrate_from": [
{
"id": "https://drive.google.com/",
"install_url": "https://drive.google.com/drive/installwebapp?usp=migrate"
}
]
}
এই তো! ইউএক্সটি অ্যাপ আপডেট করার পদ্ধতির মতোই, যেখানে অ্যাপ উইন্ডোর উপরের ডান কোণায় ব্যবহারকারীকে জানানো হয়:
'Review app update'-এ ক্লিক করলে নিম্নলিখিত ইউএক্স (UX) দেখা যায় (ম্যানিফেস্টে কী পরিবর্তন হয়েছে তার উপর নির্ভর করে):
ব্যবহারকারীর অভিজ্ঞতা নিয়ন্ত্রণ করুন
behavior ফ্ল্যাগ ব্যবহার করে আপনি মাইগ্রেশনটি কতটা আগ্রাসী হবে তা বেছে নিতে পারেন:
- পরামর্শ (ডিফল্ট): ব্যবহারকারী একটি পরোক্ষ বিজ্ঞপ্তি পান (উদাহরণস্বরূপ, অ্যাপ মেনুতে)। ডায়ালগটি চালু করে তারা তাদের অ্যাপ আপডেট, আনইনস্টল অথবা মাইগ্রেশনটি উপেক্ষা করার বিকল্প বেছে নিতে পারেন।
- বাধ্যতামূলক: পরবর্তীবার অ্যাপটি চালু করলে, ব্যবহারকারীর সামনে একটি বাধা সৃষ্টিকারী ডায়ালগ বক্স আসে। তাদের অবশ্যই হয় নতুন অরিজিনে আপডেট করতে হবে অথবা অ্যাপটি আনইনস্টল করতে হবে (অনুগ্রহ করে নিম্নলিখিত স্ক্রিনশটটি দেখুন)।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এই পছন্দটি সেট করতে হয়,
"migrate_from": [
{
"id": "https://example.com/social/",
"behavior": "force" // or suggest
}
]
উপসংহার
PWA মাইগ্রেশন ফিচারটি ডেভেলপারদের ব্যবহারকারীদের বাদ না দিয়েই আধুনিক ও নমনীয় ওয়েব আর্কিটেকচার তৈরি চালিয়ে যেতে সক্ষম করে।