از Chrome 123، Service Worker Static Routing API در دسترس است. این API به شما این امکان را می‌دهد که به‌طور شفاف بیان کنید که چگونه مسیرهای منبع خاصی باید واکشی شوند، به این معنی که مرورگر نیازی به اجرای یک سرویس‌کار تنها برای واکشی پاسخ‌ها از حافظه پنهان یا مستقیماً از شبکه ندارد. این API از Chrome 116 در حالت آزمایشی اصلی قرار گرفته است، و این پست جزئیات راه اندازی API در Chrome 123 را نشان می دهد.
از API استفاده کنید
برای استفاده از API call event.addRoutes در رویداد install service worker. به این روش لیستی از مسیرها را با ویژگی های زیر ارسال کنید:
-
condition - زمان اعمال قانون را مشخص می کند. ویژگی های زیر را می پذیرد:
-
urlPattern: یک نمونه URLPattern یا رشته ای که نشان دهنده یک URLPattern معتبر است که می تواند به سازندهURLPatternارسال شود. -
requestMethod: رشته ای حاوی یک متد Request. -
requestMode: رشته ای حاوی حالت درخواست. -
requestDestination: رشته ای حاوی یک مقصد درخواست. -
runningStatus: یک رشته، یا"running"یا"not-running". این نشان دهنده وضعیت در حال اجرا سرویس دهنده است.
-
-
source - نحوه بارگیری
conditionتطبیق منابع را مشخص می کند. یکی از رشته های زیر:-
"network" -
"cache" -
"fetch-event" -
"race-network-and-fetch-handler"
-
در مثال زیر، نشانی‌های اینترنتی که با «/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"
}
});
});
تغییرات از آزمایش اولیه
آزمایش اولیه اصلی از InstallEvent.registerRouter() به جای InstallEvent.addRoutes() استفاده می کرد، متد registerRouter() فقط یک بار می توانست فراخوانی شود. این تغییر بر اساس بازخورد جامعه به کارآزمایی اصلی بود.
API جدید همچنین از تغییرات URLPattern ارائه شده در Chrome 121 بهره می‌برد، توانایی تعیین روش درخواست، حالت و مقصد را اضافه می‌کند و گزینه‌های منبع اضافی را اضافه می‌کند.
پشتیبانی در Chrome DevTools
قوانین روتر ثبت شده در برگه Service Worker پانل برنامه نمایش داده می شود.
در پنل شبکه ، اگر درخواست با قانون ثبت شده مطابقت داشته باشد، در ستون اندازه نشان داده شده است. هنگامی که نشانگر را روی ستون اندازه نگه می دارید، شناسه روتر ثبت شده نشان داده می شود. قوانین مربوطه در تب برنامه نمایش داده می شود.
