নেভিগেশন এপিআই আয়ত্ত করা: সিঙ্গেল পেজ অ্যাপ্লিকেশন রাউটিং এবং হিস্ট্রি ম্যানেজমেন্ট

নেভিগেশন এপিআই সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA)-এর মধ্যে রাউটিং এবং হিস্ট্রি ম্যানেজমেন্ট পরিচালনার পদ্ধতিতে একটি গুরুত্বপূর্ণ অগ্রগতির প্রতিনিধিত্ব করে। প্রচলিত পদ্ধতিগুলি প্রায়শই `window.location` অবজেক্টের ব্যবহার বা তৃতীয় পক্ষের লাইব্রেরির উপর নির্ভর করে। যদিও এই পদ্ধতিগুলি আমাদের ভালভাবে সেবা দিয়েছে, নেভিগেশন এপিআই একটি আরও সুসংহত, পারফরম্যান্ট এবং বৈশিষ্ট্য-সমৃদ্ধ সমাধান প্রদান করে, যা ডেভেলপারদের ব্যবহারকারীর নেভিগেশন অভিজ্ঞতার উপর বৃহত্তর নিয়ন্ত্রণ দেয়।

নেভিগেশন এপিআই কী?

নেভিগেশন এপিআই হল একটি আধুনিক ব্রাউজার এপিআই যা এসপিএ-গুলির নেভিগেশন, রাউটিং এবং হিস্ট্রি পরিচালনার পদ্ধতিকে সহজ ও উন্নত করার জন্য ডিজাইন করা হয়েছে। এটি একটি নতুন `navigation` অবজেক্ট প্রবর্তন করে, যা মেথড এবং ইভেন্ট সরবরাহ করে ডেভেলপারদের নেভিগেশন ইভেন্টগুলি আটকানো এবং নিয়ন্ত্রণ করতে, ইউআরএল আপডেট করতে এবং পুরো পৃষ্ঠা রিলোড ছাড়াই একটি সামঞ্জস্যপূর্ণ ব্রাউজিং হিস্ট্রি বজায় রাখতে সাহায্য করে। এর ফলে একটি দ্রুত, মসৃণ এবং আরও প্রতিক্রিয়াশীল ব্যবহারকারীর অভিজ্ঞতা পাওয়া যায়।

নেভিগেশন এপিআই ব্যবহারের সুবিধা

• উন্নত পারফরম্যান্স: সম্পূর্ণ পৃষ্ঠা রিলোড দূর করে, নেভিগেশন এপিআই এসপিএ-এর পারফরম্যান্স উল্লেখযোগ্যভাবে উন্নত করে। বিভিন্ন ভিউয়ের মধ্যে ট্রানজিশন দ্রুত এবং মসৃণ হয়, যা ব্যবহারকারীকে আরও আকর্ষণীয় অভিজ্ঞতা দেয়।
• বর্ধিত নিয়ন্ত্রণ: এপিআই নেভিগেশন ইভেন্টগুলির উপর সূক্ষ্ম নিয়ন্ত্রণ প্রদান করে, যা ডেভেলপারদের প্রয়োজন অনুযায়ী নেভিগেশন আচরণ আটকানো এবং পরিবর্তন করতে দেয়। এর মধ্যে রয়েছে নেভিগেশন প্রতিরোধ করা, ব্যবহারকারীদের রিডাইরেক্ট করা এবং নেভিগেশনের আগে বা পরে কাস্টম লজিক চালানো।
• সরলীকৃত হিস্ট্রি ম্যানেজমেন্ট: নেভিগেশন এপিআই-এর মাধ্যমে ব্রাউজারের হিস্ট্রি স্ট্যাক পরিচালনা করা সহজ হয়ে যায়। ডেভেলপাররা প্রোগ্রাম্যাটিকভাবে হিস্ট্রি এন্ট্রি যোগ, প্রতিস্থাপন এবং ট্র্যাভার্স করতে পারে, যা একটি সামঞ্জস্যপূর্ণ এবং অনুমানযোগ্য ব্রাউজিং অভিজ্ঞতা নিশ্চিত করে।
• ডিক্লারেটিভ নেভিগেশন: নেভিগেশন এপিআই রাউটিং-এর জন্য একটি আরও ডিক্লারেটিভ পদ্ধতিকে উৎসাহিত করে, যা ডেভেলপারদের একটি স্পষ্ট এবং সংক্ষিপ্ত পদ্ধতিতে নেভিগেশন নিয়ম এবং আচরণ সংজ্ঞায়িত করতে দেয়। এটি কোডের পঠনযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা উন্নত করে।
• আধুনিক ফ্রেমওয়ার্কের সাথে ইন্টিগ্রেশন: নেভিগেশন এপিআই আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক এবং লাইব্রেরি যেমন React, Angular, এবং Vue.js-এর সাথে নির্বিঘ্নে সংহত করার জন্য ডিজাইন করা হয়েছে। এটি ডেভেলপারদের তাদের বিদ্যমান ডেভেলপমেন্ট ওয়ার্কফ্লোতে এপিআই-এর বৈশিষ্ট্যগুলি ব্যবহার করতে দেয়।

