‏Navigation API؛ مسیریابی مدرن برای اپ‌های تک‌صفحه‌ای

تو مستندات MDN اومده که Navigation API یه رابط جدید مرورگره که بهت اجازه می‌ده ناوبری مرورگر رو شروع کنی، رهگیری کنی و مدیریتش کنی، و حتی تاریخچهٔ صفحه‌های اپلیکیشن رو بررسی کنی. این API جانشین ابزارهای قدیمی‌تر مثل History API و window.location هست و مخصوصاً برای نیازهای اپ‌های تک‌صفحه‌ای (SPA) ساخته شده. تو SPAها قالب صفحه ثابت می‌مونه و محتوا به‌صورت پویا عوض می‌شه، که همین رفتار طبیعی جلو/عقب رفتن تو تاریخچه رو خراب می‌کنه؛ این API همین شکاف رو پر می‌کنه.

دسترسی بهش از طریق Window.navigation هست و هر پنجره یه نمونهٔ مخصوص خودش رو داره. مهم‌ترین رویدادش navigate هست که موقع شروع هر نوع ناوبری اجرا می‌شه. این یعنی می‌تونی همهٔ جابه‌جایی‌های صفحه رو از یه نقطهٔ مرکزی کنترل کنی، که برای مسیریابی تو فریم‌ورک‌های SPA عالیه. به گفتهٔ MDN، تو History API قدیمی تشخیص و واکنش به همهٔ ناوبری‌ها گاهی سخت بود.

شیء NavigateEvent دو متد کلیدی داره. متد intercept() بهت اجازه می‌ده رفتار دلخواه برای ناوبری تعریف کنی؛ مثلاً محتوای جدید رو بر اساس مسیر URL لود کنی یا کاربر رو به صفحهٔ ورود هدایت کنی. متد scroll() هم بهت اجازه می‌ده اسکرول مرورگر رو دستی و زودتر اجرا کنی، به‌جای اینکه منتظر بمونی مرورگر خودش انجامش بده.

این مثال نشون می‌ده چطور با intercept() یه ناوبری رو می‌گیری و محتوا رو خودت لود می‌کنی:

navigation.addEventListener("navigate", (event) => {
  if (!event.canIntercept) return;
  if (event.hashChange || event.downloadRequest !== null) return;

  const url = new URL(event.destination.url);
  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        renderArticlePagePlaceholder();
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

برای پیمایش تاریخچه هم متدهای navigate()، reload()، back()، forward() و traverseTo() رو داری. هر کدوم یه شیء با دو پرامیس { committed, finished } برمی‌گردونن: committed وقتی پر می‌شه که URL عوض شده و یه ورودی تاریخچهٔ جدید ساخته شده، و finished وقتی که همهٔ کارهای داخل intercept() تموم شده. نکتهٔ خوبش اینه که این API فقط ورودی‌های تاریخچهٔ هم‌مبدا و توی همین کانتکست رو نشون می‌ده، پس پیمایش تاریخچه خیلی کم‌دردسرتر از History API قدیمیه.

هر ورودی تاریخچه می‌تونه یه state دلخواه نگه داره؛ مثلاً تعداد بازدید یه view یا وضعیت UI. به گفتهٔ نویسنده، نمی‌تونی state رو مستقیم بگیری و تغییر بدی؛ به‌جاش موقع navigate() یا reload() اون رو ست می‌کنی، و برای تغییرهای مستقل از ناوبری از updateCurrentEntry() استفاده می‌کنی.

البته چند محدودیت هم داره: رویداد navigate موقع اولین لود صفحه اجرا نمی‌شه، API فقط تو یه فریم کار می‌کنه، و فعلاً نمی‌تونی لیست تاریخچه رو دستی دستکاری یا مرتب کنی.

نکات کلیدی:

• جانشین History API و window.location، مخصوص اپ‌های تک‌صفحه‌ای (SPA)
• رویداد navigate همهٔ ناوبری‌ها رو از یه نقطهٔ مرکزی کنترل می‌کنه
• متد intercept() رفتار دلخواه و متد scroll() اسکرول دستی رو ممکن می‌کنه
• فقط ورودی‌های تاریخچهٔ هم‌مبدا رو نشون می‌ده، پس پیمایش امن‌تره
• از ژانویهٔ ۲۰۲۶ روی نسخه‌های جدید مرورگرها در دسترسه