نسخه آزمایشی جدید Soft Navigations

بری پولارد
مایکل موکنی

منتشر شده: ۳۱ ژوئیه ۲۰۲۵

کروم در حال راه‌اندازی یک نسخه آزمایشی جدید از کروم ۱۳۹ برای رابط برنامه‌نویسی کاربردی ناوبری نرم (Soft Navigations API) است که قبلاً روی آن آزمایش می‌کردیم . این نسخه آزمایشی به سایت‌ها اجازه می‌دهد تا این رابط برنامه‌نویسی کاربردی (API) را در سایت خود با کاربران واقعی امتحان کنند تا API را به صورت میدانی آزمایش کرده و بازخورد تیم کروم را ارائه دهند.

ناوبری‌های نرم چیستند؟

یک ناوبری نرم زمانی است که جاوا اسکریپت یک ناوبری (مثلاً کلیک روی یک لینک) را متوقف می‌کند و محتوای صفحه موجود را به‌روزرسانی می‌کند، نه اینکه یک صفحه جدید بارگذاری کند و سپس URL در نوار آدرس به‌روزرسانی شود (با یک وضعیت تاریخچه برای امکان بازگشت و رفتن به ناوبری‌های نرم). برای کاربر، این ناوبری‌ها مانند ناوبری‌های معمولی به نظر می‌رسند، اما از نظر مرورگر، صفحه هنوز همان صفحه اصلی است.

چرا به API ناوبری نرم نیاز است؟

API ناوبری نرم (Soft Navigations API ) یک API پیشنهادی است که امکان تشخیص مبتنی بر اکتشاف به اصطلاح "پیمایش‌های نرم" را که توسط سایت‌های Single Page Application (SPA) استفاده می‌شوند، فراهم می‌کند. از آنجایی که هیچ پیمایش صفحه واقعی برای یک ناوبری نرم اتفاق نمی‌افتد، این بدان معناست که اقدامات خاصی که معمولاً برای یک ناوبری اتفاق می‌افتد، باید به صورت دستی توسط جاوا اسکریپت مدیریت شوند. برخی اقدامات، مانند مدیریت تاریخچه ناوبری، با APIهای فعلی امکان‌پذیر است. با این حال، اقدامات دیگر، مانند اندازه‌گیری Core Web Vitals ، برای این پیمایش‌ها امکان‌پذیر نیست.

API ناوبری نرم (Soft Navigation API) امکان مشاهده ناوبری‌های نرم را فراهم می‌کند. در حالی که جاوااسکریپت آغازکننده ناوبری نرم (معمولاً یک چارچوب جاوااسکریپت) از زمان وقوع ناوبری آگاه است، سایر جاوااسکریپت‌ها و خود مرورگر از آن آگاه نخواهند بود.

Core Web Vitals و SPAها

یکی از محرک‌های اصلی API ناوبری نرم، امکان اندازه‌گیری Core Web Vitals برای SPAها است. Core Web Vitals هم توسط مرورگر (برای نمایش در ابزارهایی مانند گزارش تجربه کاربری کروم ) و هم توسط کتابخانه‌های جاوا اسکریپت Real User Monitoring (RUM) اندازه‌گیری می‌شوند.

چارچوب‌های جاوا اسکریپت می‌توانند برخی از جنبه‌های Core Web Vitals را اندازه‌گیری کنند. به ویژه Interaction to Next Paint (INP) و Cumulative Layout Shift (CLS) مبتنی بر مقادیر اولیه (به ترتیب Event Timing API و Layout Instability API ) هستند که می‌توانند در هر بازه زمانی برای محاسبه معیارهای INP و CLS اندازه‌گیری شوند. با این حال، از آنجا که مرورگر Largest Contentful Paint (LCP) را بر اساس پیمایش‌ها و تعاملات صفحه گزارش و نهایی می‌کند، چارچوب‌های جاوا اسکریپت به جز عملکرد بارگذاری اولیه برای SPAها، به چیز دیگری دید ندارند.