মূল ধারণা এবং বৈশিষ্ট্য

১. `navigation` অবজেক্ট

নেভিগেশন এপিআই-এর কেন্দ্রবিন্দু হল `navigation` অবজেক্ট, যা গ্লোবাল `window` অবজেক্টের মাধ্যমে অ্যাক্সেস করা যায় (যেমন, `window.navigation`)। এই অবজেক্টটি নেভিগেশন সম্পর্কিত বিভিন্ন প্রোপার্টি এবং মেথডে অ্যাক্সেস প্রদান করে, যার মধ্যে রয়েছে:

• `currentEntry`: নেভিগেশন হিস্ট্রিতে বর্তমান এন্ট্রি প্রতিনিধিত্বকারী একটি `NavigationHistoryEntry` অবজেক্ট রিটার্ন করে।
• `entries()`: নেভিগেশন হিস্ট্রির সমস্ত এন্ট্রি প্রতিনিধিত্বকারী `NavigationHistoryEntry` অবজেক্টগুলির একটি অ্যারে রিটার্ন করে।
• `navigate(url, { state, info, replace })`: একটি নতুন ইউআরএল-এ নেভিগেট করে।
• `back()`: আগের হিস্ট্রি এন্ট্রিতে ফিরে যায়।
• `forward()`: পরবর্তী হিস্ট্রি এন্ট্রিতে এগিয়ে যায়।
• `reload()`: বর্তমান পৃষ্ঠাটি রিলোড করে।
• `addEventListener(event, listener)`: নেভিগেশন-সম্পর্কিত ইভেন্টগুলির জন্য একটি ইভেন্ট লিসেনার যোগ করে।

২. `NavigationHistoryEntry`

`NavigationHistoryEntry` ইন্টারফেস নেভিগেশন হিস্ট্রিতে একটি একক এন্ট্রি প্রতিনিধিত্ব করে। এটি এন্ট্রি সম্পর্কে তথ্য প্রদান করে, যেমন এর ইউআরএল, স্টেট এবং অনন্য আইডি।

• `url`: হিস্ট্রি এন্ট্রির ইউআরএল।
• `key`: হিস্ট্রি এন্ট্রির জন্য একটি অনন্য শনাক্তকারী।
• `id`: আরেকটি অনন্য শনাক্তকারী, যা একটি নেভিগেশন ইভেন্টের জীবনচক্র ট্র্যাক করার জন্য বিশেষভাবে কার্যকর।
• `sameDocument`: একটি বুলিয়ান যা নির্দেশ করে যে নেভিগেশনটি একই ডকুমেন্টে নেভিগেশনের ফলাফল কিনা।
• `getState()`: হিস্ট্রি এন্ট্রির সাথে যুক্ত স্টেট রিটার্ন করে (নেভিগেশনের সময় সেট করা)।

৩. নেভিগেশন ইভেন্ট

নেভিগেশন এপিআই বেশ কয়েকটি ইভেন্ট প্রেরণ করে যা ডেভেলপারদের নেভিগেশন আচরণ নিরীক্ষণ এবং নিয়ন্ত্রণ করতে দেয়। এই ইভেন্টগুলির মধ্যে রয়েছে:

