مسیریابی سمت مشتری مدرن: API ناوبری

استاندارد سازی مسیریابی سمت مشتری از طریق یک API با نام تجاری جدید که کاملاً بازنگری در ساخت برنامه های تک صفحه ای است.

منتشر شده در چهارشنبه ، 25 اوت 2021 • به روز شده در جمعه 19 اوت 2022

سام مهندس روابط توسعه دهنده در Google بود.

پسر انسانی که در Google با استانداردهای وب کار می کند

این API در طول توسعه به عنوان "API API API" شناخته می شد ، اما از آن زمان به "API ناوبری" تغییر نام داده است.

برنامه های تک صفحه ای ، یا SPA ها توسط یک ویژگی اصلی تعریف می شوند: به جای روش پیش فرض بارگذاری صفحات کاملاً جدید از سرور ، به صورت پویا بازنویسی محتوای آنها را به عنوان کاربر با سایت تعامل می کند.

در حالی که اسپا توانسته است این ویژگی را از طریق API تاریخ (یا در موارد محدود ، با تنظیم قسمت #HASH سایت) برای شما به ارمغان بیاورد ، این یک API Clunky است که اسپا های طولانی مدت توسعه یافته است-و وب برای یک گریه می کندرویکرد کاملاً جدیدAPI ناوبری یک API پیشنهادی است که این فضا را کاملاً تعمیرات اساسی می کند ، نه اینکه سعی کنید لبه های خشن API تاریخ را به سادگی وصله کنید.(به عنوان مثال ، مرمت پیمایش به جای تلاش برای اختراع مجدد آن ، API تاریخ را وصله کرد.)

API ناوبری در Chrome 102 راه اندازی شد. یک نسخه ی نمایشی را در اینجا بررسی کنید.

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

# استفاده مثال

برای استفاده از API ناوبری ، با اضافه کردن یک شنونده "پیمایش" در شیء ناوبری جهانی شروع کنید. این رویداد اساساً متمرکز است: برای همه نوع ناوبری ها آتش می گیرد ، خواه کاربر اقدامی را انجام داده باشد (مانند کلیک بر روی یک لینک ، ارسال فرم ، یا بازگشت و به جلو) یا هنگامی که ناوبری به صورت برنامه ای انجام می شود (یعنی از طریق سایت شماکد). در بیشتر موارد ، این امکان را به شما می دهد که کد شما از رفتار پیش فرض مرورگر برای آن عمل غلبه کند. برای SPA ، این احتمالاً به معنای نگه داشتن کاربر در همان صفحه و بارگیری یا تغییر محتوای سایت است.

یک پیمایشگر به شنونده "پیمایش" منتقل می شود که حاوی اطلاعاتی در مورد ناوبری مانند URL مقصد است و به شما امکان می دهد تا در یک مکان متمرکز به ناوبری پاسخ دهید. شنونده اصلی "پیمایش" می تواند به این شکل باشد:

شما می توانید از یکی از دو روش با ناوبری برخورد کنید:

• فراخوانی رهگیری () (همانطور که در بالا توضیح داده شد) برای رسیدگی به ناوبری.
• با PongessDefault () تماس بگیرید ، که می تواند ناوبری را به طور کامل لغو کند.

نسخه قبلی این API به جای NeaGateEvent. intercept (وعده) از NevigateEvent. Transition why (وعده) استفاده کرد () .

رهگیری از Chrome 105 در دسترس است. انتقال در حالی که مستهلک می شود ، و در Chrome 108 حذف می شود.

این مثال رهگیری () را در این رویداد فراخوانی می کند. مرورگر با تماس تلفنی شما تماس می گیرد ، که باید وضعیت بعدی سایت شما را پیکربندی کند. این یک شیء انتقال ، navigation. transition ایجاد می کند ، که کد دیگر می تواند برای ردیابی پیشرفت ناوبری از آن استفاده کند.

در این زمینه "انتقال" به انتقال بین یک تاریخچه تاریخ و دیگری اشاره دارد. این مربوط به انیمیشن های گذار نیست.

هر دو رهگیری () و پیشگیری () معمولاً مجاز هستند ، اما مواردی دارند که قادر به فراخوانی آنها نیستند. اگر ناوبری یک ناوبری متقاطع است ، نمی توانید از طریق رهگیری () ناوبری را کنترل کنید. و اگر کاربر در حال فشار دادن دکمه های پشت یا جلو در مرورگر خود نیست ، نمی توانید ناوبری را از طریق PresentDefault () لغو کنید. شما نباید نتوانید کاربران خود را در سایت خود به دام بیندازید.(این در مورد GitHub بحث شده است.)

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

# چرا یک رویداد دیگر به سیستم عامل اضافه می کنید؟

یک شنونده رویداد "پیمایش" ، تغییرات URL را در داخل آبگرم متمرکز می کند. این یک پیشنهاد دشوار با استفاده از API های قدیمی است. اگر تا به حال مسیریابی آبگرم خود را با استفاده از API History نوشته اید ، ممکن است کدی مانند این اضافه کرده باشید:

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

علاوه بر این ، موارد فوق ناوبری عقب و رو به جلو را کنترل نمی کند. یک رویداد دیگر برای آن ، "PopState" وجود دارد.

شخصاً ، API تاریخ اغلب احساس می کند که می تواند به نوعی برای کمک به این امکانات پیش برود. با این حال ، واقعاً فقط دو قسمت از سطح دارد: پاسخ اگر کاربر در مرورگر خود به عقب یا جلو فشار بیاورد ، به علاوه فشار و تعویض URL ها. این قیاس با "پیمایش" ندارد ، مگر اینکه شنوندگان را برای وقایع کلیک به عنوان مثال تنظیم کنید ، به عنوان مثال ، همانطور که در بالا نشان داده شد.

# تصمیم گیری در مورد نحوه رسیدگی به ناوبری

NavignateEvent حاوی اطلاعات زیادی در مورد ناوبری است که می توانید برای تصمیم گیری در مورد نحوه برخورد با یک ناوبری خاص استفاده کنید.

خصوصیات کلیدی عبارتند از:

اگر این نادرست باشد ، نمی توانید ناوبری را رهگیری کنید. ناوبری های متقاطع و گذرگاه های متقاطع را نمی توان رهگیری کرد. Destination. url احتمالاً مهمترین قطعه اطلاعاتی است که باید هنگام رسیدگی به ناوبری در نظر بگیرید. اگر ناوبری همزمان است ، و هش تنها بخشی از URL است که با URL فعلی متفاوت است. در اسپا های مدرن ، هش باید برای پیوند دادن به قسمت های مختلف سند فعلی باشد. بنابراین ، اگر HashChange درست باشد ، احتمالاً نیازی به رهگیری این ناوبری ندارید. DownloadRequest اگر این درست است ، ناوبری توسط پیوندی با یک ویژگی بارگیری آغاز شد. در بیشتر موارد ، شما نیازی به رهگیری این موضوع ندارید. formdata اگر این تهی نباشد ، این ناوبری بخشی از ارسال فرم ارسال است. حتماً هنگام رسیدگی به ناوبری این موضوع را در نظر بگیرید. اگر فقط می خواهید ناوبری را انجام دهید ، از رهگیری ناوبری ها که در آن FormData تهی نیست ، خودداری کنید. نمونه ای از ارسال فرم های مربوط به رسیدگی به فرم را بعداً در مقاله مشاهده کنید. NavigationType این یکی از "بارگیری مجدد" ، "فشار" ، "جایگزین" یا "Traverse" است. اگر این "Traverse" باشد ، این ناوبری از طریق PregingDefault () قابل لغو نیست.

به عنوان مثال ، عملکرد باید به عنوان مثال مورد استفاده در مثال اول چیزی شبیه به این باشد:

# رهگیری

وقتی کد شما رهگیری می کند () از درون شنونده "پیمایش" خود ، به مرورگر اطلاع می دهد که اکنون صفحه را برای حالت جدید و به روز شده آماده می کند و ممکن است ناوبری مدتی طول بکشد.

مرورگر با گرفتن موقعیت پیمایش برای وضعیت فعلی شروع می شود ، بنابراین می تواند بعداً به صورت اختیاری بازیابی شود ، سپس آن را به تماس گیرنده شما می خواند. اگر کنترل کننده شما وعده ای را برگرداند (که به طور خودکار با توابع ASYNC اتفاق می افتد) ، این قول به مرورگر می گوید که ناوبری چه مدت طول می کشد و آیا موفقیت آمیز است.

به همین ترتیب ، این API یک مفهوم معنایی را معرفی می کند که مرورگر می فهمد: در حال حاضر یک ناوبری آبگرم در حال وقوع است ، با گذشت زمان ، تغییر سند از URL قبلی و حالت به یک مورد جدید. این دارای تعدادی از مزایای بالقوه از جمله دسترسی است: مرورگرها می توانند آغاز ، پایان یا عدم موفقیت بالقوه یک ناوبری را انجام دهند. به عنوان مثال ، Chrome نشانگر بارگذاری بومی خود را فعال می کند و به کاربر اجازه می دهد تا با دکمه STOP در تعامل باشد.(این اتفاق در حال حاضر اتفاق نمی افتد که کاربر از طریق دکمه های پشت/جلو حرکت کند ، اما به زودی برطرف می شود.)

# تعهد ناوبری

هنگام رهگیری ناوبری ها ، URL جدید درست قبل از تماس با تماس گیرنده شما اجرا می شود. اگر فوراً DOM را به روز نکنید ، این دوره ای را ایجاد می کند که محتوای قدیمی به همراه URL جدید نمایش داده می شود. این امر در هنگام واکشی داده ها یا بارگیری منابع جدید ، مواردی مانند وضوح URL نسبی را تحت تأثیر قرار می دهد.

راهی برای تأخیر در تغییر URL در GitHub مورد بحث قرار می گیرد ، اما به طور کلی توصیه می شود که بلافاصله صفحه را با نوعی مکان نگهدارنده برای محتوای ورودی به روز کنید:

این نه تنها از مشکلات وضوح URL جلوگیری می کند ، بلکه سریع نیز احساس می شود زیرا شما فوراً به کاربر پاسخ می دهید.

# سیگنال های سقط

از آنجا که شما قادر به انجام کارهای ناهمزمان در یک کنترل کننده رهگیری () هستید ، ممکن است ناوبری زائد شود. این اتفاق می افتد وقتی:

• کاربر روی پیوند دیگری کلیک می کند ، یا برخی از کد ها ناوبری دیگری را انجام می دهد. در این حالت ناوبری قدیمی به نفع ناوبری جدید رها می شود.
• کاربر روی دکمه "توقف" در مرورگر کلیک می کند.

برای مقابله با هر یک از این امکانات ، این رویداد به شنونده "پیمایش" منتقل شده است که حاوی یک خاصیت سیگنال است که یک سقط جنین است. برای اطلاعات بیشتر به Fetch Abortable مراجعه کنید.

نسخه کوتاه این است که اساساً یک شیء را فراهم می کند که وقتی باید کار خود را متوقف کنید ، یک رویداد را آتش می زند. نکته قابل توجه ، شما می توانید یک تماس تلفنی را به هرگونه تماس شما برای واکشی () منتقل کنید ، که در صورت پیشگیری از ناوبری درخواست های شبکه در پرواز را لغو می کند. این هر دو پهنای باند کاربر را ذخیره می کند ، و قول برگشتی توسط Fetch () را رد می کند ، و از هرگونه کد زیر از اقداماتی مانند به روزرسانی DOM برای نشان دادن یک ناوبری صفحه نامعتبر جلوگیری می کند.

مثال قبلی در اینجا آورده شده است ، اما با استفاده از GetArticleContent ، نشان می دهد که چگونه می توان از سقط جنین با Fetch () استفاده کرد ():

# دست زدن به پیمایش

هنگامی که شما یک ناوبری را رهگیری می کنید ، مرورگر سعی خواهد کرد به طور خودکار پیمایش را انجام دهد.

برای پیمایش به یک ورودی تاریخ جدید (هنگامی که navigationevent. navigationType "فشار" یا "جایگزین" است) ، این به معنای تلاش برای پیمایش به قسمت مشخص شده توسط قطعه URL (بیت بعد از #) یا تنظیم مجدد پیمایش به بالا است. صفحه

برای بارگیری مجدد و گذرگاه ها ، این به معنای بازگرداندن موقعیت پیمایش به جایی است که آخرین بار در این تاریخ نمایش داده شد.

به طور پیش فرض ، این اتفاق می افتد هنگامی که وعده ای که توسط کنترل کننده شما برطرف می شود ، اما اگر منطقی باشد که زودتر پیمایش کنید ، می توانید با NeagateEvent. scroll () تماس بگیرید:

اگرچه پیمایش () مانند یک تماس واحد به نظر می رسد ، مرورگر ممکن است سعی کند موقعیت پیمایش را چندین بار ناهمزمان تنظیم کند. این بدان معنی است که مرورگر هنوز هم می تواند به مکان صحیح بپردازد ، حتی اگر محتوا کمی بعداً وارد شود ، یا به دلیل تغییر چیدمان حرکت می کند.

از طرف دیگر ، می توانید با تنظیم گزینه پیمایش رهگیری () به "دستی" ، از دست زدن به کتیبه خودکار خودداری کنید:

# کنترل تمرکز

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

شما می توانید با تنظیم گزینه FocusReset از رهگیری () به "دستی" از این رفتار خودداری کنید:

# وقایع موفقیت و شکست

هنگامی که به کنترل کننده رهگیری () شما فراخوانده می شود ، یکی از دو چیز اتفاق می افتد:

• اگر قول برگشتی برآورده شود (یا شما رهگیری () را صدا نمی کنید) ، API ناوبری با یک رویداد "Navigatesuccess" را آتش می زند.
• اگر وعده برگشتی رد شود ، API با یک خطای errorevent "پیمایش" را آتش می زند.

این رویدادها به کد شما اجازه می دهد تا با موفقیت یا عدم موفقیت به روشی متمرکز مقابله کند. به عنوان مثال ، شما ممکن است با پنهان کردن یک نشانگر پیشرفت قبلی که قبلاً نمایش داده شده است ، با موفقیت مقابله کنید:

یا ممکن است یک پیام خطا در مورد خرابی نشان دهید:

شنونده رویداد "NavigateError" ، که یک Errorevent را دریافت می کند ، به ویژه مفید است زیرا تضمین می شود هرگونه خطایی را از کد شما که صفحه جدید را تنظیم می کند ، دریافت کنید. شما به سادگی می توانید در انتظار Fetch () بدانید که اگر شبکه در دسترس نباشد ، در نهایت خطا به "NevigateError" هدایت می شود.

# ورودی های ناوبری

navigation. currententry دسترسی به ورودی فعلی را فراهم می کند. این شیئی است که در حال حاضر توصیف می کند که کاربر در کجا قرار دارد. این مطلب شامل URL فعلی ، ابرداده است که می تواند برای شناسایی این ورودی به مرور زمان و وضعیت ارائه دهنده توسعه دهنده استفاده شود.

حتی سایتهایی که صریحاً از API ناوبری استفاده نمی کنند ، "ورودی فعلی" خواهند داشت و اگر از روشهای قدیمی تر در API تاریخ ، History. pushstate () و History. Replacestate () استفاده کنید ، ورودی یا جایگزین می شود. بشر

ابرداده شامل کلید ، یک ویژگی رشته منحصر به فرد از هر ورودی است که نشان دهنده ورودی فعلی و شکاف آن است. این کلید حتی اگر URL یا حالت ورودی فعلی تغییر کند ، یکسان است. هنوز در همان شکاف است. برعکس ، اگر کاربر به عقب فشار آورد و دوباره همان صفحه را باز کند ، کلید تغییر می کند زیرا این ورودی جدید یک شکاف جدید ایجاد می کند.

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

# حالت

API ناوبری مفهومی از "حالت" را نشان می دهد ، که اطلاعاتی است که به توسعه دهنده ارائه می شود که به طور مداوم در ورودی تاریخ فعلی ذخیره می شود ، اما مستقیماً برای کاربر قابل مشاهده نیست. این بسیار شبیه به تاریخ است ، اما بهبود یافته است.

در API ناوبری ، می توانید با روش . getState () از ورودی فعلی (یا هر ورودی) تماس بگیرید تا یک نسخه از حالت خود را برگردانید:

به طور پیش فرض ، این تعریف نشده است.

# تنظیم حالت

اگرچه می توان اشیاء دولتی را جهش داد ، اما این تغییرات با ورود تاریخ ذخیره نمی شوند ، بنابراین:

روش صحیح برای تنظیم حالت در هنگام ناوبری اسکریپت:

جایی که NewState می تواند هر یک از شیء Clonable باشد.

اگر می خواهید وضعیت ورودی فعلی را به روز کنید ، بهتر است ناوبری را که جایگزین ورودی فعلی است ، انجام دهید:

سپس ، شنونده رویداد "پیمایش" شما می تواند این تغییر را از طریق NavigateEvent. destination انتخاب کند:

# به روزرسانی حالت همزمان

به طور کلی ، بهتر است حالت را به صورت ناهمزمان از طریق navigation. reload () به روز کنید ، سپس شنونده "پیمایش" شما می تواند آن حالت را اعمال کند. با این حال ، گاهی اوقات تغییر دولت قبلاً به طور کامل اعمال شده است تا زمانی که کد شما در مورد آن می شنود ، مانند زمانی که کاربر یک عنصر را تغییر می دهد ، یا کاربر وضعیت ورودی فرم را تغییر می دهد. در این موارد ، شما ممکن است بخواهید حالت را به روز کنید تا این تغییرات از طریق بارگیری مجدد و گذرگاه حفظ شود. این کار با استفاده از UpdateCurrentEntry () امکان پذیر است:

همچنین یک رویداد برای شنیدن این تغییر وجود دارد:

اما ، اگر خود را نسبت به تغییر در "FuingTryChange" واکنش نشان می دهید ، ممکن است شما در حال تقسیم یا حتی کپی کردن کد دست دولت خود بین رویداد "حرکت" و رویداد "FuingEntryChange" باشید ، در حالی که Navigation. Reload () به شما امکان می دهد مدیریت کنیدآن را در یک مکان

# پارامترهای # حالت در مقابل URL

از آنجا که حالت می تواند یک شیء ساختاری باشد ، استفاده از آن برای تمام وضعیت برنامه شما وسوسه انگیز است. با این حال ، در بسیاری موارد بهتر است آن ایالت را در URL ذخیره کنید.

اگر انتظار دارید وقتی کاربر URL را با کاربر دیگری به اشتراک بگذارد ، دولت حفظ شود ، آن را در URL ذخیره کنید. در غیر این صورت ، شیء حالت گزینه بهتری است.

# دسترسی به همه ورودی ها

"ورودی فعلی" همه چیز نیست. API همچنین راهی برای دسترسی به کل لیست ورودی هایی که کاربر در هنگام استفاده از سایت شما از طریق تماس با Navigation. entries () از طریق آن استفاده کرده است ، فراهم می کند ، که یک مجموعه عکس فوری از ورودی ها را برمی گرداند. این می تواند مورد استفاده قرار گیرد ، به عنوان مثال ، رابط کاربری متفاوتی را بر اساس نحوه حرکت کاربر به یک صفحه خاص ، یا فقط برای نگاه کردن به URL های قبلی یا حالت های آنها نشان دهد. این با API تاریخ فعلی غیرممکن است.

همچنین می توانید یک رویداد "دفع" را در مورد NavigationHistoryEntry SPORE STORYENTORYENTRY گوش دهید ، که هنگام ورود به آن دیگر بخشی از تاریخ مرورگر نیست. این می تواند به عنوان بخشی از پاکسازی عمومی اتفاق بیفتد ، اما در هنگام پیمایش نیز اتفاق می افتد. به عنوان مثال ، اگر 10 مکان را پشت سر بگذارید ، سپس به جلو بروید ، آن 10 ورودی تاریخ دفع می شود.

# مثال ها

همانطور که در بالا ذکر شد ، رویداد "پیمایش" برای انواع ناوبری آتش سوزی می کند.(در واقع یک ضمیمه طولانی در مشخصات انواع ممکن وجود دارد.)

در حالی که برای بسیاری از سایت ها رایج ترین حالت زمانی خواهد بود که کاربر روی A کلیک می کند ، دو نوع ناوبری قابل توجه و پیچیده تر وجود دارد که ارزش پوشش آن را دارند.

# ناوبری برنامه ای

اولین ناوبری برنامه ای است ، جایی که ناوبری ناشی از یک روش فراخوانی در کد سمت مشتری شما است.

می توانید از هر جای کد خود با Navigation. Navigate ('/other_page) تماس بگیرید تا باعث ناوبری شود. این کار توسط شنونده رویداد متمرکز ثبت شده در شنونده "پیمایش" انجام می شود ، و شنونده متمرکز شما همزمان همزمان خوانده می شود.

این به عنوان تجمیع بهبود یافته روشهای قدیمی تر مانند مکان در نظر گرفته شده است.

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

روش navigation. navigate () یک شیء را برمی گرداند که شامل دو نمونه وعده در آن استبشراین اجازه می دهد تا Invoker بتواند صبر کند تا یا انتقال "مرتکب" شود (URL قابل مشاهده تغییر کرده است و یک NavigationHistoryEntry جدید در دسترس است) یا "تمام شده" (تمام وعده های برگشتی توسط رهگیری ()) به دلیل عدم موفقیت یا پیشگیری از ناوبری دیگر ، کامل یا رد شده اند).

روش Navigate همچنین دارای یک شیء گزینه هایی است که در آن می توانید تنظیم کنید:

• ایالت: دولت برای ورود به تاریخ جدید ، به عنوان از طریق روش . getState () در مورد NavigationHistoryEntry.
• تاریخ: که می تواند برای جایگزینی تاریخ فعلی "جایگزین" شود.
• اطلاعات: شیء برای انتقال به رویداد پیمایش از طریق naveTevent.info.

به طور خاص ، اطلاعات می توانند برای مثال ، یک انیمیشن خاص را نشان دهند که باعث ظاهر شدن صفحه بعدی می شود.. دکمه های رو به جلو. در حقیقت ، همیشه در این موارد تعریف نشده است.

ناوبری همچنین دارای تعدادی روش ناوبری دیگر است که همه آنها یک شیء حاوی را برمی گرداندبشرمن قبلاً به Traverseto () اشاره کردم (که کلید را می پذیرد که نشانگر ورود خاص در تاریخ کاربر است) و پیمایش (). همچنین شامل پشت () ، رو به جلو () و بارگیری مجدد () است. این روشها همه مورد استفاده قرار می گیرند - درست مانند پیمایش () - از طریق شنونده رویداد "پیمایش" متمرکز.

# فرم ارسال

ثانیا ، ارسال HTML از طریق پست نوع خاصی از ناوبری است و API ناوبری می تواند آن را رهگیری کند. در حالی که شامل یک بار اضافی است ، ناوبری هنوز توسط شنونده "پیمایش" به صورت مرکزی انجام می شود.

ارسال فرم را می توان با جستجوی ویژگی FormData در NevignateEvent تشخیص داد. در اینجا مثالی آورده شده است که به سادگی هر فرم ارسال را به یکی از مواردی که در صفحه فعلی از طریق Fetch () باقی می ماند ، تبدیل می کند:

# چه چیزی از دست رفته است؟

با وجود ماهیت متمرکز شنونده رویداد "حرکت" ، مشخصات API ناوبری فعلی باعث "حرکت" در اولین بار صفحه نمی شود. و برای سایتهایی که از سرور سرور (SSR) برای همه حالت ها استفاده می کنند ، این ممکن است خوب باشد - سرور شما می تواند حالت اولیه صحیح را برگرداند ، که سریعترین راه برای دریافت محتوا به کاربران شما است. اما سایتهایی که برای ایجاد صفحات خود از کد سمت مشتری استفاده می کنند ممکن است برای ایجاد اولیه صفحه خود یک عملکرد اضافی ایجاد کنند.

یکی دیگر از انتخاب های طراحی عمدی API ناوبری این است که فقط در یک قاب واحد فعالیت می کند-یعنی صفحه سطح بالا یا یک خاص. این تعدادی از پیامدهای جالب وجود دارد که بیشتر در مشخصات ثبت شده است ، اما در عمل ، سردرگمی توسعه دهنده را کاهش می دهد. API تاریخ قبلی دارای چندین مورد گیج کننده است ، مانند پشتیبانی از فریم ها ، و API ناوبری مجدداً این موارد لبه را از دست دریافت می کند.

در آینده نزدیک ، امیدوار است که یک تغییر نامربوط در مشخصات HTML بتواند Iframes "بی تاریخ" را معرفی کند که در تاریخ مرورگر شرکت نمی کنند. Iframes که URL های خود را تغییر می دهد ، هر دو توسعه دهنده و کاربران را به صورت کلاسیک اشتباه گرفته اند زیرا این تغییرات هیچ تاثیری در نوار URL کاربر یا عنوان صفحه کلی ندارد. بنابراین ، به عنوان مثال ، یک کاربر که به مرورگر خود فشار می آورد یا به جلو می رود ، ممکن است یک اثر فوری آشکار را مشاهده نکند.

سرانجام ، هنوز در مورد اصلاح برنامه نویسی یا تنظیم مجدد لیست ورودی هایی که کاربر از طریق آن پیمایش کرده است ، اجماع وجود ندارد. این در حال حاضر مورد بحث است ، اما یک گزینه می تواند فقط حذف ها باشد: یا ورودی های تاریخی یا "همه ورودی های آینده". دومی به حالت موقت اجازه می دهد. به عنوان مثال ، من به عنوان یک توسعه دهنده ، می توانم:

• با پیمایش به URL یا حالت جدید از کاربر سؤال کنید
• به کاربر اجازه دهید کار خود را کامل کند (یا به عقب برگردد)
• ورود به تاریخ را با اتمام یک کار حذف کنید

این می تواند برای مدالهای موقت یا بینابینی مناسب باشد: URL جدید چیزی است که کاربر می تواند از ژست پشت برای ترک آن استفاده کند ، اما آنها به طور تصادفی نمی توانند به جلو بروند تا دوباره آن را باز کنند (زیرا ورودی حذف شده است). این فقط با API تاریخ فعلی امکان پذیر نیست.

# API ناوبری را امتحان کنید

API ناوبری در Chrome 102 بدون پرچم موجود است. همچنین می توانید نسخه ی نمایشی توسط Domenic Denicola را امتحان کنید.

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

# منابع

# سپاسگزاریها

با تشکر از توماس اشتاینر ، دومینیک دنینولا و نیت چاپین برای بررسی این پست. تصویر قهرمان از Unsplash ، توسط جرمی صفر.