چگونه API ناوبری نرم (Soft Navigation API) امکان اندازه‌گیری Core Web Vitals را برای SPAها فراهم می‌کند؟

اولین نسخه از API ناوبری نرم، اکتشافات ناوبری نرم را با تنظیم مجدد LCP همراه کرد. پس از تنظیم مجدد، LCP می‌تواند برای ناوبری‌های نرم برای رنگ‌آمیزی محتوایی جدید دوباره منتشر شود و امکان اندازه‌گیری این معیار را برای ناوبری‌های نرم فراهم کند.

این نسخه جدید رویکرد متفاوتی را در پیش گرفته و این مفاهیم را به API ناوبری نرم و ورودی جدید عملکرد Interaction to Contentful Paint تفکیک می‌کند. ورودی interaction-contentful-paint میزان "رنگ‌آمیزی محتوا" را پس از تعاملات اندازه‌گیری می‌کند. در حال حاضر، این فقط برای ناوبری‌های نرم منتشر می‌شود، اما در صورت فعال بودن برای همه تعاملات، موارد استفاده بالقوه دیگری فراتر از LCP را باز می‌کند.

این API همچنین هر یک از ورودی‌های عملکرد largest-contentful-paint ، interaction-contentful-paint ، event-timing و layout-shift را گسترش داد تا شامل یک شناسه باشد که نشان می‌دهد ورودی مربوط به کدام ناوبری است. ورودی‌های عملکرد پس از رویدادی که اندازه‌گیری می‌کنند - معمولاً در زمان بیکاری - منتشر می‌شوند. این بدان معناست که URL اغلب تا زمانی که ورودی عملکرد منتشر می‌شود، تغییر کرده است. گنجاندن ناوبری در ورودی، اندازه‌گیری Core Web Vitals را برای URL داده شده بسیار آسان‌تر می‌کند، بدون اینکه لازم باشد زمان‌های ورود عملکرد را با زمان‌های ورود ناوبری نرم مطابقت دهید.

چرا یک روش اکتشافی؟

API ناوبری نرم، ناوبری نرم را زمانی در نظر می‌گیرد که موارد زیر رخ دهد:

  • یک تعامل مبتنی بر کاربر رخ می‌دهد (به‌روزرسانی‌های URL بدون تعامل کاربر حساب نمی‌شوند)
  • ... که منجر به اصلاح DOM و رنگ‌آمیزی می‌شود
  • ... و یک به‌روزرسانی URL رخ می‌دهد.
  • به‌روزرسانی URL، شامل تغییر در تاریخچه.

این API به جای اینکه به یک چارچوب جاوا اسکریپت اجازه دهد یک ناوبری نرم افزاری را "منتشر" کند یا بر اساس API ناوبری ساخته شود، از این رویکرد مبتنی بر اکتشاف استفاده می‌کند، زیرا این امر امکان درک مداوم از آنچه یک ناوبری نرم افزاری را تشکیل می‌دهد، صرف نظر از چارچوب یا نحوه استفاده توسعه‌دهنده از آن را فراهم می‌کند.

چارچوب‌ها یا توسعه‌دهندگان ممکن است URL را برای یک ناوبری نرم، حتی بدون تعامل کاربر یا به‌روزرسانی DOM که ما آن را به عنوان ناوبری در نظر می‌گیریم، به‌روزرسانی کنند. آن‌ها همچنین ممکن است URL را در زمان‌های مختلف به‌روزرسانی کنند - در شروع تعامل یا فقط در پایان، زمانی که تعامل کامل شده است - یا در هر حالتی بین این دو.

به جای تکیه بر انتخاب‌های چارچوب، ایجاد تشخیص ناوبری نرم در مرورگر، «اکتشاف‌های» متعارفی (با بازخورد شما از این آزمایش اصلی) ایجاد می‌کند که به ما امکان می‌دهد Core Web Vitals را برای ناوبری‌های نرم در مقیاس بزرگ اندازه‌گیری کنیم و چنین اندازه‌گیری‌هایی را در مقیاس قابل مقایسه انجام دهیم.