• `navigate`: যখন একটি নেভিগেশন শুরু হয় (যেমন, একটি লিঙ্কে ক্লিক করা, একটি ফর্ম জমা দেওয়া, বা `navigation.navigate()` কল করা) তখন এটি ডিসপ্যাচ হয়। নেভিগেশন অনুরোধগুলি আটকানো এবং পরিচালনা করার জন্য এটি প্রাথমিক ইভেন্ট।
• `navigatesuccess`: যখন একটি নেভিগেশন সফলভাবে সম্পন্ন হয় তখন এটি ডিসপ্যাচ হয়।
• `navigateerror`: যখন একটি নেভিগেশন ব্যর্থ হয় (যেমন, একটি নেটওয়ার্ক ত্রুটি বা একটি আনহ্যান্ডেলড ব্যতিক্রমের কারণে) তখন এটি ডিসপ্যাচ হয়।
• `currentchange`: যখন বর্তমান হিস্ট্রি এন্ট্রি পরিবর্তিত হয় (যেমন, সামনে বা পিছনে নেভিগেট করার সময়) তখন এটি ডিসপ্যাচ হয়।
• `dispose`: যখন একটি `NavigationHistoryEntry` আর পৌঁছানো যায় না, যেমন `replaceState` অপারেশনের সময় এটি হিস্ট্রি থেকে সরানো হলে, তখন এটি ডিসপ্যাচ হয়।

নেভিগেশন এপিআই দিয়ে রাউটিং বাস্তবায়ন: একটি ব্যবহারিক উদাহরণ

আসুন একটি সহজ এসপিএ-তে বেসিক রাউটিং বাস্তবায়ন করতে নেভিগেশন এপিআই কীভাবে ব্যবহার করতে হয় তা ব্যাখ্যা করি। একটি অ্যাপ্লিকেশন বিবেচনা করুন যার তিনটি ভিউ রয়েছে: হোম, অ্যাবাউট এবং কন্টাক্ট।

প্রথমে, রুট পরিবর্তনগুলি পরিচালনা করার জন্য একটি ফাংশন তৈরি করুন:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
  }
}

এরপরে, `navigate` ইভেন্টে একটি ইভেন্ট লিসেনার যোগ করুন:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Prevent default browser navigation

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Resolve the promise after route handling
  });

  event.transition = promise;
});

এই কোডটি `navigate` ইভেন্টটি আটকায়, `event.destination` অবজেক্ট থেকে ইউআরএল বের করে, ডিফল্ট ব্রাউজার নেভিগেশন প্রতিরোধ করে, কন্টেন্ট আপডেট করার জন্য `handleRouteChange` কল করে, এবং `event.transition` প্রমিজ সেট করে। `event.transition` সেট করা নিশ্চিত করে যে ব্রাউজার পৃষ্ঠাটি দৃশ্যত আপডেট করার আগে কন্টেন্ট আপডেট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে।

অবশেষে, আপনি এমন লিঙ্ক তৈরি করতে পারেন যা নেভিগেশন ট্রিগার করে:

Home | About | Contact

এবং সেই লিঙ্কগুলিতে একটি ক্লিক লিসেনার সংযুক্ত করুন:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

এটি নেভিগেশন এপিআই ব্যবহার করে বেসিক ক্লায়েন্ট-সাইড রাউটিং সেট আপ করে। এখন, লিঙ্কগুলিতে ক্লিক করলে একটি নেভিগেশন ইভেন্ট ট্রিগার হবে যা সম্পূর্ণ পৃষ্ঠা রিলোড ছাড়াই `content` ডিভের কন্টেন্ট আপডেট করবে।

স্টেট ম্যানেজমেন্ট যোগ করা

নেভিগেশন এপিআই আপনাকে প্রতিটি হিস্ট্রি এন্ট্রির সাথে স্টেট সংযুক্ত করার অনুমতি দেয়। এটি নেভিগেশন ইভেন্ট জুড়ে ডেটা সংরক্ষণ করার জন্য দরকারী। আসুন একটি স্টেট অবজেক্ট অন্তর্ভুক্ত করতে পূর্ববর্তী উদাহরণটি পরিবর্তন করি।

`navigation.navigate()` কল করার সময়, আপনি একটি `state` অবজেক্ট পাস করতে পারেন:

window.navigation.navigate('/about', { state: { pageTitle: 'About Us' } });

`navigate` ইভেন্ট লিসেনারের ভিতরে, আপনি `event.destination.getState()` ব্যবহার করে স্টেট অ্যাক্সেস করতে পারেন:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'My App'; // Default title

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      title = 'Home';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
      title = '404 Not Found';
  }
  document.title = title;
}

এই পরিবর্তিত উদাহরণে, `handleRouteChange` ফাংশন এখন একটি `state` প্যারামিটার গ্রহণ করে এবং এটি ডকুমেন্ট টাইটেল আপডেট করতে ব্যবহার করে। যদি কোনো স্টেট পাস না করা হয়, তবে এটি ডিফল্টভাবে 'My App' ব্যবহার করে।

`navigation.updateCurrentEntry()` ব্যবহার করা

