ক্রোম 105 ন্যাভিগেশন API এর NavigateEvent দুটি নতুন পদ্ধতি প্রবর্তন করেছে (102 সালে প্রবর্তিত) পদ্ধতিগুলিকে উন্নত করতে যা অনুশীলনে সমস্যাযুক্ত প্রমাণিত হয়েছে। intercept() , যা ডেভেলপাররা নেভিগেশনের পরে অবস্থা নিয়ন্ত্রণ করে, transitionWhile() প্রতিস্থাপন করে, যা ব্যবহার করা কঠিন বলে প্রমাণিত হয়েছে। scroll() পদ্ধতি, যা ইউআরএল-এ নির্দিষ্ট একটি অ্যাঙ্করে স্ক্রোল করে, restoreScroll() প্রতিস্থাপন করে যা সব ধরনের নেভিগেশনের জন্য কাজ করে না।
এই নিবন্ধে, আমি উভয়ের সাথে সমস্যাগুলি ব্যাখ্যা করব এবং কীভাবে নতুন পদ্ধতিগুলি সেই সমস্যাগুলি সমাধান করে।
NavigateEvent.transitionWhile()
NavigateEvent.trasitionWhile() পদ্ধতি, Chrome 102-এ নেভিগেশন API-এর সাথে প্রবর্তিত, একক পৃষ্ঠার অ্যাপে ক্লায়েন্ট-সাইড ট্রানজিশনের জন্য নেভিগেশন বাধা দেয়। এটির প্রথম যুক্তি হল একটি প্রতিশ্রুতি যা ব্রাউজার এবং ওয়েব অ্যাপ্লিকেশনের অন্যান্য অংশে সংকেত দেয় যে এটি শেষ হয়েছে।
এটি অনুশীলনে খারাপভাবে কাজ করেছিল। এই সাধারণ কোডিং প্যাটার্ন বিবেচনা করুন:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
এটি কার্যকরীভাবে নীচের কোডের সমতুল্য। এটি API-এর সচেতন হওয়ার আগে নেভিগেশনের কিছু অংশ চালানোর কারণ হয় যে বিকাশকারী নেভিগেশনটি বাধা দিতে চায়।
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
একটি উদাহরণ যেখানে এটি একটি অ্যাপকে বিশৃঙ্খল করতে পারে তা হল স্ক্রোল পুনরুদ্ধার যুক্তিতে যেখানে এটি আগের চেয়ে DOM পরিবর্তনের পরে স্ক্রোল অবস্থানগুলি ক্যাপচার করে৷
কি পরিবর্তন হয়েছে
transitionWhile() প্রতিস্থাপন করতে, বর্তমান স্পেক NavigateEvent.intercept() প্রবর্তন করে। নতুন পদ্ধতিটি transitionWhile() দ্বারা সমর্থিত focusReset এবং scrollRestoration বৈশিষ্ট্য ছাড়াও একটি হ্যান্ডলার নেয়। নতুন হ্যান্ডলার সর্বদা নেভিগেশন কমিট করার পরে চলে, এবং স্ক্রোল পজিশনের মতো জিনিসগুলি ক্যাপচার করা হয়েছে, transitionWhile() এর সমস্যাগুলি এড়িয়ে।
transitionWhile() পদ্ধতিটি এখনও উপলব্ধ, কিন্তু এটি অবমুক্ত করা হয়েছে এবং Chrome 108 এ সরানো হবে।
ইন্টারসেপ্ট ব্যবহার করে()
NavigateEvent.intercept() transitionWhile() এর মতো একই বিধিনিষেধ রয়েছে, যেমন এটিতে সমস্ত নেভিগেশন ইভেন্টে কল করা যায় না। ক্রস-অরিজিন নেভিগেশন আটকানো যাবে না, এবং ক্রস-ডকুমেন্ট ট্রাভার্সালও করা যাবে না। এটি করলে "SecurityError" টাইপের একটি DOMException হবে।
intercept() ব্যবহার করতে, কল করার সময় আপনার কাস্টম হ্যান্ডলারটি পাস করুন।
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
একটি নেভিগেশন যেমন পৃষ্ঠার উপরের থেকে একটি অ্যাঙ্করে (এটিকে /a থেকে /a#id তে সরানো বলে) এমনকি একটি একক পৃষ্ঠা অ্যাপেও ব্রাউজার দ্বারা সম্পূর্ণরূপে পরিচালনা করা হয়। কিন্তু অন্য 'পৃষ্ঠা' ( /a থেকে /b#id ) এ অ্যাঙ্করে নেভিগেট করা, যা বহু পৃষ্ঠার অ্যাপের জন্য সহজ, একক পৃষ্ঠার অ্যাপের জন্য আরও জটিল। অ্যাপটিকে NavigateEvent.transitionWhile() ব্যবহার করে /b#id এ নেভিগেশন বাধা দিতে হবে, তারপরে অ্যাঙ্করটি দেখতে NavigateEvent.restoreScroll() এ কল করতে হবে। উপরে উল্লিখিত হিসাবে, এটি বর্তমানে করা কঠিন।
কি পরিবর্তন হয়েছে
একক পৃষ্ঠার অ্যাপ্লিকেশানগুলিতে, আপনি এখন নিয়ন্ত্রণ করতে পারেন যে ব্রাউজার কোনও অ্যাঙ্করে স্ক্রোলিং পরিচালনা করে বা আপনার কোড করে কিনা।
স্ক্রোল ব্যবহার করে()
ডিফল্টরূপে, ইন্টারসেপ্ট হ্যান্ডারটি পূরণ হয়ে গেলে ব্রাউজার স্বয়ংক্রিয়ভাবে স্ক্রলিং পরিচালনা করার চেষ্টা করবে। যদি আপনি নিজে স্ক্রলিং পরিচালনা করতে চান, তাহলে scroll "manual" এ সেট করুন, তারপরে যখন ব্রাউজার স্ক্রোল অবস্থান সেট করার চেষ্টা করবে তখন NavigateEvent.scroll() এ কল করুন।
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
restoreScroll() পদ্ধতিটি এখনও উপলব্ধ, কিন্তু এটিকে অবমূল্যায়ন করা হয়েছে এবং Chrome 108 এ সরানো হবে।
উপসংহার
আমরা শীঘ্রই নেভিগেশন API-এ আমাদের নিবন্ধটি আপডেট করার আশা করছি। ইতিমধ্যে, এই API-এর স্পেকটিতে বিশেষভাবে ওয়েব ডেভেলপারদের জন্য অনেক তথ্য রয়েছে।