چارچوب‌ها و توسعه‌دهندگان همچنین می‌توانند از روش‌های اکتشافی API مربوط به Soft Navigations صرف نظر کنند و از APIهای زمان‌بندی رویداد، ناپایداری طرح‌بندی و تعامل با محتوای رنگ (Interaction to Contentful Paint) برای اندازه‌گیری معیارهای عملکرد اضافی مورد نظر خود استفاده کنند، اما ما Core Web Vitals را با استفاده از این روش اکتشافی توصیه می‌کنیم تا امکان اندازه‌گیری در سایت‌های مختلف فراهم شود.

برای آزمایش API ناوبری نرم به کمک نیاز است

ما برای آزمایش API مربوط به Soft Navigations به کمک نیاز داریم تا بررسی کنیم که آیا روش اکتشافی به درستی با انتظارات شما از زمان وقوع یک Soft Navigation مطابقت دارد یا خیر. آیا مواردی وجود دارد که API، Soft Navigations را گزارش نکند، در حالی که شما آنها را رخ داده می‌دانید؟ از طرف دیگر، آیا API، ناوبری‌هایی را که شما Soft Navigation نمی‌دانید، بیش از حد تکرار می‌کند؟

نمونه‌هایی که ما شاهد ایجاد مشکل بوده‌ایم شامل مواردی است که یک URL به جای اضافه کردن تاریخچه با replaceState به‌روزرسانی می‌شود، یا زمانی که یک ناوبری که توسط کاربر آغاز نشده است رخ می‌دهد (به عنوان مثال خروج از سیستم در زمان انقضا). هر دو مورد با عدم تطابق با اکتشافات توضیح داده می‌شوند و تیم Chrome با عدم لحاظ کردن این موارد مشکلی ندارد، اما ما می‌خواهیم از توسعه‌دهندگان وب بشنویم که آیا موافق هستند یا خیر. و ما به ویژه می‌خواهیم در مورد مواردی بشنویم که به نظر می‌رسد اکتشافات رعایت شده‌اند اما API هنوز ناوبری نرم را تشخیص نمی‌دهد.

علاوه بر این، ما می‌خواهیم بدانیم که آیا این API و قابلیت جدید Interaction to Contentful Paint، کاربرد اصلی اندازه‌گیری Core Web Vitals برای SPAها را پوشش می‌دهد یا خیر.

ما می‌خواهیم API تا حد امکان مفید باشد و این کار قبل از راه‌اندازی و شروع به کار سایت‌ها بسته به پیاده‌سازی آن، بسیار آسان‌تر است. بنابراین، از توسعه‌دهندگان SPA و کسانی که علاقه‌مند به اندازه‌گیری عملکرد وب برای این سایت‌ها هستند، می‌خواهیم که این API را امتحان کنند و به ما بگویند که چگونه برای شما کار می‌کند.

چگونه آزمایش کنیم

این API را می‌توان به صورت محلی با پرچم‌های کروم یا گزینه‌های خط فرمان آزمایش کرد. علاوه بر این، می‌توان آن را در محل با نسخه آزمایشی مبدا نیز آزمایش کرد.

برای جزئیات فنی بیشتر در مورد API، و به ویژه نحوه اندازه‌گیری Core Web Vitals ، به مستندات ما یا مخزن GitHub مراجعه کنید. علاوه بر این، یک نسخه آزمایشی از کتابخانه web-vitals با قابلیت پیمایش نرم افزاری نیز موجود است.

بازخورد

ما به طور فعال در حال دریافت بازخورد در مورد این آزمایش در مکان‌های زیر هستیم:

اگر شک دارید، زیاد نگران نباشید، ما ترجیح می‌دهیم بازخوردها را در هر دو مکان بشنویم و با کمال میل مشکلات را در هر دو مکان بررسی و به محل صحیح ارجاع خواهیم داد.