কখনও কখনও আপনি একটি নতুন নেভিগেশন ট্রিগার না করে বর্তমান হিস্ট্রি এন্ট্রির স্টেট আপডেট করতে চাইতে পারেন। `navigation.updateCurrentEntry()` মেথডটি আপনাকে এটি করতে দেয়। উদাহরণস্বরূপ, যদি একজন ব্যবহারকারী বর্তমান পৃষ্ঠায় একটি সেটিং পরিবর্তন করে, আপনি সেই পরিবর্তনটি প্রতিফলিত করতে স্টেট আপডেট করতে পারেন:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Updated setting:', setting, 'to', value);
}

// Example usage:
updateUserSetting('theme', 'dark');

এই ফাংশনটি বর্তমান স্টেট পুনরুদ্ধার করে, আপডেট করা সেটিংটি মার্জ করে এবং তারপর নতুন স্টেট দিয়ে বর্তমান হিস্ট্রি এন্ট্রি আপডেট করে।

উন্নত ব্যবহার এবং বিবেচ্য বিষয়

১. ফর্ম সাবমিশন হ্যান্ডলিং

নেভিগেশন এপিআই এসপিএ-তে ফর্ম সাবমিশন হ্যান্ডেল করতে ব্যবহার করা যেতে পারে, যা সম্পূর্ণ পৃষ্ঠা রিলোড প্রতিরোধ করে এবং আরও নির্বিঘ্ন ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। আপনি ফর্ম সাবমিশন ইভেন্টটি আটকিয়ে `navigation.navigate()` ব্যবহার করে ইউআরএল আপডেট করতে এবং সম্পূর্ণ পৃষ্ঠা রিলোড ছাড়াই ফলাফল প্রদর্শন করতে পারেন।

২. অ্যাসিঙ্ক্রোনাস অপারেশন

নেভিগেশন ইভেন্ট হ্যান্ডেল করার সময়, আপনাকে অ্যাসিঙ্ক্রোনাস অপারেশন সম্পাদন করতে হতে পারে, যেমন একটি এপিআই থেকে ডেটা আনা। `event.transition` প্রোপার্টি আপনাকে নেভিগেশন ইভেন্টের সাথে একটি প্রমিজ সংযুক্ত করতে দেয়, যা নিশ্চিত করে যে ব্রাউজার পৃষ্ঠা আপডেট করার আগে অ্যাসিঙ্ক্রোনাস অপারেশনটি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে। উপরের উদাহরণগুলি দেখুন।

৩. স্ক্রোল পুনরুদ্ধার

নেভিগেশনের সময় স্ক্রোল অবস্থান বজায় রাখা একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য অত্যন্ত গুরুত্বপূর্ণ। নেভিগেশন এপিআই হিস্ট্রিতে পিছনে বা সামনে নেভিগেট করার সময় স্ক্রোল অবস্থান পুনরুদ্ধার করার জন্য ব্যবস্থা প্রদান করে। আপনি `NavigationHistoryEntry`-এর `scroll` প্রোপার্টি ব্যবহার করে স্ক্রোল অবস্থান সংরক্ষণ এবং পুনরুদ্ধার করতে পারেন।

৪. ত্রুটি হ্যান্ডলিং

নেভিগেশনের সময় ঘটতে পারে এমন ত্রুটিগুলি হ্যান্ডেল করা অপরিহার্য, যেমন নেটওয়ার্ক ত্রুটি বা আনহ্যান্ডেলড ব্যতিক্রম। `navigateerror` ইভেন্টটি আপনাকে এই ত্রুটিগুলি সুন্দরভাবে ধরতে এবং হ্যান্ডেল করতে দেয়, অ্যাপ্লিকেশনটিকে ক্র্যাশ করা থেকে বা ব্যবহারকারীকে একটি ত্রুটি বার্তা দেখানো থেকে বিরত রাখে।

৫. প্রগ্রেসিভ এনহ্যান্সমেন্ট

নেভিগেশন এপিআই দিয়ে এসপিএ তৈরি করার সময়, প্রগ্রেসিভ এনহ্যান্সমেন্ট বিবেচনা করা গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার অ্যাপ্লিকেশনটি ব্রাউজার দ্বারা নেভিগেশন এপিআই সমর্থিত না হলেও সঠিকভাবে কাজ করে। আপনি `navigation` অবজেক্টের উপস্থিতি পরীক্ষা করার জন্য ফিচার ডিটেকশন ব্যবহার করতে পারেন এবং প্রয়োজনে প্রচলিত রাউটিং পদ্ধতিতে ফিরে যেতে পারেন।

