Chrome 105 دو روش جدید را در NavigateEvent از Navigation API (معرفی شده در 102) معرفی می‌کند تا روش‌هایی را که در عمل مشکل‌ساز هستند، بهبود بخشد. intercept() که به توسعه دهندگان اجازه می دهد وضعیت پس از پیمایش را کنترل کنند، جایگزین transitionWhile() می شود که استفاده از آن دشوار بود. متد scroll() که به یک لنگر مشخص شده در URL پیمایش می کند، جایگزین restoreScroll() می شود که برای همه انواع پیمایش کار نمی کند.
در این مقاله، مشکلات هر دو و روش های جدید را برای رفع این مشکلات توضیح خواهم داد.
NavigateEvent.transitionWhile()
متد NavigateEvent.trasitionWhile() که با Navigation API در کروم 102 معرفی شد، ناوبری را برای انتقال سمت مشتری در برنامه های تک صفحه ای قطع می کند. اولین آرگومان آن وعده ای است که به مرورگر و سایر بخش های برنامه وب سیگنال می دهد که کار تمام شده است.
این در عمل ضعیف عمل کرد. این الگوی کدگذاری رایج را در نظر بگیرید:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
این از نظر عملکردی معادل کد زیر است. این باعث می شود که بخشی از ناوبری قبل از اینکه API متوجه شود که توسعه دهنده قصد دارد مسیریابی را رهگیری کند، اجرا شود.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
یکی از مثال‌هایی که می‌تواند یک برنامه را خراب کند، منطق بازیابی اسکرول است که در آن موقعیت‌های اسکرول را بعد از تغییر DOM به جای قبل ثبت می‌کند.
چه چیزی تغییر کرده است
برای جایگزینی transitionWhile() ، مشخصات فعلی NavigateEvent.intercept() را معرفی می کند. روش جدید علاوه بر ویژگی‌های focusReset و scrollRestoration که توسط transitionWhile() پشتیبانی می‌شود، یک هندلر نیز می‌گیرد. کنترل‌کننده جدید همیشه پس از انجام ناوبری اجرا می‌شود، و مواردی مانند موقعیت‌های اسکرول ثبت شده‌اند و از مشکلات transitionWhile() جلوگیری می‌کنند.
روش transitionWhile() هنوز در دسترس است، اما منسوخ شده است و در Chrome 108 حذف خواهد شد.
استفاده از intercept()
NavigateEvent.intercept() دارای محدودیت های مشابه transitionWhile() است، زیرا در آن نمی توان در همه رویدادهای ناوبری فراخوانی کرد. ناوبری های متقاطع را نمی توان رهگیری کرد، و همچنین نمی توان پیمایش های بین اسنادی را رهگیری کرد. انجام این کار باعث ایجاد یک DOMException از نوع "SecurityError" می شود.
برای استفاده از intercept() ، به سادگی هنگام فراخوانی از handler سفارشی خود عبور دهید.
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()
به‌طور پیش‌فرض، مرورگر تلاش می‌کند تا پیمایش را به‌طور خودکار انجام دهد، پس از اینکه نشانگر رهگیری انجام شد. اگر می‌خواهید پیمایش را خودتان انجام دهید، 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 حذف خواهد شد.
نتیجه
امیدواریم به زودی مقاله خود را در مورد Navigation API به روز کنیم. در عین حال، مشخصات این API حاوی اطلاعات زیادی به طور خاص برای توسعه دهندگان وب است.