از کروم ۱۲۳، API مسیریابی استاتیک Service Worker در دسترس است. این API به شما امکان میدهد به صورت اعلانی مشخص کنید که چگونه مسیرهای منبع خاص باید دریافت شوند، به این معنی که مرورگر نیازی به اجرای یک service worker برای دریافت پاسخها از حافظه پنهان یا مستقیماً از شبکه ندارد. این API از کروم ۱۱۶ در مرحله آزمایشی اولیه بوده است و این پست جزئیات راهاندازی API در کروم ۱۲۳ را شرح میدهد.
از API استفاده کنید
برای استفاده از API event.addRoutes را در رویداد install سرویس ورکر فراخوانی کنید. لیستی از مسیرها را با ویژگیهای زیر به این متد ارسال کنید:
-
condition - مشخص میکند که قانون چه زمانی اعمال میشود. ویژگیهای زیر را میپذیرد:
-
urlPattern: یک نمونه URLPattern یا رشتهای که نشاندهنده یک URLPattern معتبر است و میتواند به سازندهURLPatternارسال شود. -
requestMethod: رشتهای که شامل یک متد Request است. -
requestMode: رشتهای که شامل حالت درخواست (Request mode) است. -
requestDestination: رشتهای حاوی یک مقصد درخواست. -
runningStatus: یک رشته، یا"running"یا"not-running". این وضعیت اجرای سرویس ورکر را نشان میدهد.
-
-
source - نحوهی بارگذاری منابع منطبق با
conditionرا مشخص میکند. یکی از رشتههای زیر:-
"network" -
"cache" -
"fetch-event" -
"race-network-and-fetch-handler"
-
در مثال زیر، URLهایی که با "/articles" شروع میشوند، در صورتی که سرویس ورکر در حال اجرا باشد، به آن مسیردهی میشوند. در مواردی که چندین شرط وجود داشته باشد، به عنوان مثال urlPattern و runningStatus ، برای استفاده از مسیر، باید همه شرایط برقرار باشد.
addEventListener('install', (>event) = {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
در مثال زیر، پستهای یک فرم مستقیماً به شبکه ارسال میشوند و سرویس ورکر را دور میزنند.
addEventListener('install', (>event) = {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
در مثال زیر، از حافظه پنهان با نام "pictures" برای دریافت فایلهایی با پسوند .png یا .jpg استفاده شده است.
addEventListener('install', (>event) = {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
تغییرات نسبت به آزمایش اولیه
نسخه آزمایشی اصلی origin به جای InstallEvent.registerRouter() از InstallEvent.addRoutes() استفاده میکرد، متد registerRouter() فقط یک بار میتوانست فراخوانی شود. این تغییر بر اساس بازخورد جامعه به نسخه آزمایشی origin بود.
این API جدید همچنین از تغییرات URLPattern که در Chrome 121 معرفی شد، بهره میبرد، قابلیت تعیین روش، حالت و مقصد درخواست را اضافه میکند و گزینههای منبع بیشتری را نیز اضافه میکند.
پشتیبانی در Chrome DevTools
قوانین روتر ثبت شده در برگه Service Worker از پنل Application نمایش داده میشوند.
در پنل شبکه ، اگر درخواست با قانون ثبتشده مطابقت داشته باشد، این موضوع در ستون اندازه نشان داده میشود. هنگام نگه داشتن اشارهگر روی ستون اندازه، شناسه روتر ثبتشده نشان داده میشود. قوانین مربوطه در برگه برنامه نمایش داده میشوند.
