منتشر شده: ۲۰ آوریل ۲۰۲۶
کروم قصد دارد API ناوبری نرم (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 هم توسط مرورگر (برای نمایش در ابزارهایی مانند گزارش تجربه کاربری کروم ) و هم توسط صاحبان سایت با استفاده از راهکارهای نظارت واقعی کاربر (RUM) اندازهگیری میشوند.
چارچوبهای جاوا اسکریپت میتوانند برخی از جنبههای Core Web Vitals را برای SPAها اندازهگیری کنند. به طور خاص ، Interaction to Next Paint (INP) و Cumulative Layout Shift (CLS) مبتنی بر مقادیر اولیه (به ترتیب Event Timing API و Layout Instability API ) هستند که میتوانند در هر بازه زمانی برای محاسبه این معیارها اندازهگیری شوند. با این حال، معیارهای دیگری مانند Largest Contentful Paint (LCP) فقط توسط مرورگر - بر اساس پیمایش صفحات - منتشر میشوند و پس از تعامل نهایی میشوند .
چگونه API امکان اندازهگیری Core Web Vitals را برای SPAها فراهم میکند
رابط برنامهنویسی کاربردی ناوبری نرم (Soft Navigation API) دو ورودی جدید برای عملکرد معرفی میکند:
- یک ورودی
SoftNavigationEntryکه زمانی که تمام الزامات ناوبری نرم برآورده شده باشد، منتشر میشود. این شامل یکinteractionIdبرای تعاملی که باعث ناوبری نرم شده است، یکnavigationIdمنحصر به فرد وnameکه برای URL جدید تنظیم شده است و زمانبندیهای مختلف ترسیم که میتوانند برای اندازهگیری اولین ترسیم محتوایی ناوبری نرم استفاده شوند، میشود. - یک ورودی
InteractionContentfulPaintکه امکان اندازهگیری چندین نقاشی محتوامحور با اندازههای افزایشی را پس از تعاملات فراهم میکند تا LCP را برای پیمایشهای نرم اندازهگیری کند.
این ورودیهای جدید را میتوان با استفاده از PerformanceObserver و به ترتیب با استفاده از نوعهای soft-navigation و interaction-contentful-paint مشاهده کرد.
این API همچنین هر یک از ورودیهای عملکرد largest-contentful-paint ، interaction-contentful-paint ، event-timing و layout-shift (و موارد دیگر) را به گونهای گسترش میدهد که شامل یک شناسه، navigationId ، باشد که نشان دهنده ناوبری مورد نظر برای ورودی است. از آنجا که PerformanceObserver ها ورودیهای عملکرد را تا زمانی که صفحه بیکار نباشد مشاهده نمیکنند، ممکن است مدتی بین رویدادی که ورودی عملکرد را ایجاد کرده و مشاهده شما از آن سپری شود. این امر به ویژه زمانی صادق است که صفحه بسیار شلوغ است، به عنوان مثال، در طول پیمایشهای نرم. این مقدار navigationId به نسبت دادن ورودیها به ناوبری صحیح کمک میکند.
برخی از ورودیهای interaction-contentful-paint میتوانند قبل از ناوبری و برخی دیگر بعد از آن اتفاق بیفتند. به جای اینکه مجبور باشیم تمام نقاشیهایی را که ممکن است منجر به ناوبری نرم شوند، ردیابی کنیم، ورودی soft-navigation شامل یک ورودی largestInteractionContentfulPaint است که بزرگترین نقاشی دیده شده تا این زمان است.
این موارد در کنار هم، امکان اندازهگیری Core Web Vitals را برای موارد زیر فراهم میکنند:
- LCP : استفاده از
largest-contentful-paintبرای بارگذاری اولیه صفحه و ورودیهای جدیدinteraction-contentful-paintوsoft-navigationبرای پیمایشهای نرم. - CLS : استفاده از ورودیهای
layout-shiftو برش آنها بر اساس ورودیهایsoft-navigationبرای soft navigations. - INP : استفاده از ورودیهای
eventو برش آنها بر اساس ورودیهایsoft-navigationبرای ناوبریهای نرم. - FCP : استفاده از
first-contentful-paintبرای بارگذاری اولیه صفحه و جزئیات زمانبندی رنگآمیزی در ورودیهای جدیدsoft-navigationبرای ناوبریهای نرم.
برای جزئیات بیشتر، به مستندات Soft Navigations مراجعه کنید.
ناوبریهای نرم چگونه فعال میشوند؟
API ناوبری نرم (Soft Navigation API) در صورت وقوع موارد زیر، ناوبری نرم را فعال میکند:
- یک تعامل کاربری رخ میدهد،
- ... که منجر به ایجاد یک تصویر قابل مشاهده از محتوا برای کاربر میشود،
- ... و یک بهروزرسانی URL رخ میدهد.
این API به دو دلیل این رویکرد را اتخاذ میکند، به جای اینکه به یک چارچوب جاوا اسکریپت اجازه دهد یک ناوبری نرم افزاری را "منتشر" کند، یا بر اساس API ناوبری بسازد:
- اولاً، این شامل تمام سایتهای SPA موجود بدون نیاز به هیچ تغییری در آن سایتها میشود.
- دوم، این امر درک مداومی از آنچه که یک ناوبری نرم را تشکیل میدهد، صرف نظر از نحوه مدیریت ناوبری توسط یک چارچوب یا توسعهدهنده، فراهم میکند.
چارچوبها یا توسعهدهندگان میتوانند URL را برای یک ناوبری نرم، حتی بدون تعامل کاربر یا بهروزرسانی DOM که کاربران آن را ناوبری در نظر میگیرند، بهروزرسانی کنند. آنها همچنین میتوانند URL را در زمانهای مختلف بهروزرسانی کنند: در شروع تعامل، فقط در پایان، زمانی که تعامل کامل شده است، یا در هر حالتی بین این دو.
به جای تکیه بر چارچوب و انتخابهای توسعهدهنده، ایجاد تشخیص ناوبری نرم در مرورگر، یک تعریف متعارف ایجاد میکند که امکان اندازهگیری Core Web Vitals را برای ناوبریهای نرم در مقیاس بزرگ فراهم میکند و این اندازهگیریها را در مقیاس قابل مقایسه میسازد.
چارچوبها و توسعهدهندگان همچنین میتوانند API مربوط به Soft Navigations را نادیده بگیرند و از APIهای Event Timing، Layout Instability و ورودی جدید عملکرد InteractionContentfulPaint برای اندازهگیری معیارهای عملکرد اضافی به انتخاب خود استفاده کنند. با این حال، ما توصیه میکنیم از API برای اندازهگیری Core Web Vitals استفاده کنید تا اندازهگیری مداوم در سایتها و ابزارها امکانپذیر شود.
برای آزمایش API ناوبری نرم به کمک نیاز است
ما به کمک شما نیاز داریم تا API مربوط به Soft Navigations را آزمایش کنیم و مشخص کنیم که آیا به درستی با انتظارات شما برای زمانی که یک Soft Navigation رخ میدهد، مطابقت دارد یا خیر. آیا API در گزارش Soft Navigationهایی که شما آنها را رخ داده میدانید، کوتاهی میکند؟ برعکس، آیا API، ناوبریهایی را که شما آنها را ناوبری در نظر نمیگیرید، بیش از حد گزارش میکند؟
چه چیزی از آخرین آزمایش مبدا تغییر کرده است؟
تغییر اصلی در این آخرین نسخه، جدا کردن InteractionContentfulPaint از ناوبریهای نرم برای فعال کردن موارد استفاده دیگر برای آن ورودی عملکرد، و ویژگی اضافی largestInteractionContentfulPaint به SoftNavigationEntry است.
از دیدگاه وبسایت، API اکنون replaceState نیز به عنوان ناوبری نرم افزاری در نظر میگیرد، زیرا ما بازخورد شما را شنیدهایم که در بسیاری از شرایط در نظر گرفتن این مورد به عنوان ناوبری مهم است. ما مشتاق شنیدن موارد دیگری هستیم که API ناوبری نرم افزاری را تشخیص نمیدهد.
ما همچنین پیشرفتهای بیشمار دیگری را در پیادهسازی ایجاد کردهایم. برای کسانی که دقیقاً به دنبال تغییرات در آخرین نسخه هستند، تاریخچه مفصلی از تمام تغییرات را میتوان در فهرست تغییرات ناوبری نرم (Soft Navigations Changelog) یافت.
ما میخواهیم API تا حد امکان مفید باشد و برای تحقق این امر، پذیرای تغییرات بیشتر هستیم. اعمال تغییرات در API قبل از راهاندازی بسیار آسانتر است و سایتها بسته به پیادهسازی، شروع به کار میکنند. بنابراین، از توسعهدهندگان SPA و کسانی که علاقهمند به اندازهگیری عملکرد وب برای این سایتها هستند، میخواهیم که این API را آزمایش کرده و بازخورد خود را در مورد آن ارائه دهند.
چگونه آزمایش کنیم
این API را میتوان به صورت محلی با پرچمهای کروم یا گزینههای خط فرمان آزمایش کرد. علاوه بر این، میتوانید آن را در محل با نسخه آزمایشی origin آزمایش کنید ( درباره نسخههای آزمایشی origin بیشتر بدانید ).
برای جزئیات فنی بیشتر در مورد API، به خصوص نحوه اندازهگیری Core Web Vitals ، به مستندات ما یا مخزن GitHub مراجعه کنید.
علاوه بر این، یک نسخه آزمایشی ناوبری نرم از کتابخانه web-vitals در GitHub و npm موجود است.
برای یک آزمایش سادهتر، پنل عملکرد Chrome DevTools حتی بدون فعال کردن این ویژگی، پیمایش نرم را در Performance traces از نسخه کروم ۱۴۵ نشان میدهد:
بازخورد
بازخورد در مورد API باید به عنوان مشکل در GitHub مطرح شود و اشکالات مربوط به پیادهسازی Chromium را در ردیاب مشکل Chrome گزارش دهید. اگر مطمئن نیستید که بازخورد در کدام دسته قرار میگیرد، زیاد نگران نباشید. ما ترجیح میدهیم بازخورد را در هر دو مکان دریافت کنیم و مشکلات را در هر دو مکان بررسی و به مکان صحیح هدایت خواهیم کرد.