প্রচলিত রাউটিং পদ্ধতির সাথে তুলনা

এসপিএ-তে প্রচলিত রাউটিং পদ্ধতিগুলি প্রায়শই `window.location` অবজেক্ট ব্যবহার করে বা `react-router` বা `vue-router`-এর মতো তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে। যদিও এই পদ্ধতিগুলি ব্যাপকভাবে ব্যবহৃত এবং সুপ্রতিষ্ঠিত, তাদের কিছু সীমাবদ্ধতা রয়েছে:

• সম্পূর্ণ পৃষ্ঠা রিলোড: সরাসরি `window.location` ব্যবহার করলে সম্পূর্ণ পৃষ্ঠা রিলোড হতে পারে, যা ধীর এবং ব্যবহারকারীর অভিজ্ঞতার জন্য বিঘ্নকারী হতে পারে।
• জটিলতা: প্রচলিত পদ্ধতিগুলির সাথে হিস্ট্রি এবং স্টেট পরিচালনা করা জটিল এবং ত্রুটিপ্রবণ হতে পারে, বিশেষ করে বড় এবং জটিল অ্যাপ্লিকেশনগুলিতে।
• পারফরম্যান্স ওভারহেড: তৃতীয় পক্ষের রাউটিং লাইব্রেরিগুলি উল্লেখযোগ্য পারফরম্যান্স ওভারহেড যোগ করতে পারে, বিশেষ করে যদি সেগুলি আপনার অ্যাপ্লিকেশনের নির্দিষ্ট প্রয়োজনের জন্য অপ্টিমাইজ করা না হয়।

নেভিগেশন এপিআই রাউটিং এবং হিস্ট্রি ম্যানেজমেন্টের জন্য একটি আরও সুসংহত, পারফরম্যান্ট এবং বৈশিষ্ট্য-সমৃদ্ধ সমাধান প্রদান করে এই সীমাবদ্ধতাগুলি সমাধান করে। এটি সম্পূর্ণ পৃষ্ঠা রিলোড দূর করে, হিস্ট্রি ম্যানেজমেন্টকে সহজ করে, এবং নেভিগেশন ইভেন্টগুলির উপর সূক্ষ্ম নিয়ন্ত্রণ প্রদান করে।

ব্রাউজার সামঞ্জস্যতা

২০২৪ সালের শেষের দিকে, নেভিগেশন এপিআই আধুনিক ব্রাউজারগুলিতে, যেমন ক্রোম, ফায়ারফক্স, সাফারি এবং এজ-এ ভাল সমর্থন উপভোগ করছে। তবে, আপনার প্রোডাকশন অ্যাপ্লিকেশনগুলিতে নেভিগেশন এপিআই বাস্তবায়ন করার আগে Can I use-এর মতো রিসোর্স থেকে সর্বশেষ ব্রাউজার সামঞ্জস্যতার তথ্য পরীক্ষা করা সর্বদা একটি ভাল অভ্যাস। যদি পুরোনো ব্রাউজার সমর্থন আবশ্যক হয়, তবে একটি পলিফিল বা একটি ফলব্যাক ব্যবস্থা ব্যবহার করার কথা বিবেচনা করুন।

উপসংহার

নেভিগেশন এপিআই উন্নত রাউটিং এবং হিস্ট্রি ম্যানেজমেন্ট ক্ষমতা সহ আধুনিক, পারফরম্যান্ট এসপিএ তৈরির জন্য একটি শক্তিশালী টুল। এপিআই-এর বৈশিষ্ট্যগুলি ব্যবহার করে, ডেভেলপাররা দ্রুত, মসৃণ এবং আরও আকর্ষক ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারে। যদিও প্রাথমিক শেখার পর্বটি সহজ, পুরোনো পদ্ধতির তুলনায় কিছুটা কঠিন হতে পারে, নেভিগেশন এপিআই-এর সুবিধাগুলি, বিশেষ করে জটিল অ্যাপ্লিকেশনগুলিতে, এটিকে একটি সার্থক বিনিয়োগ করে তোলে। নেভিগেশন এপিআই গ্রহণ করুন এবং আপনার এসপিএ-এর সম্পূর্ণ সম্ভাবনা উন্মোচন করুন।

আরও জানুন

• এমডিএন ওয়েব ডক্স: নেভিগেশন এপিআই
• ডাব্লিউআইসিজি নেভিগেশন এপিআই স্পেসিফিকেশন