החל מגרסה 123 של Chrome, ה-Service Worker Static Routing API זמין. ממשק ה-API הזה מאפשר לציין באופן דקלרטיבי איך צריך לאחזר נתיבים מסוימים של משאבים. כלומר, הדפדפן לא צריך להריץ service worker רק כדי לאחזר תגובות מהמטמון או ישירות מהרשת. ה-API הזה נמצא בגרסת מקור לניסיון מאז Chrome 116, ובפוסט הזה מוסבר על השקת ה-API ב-Chrome 123.
שימוש ב-API
כדי להשתמש בקריאת ה-API event.addRoutes באירוע install של ה-service worker. מעבירים לשיטה הזו רשימה של מסלולים, עם המאפיינים הבאים:
condition- הגדרה של מועד החלת הכלל. אפשר להשתמש במאפיינים הבאים:
urlPattern: מופע של URLPattern, או מחרוזת שמייצגת URLPattern תקף, שניתן להעביר למבנהURLPattern.requestMethod: מחרוזת שמכילה method של בקשה.requestMode: מחרוזת שמכילה את מצב הבקשה.requestDestination: מחרוזת שמכילה את יעד הבקשה.runningStatus: מחרוזת,"running"או"not-running". זהו הסטטוס של שירות ה-worker שפועל.
source- מציין את אופן הטעינה של המשאבים שתואמים ל-
condition. אחת מהמחרוזות הבאות:"network""cache""fetch-event""race-network-and-fetch-handler"
בדוגמה הבאה, כתובות URL שמתחילות ב-/articles מנותבות ל-service worker אם הוא פועל כרגע. אם יש כמה תנאים, למשל urlPattern ו-runningStatus, צריך לעמוד בכל התנאים כדי להשתמש בנתיב.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
בדוגמה הבאה, פרטים שנשלחים בטופס נשלחים ישירות לרשת ועוברים על פני ה-service worker.
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. בנוסף, ה-API מאפשר לציין שיטת בקשה, מצב ויעדים, ומוסיף אפשרויות נוספות למקורות.
תמיכה בכלי הפיתוח ל-Chrome
כללי הנתב הרשומים מוצגים בכרטיסייה Service Worker בחלונית Application.
בחלונית Network, אם הבקשה תואמת לכלל הרשום, הדבר יצוין בעמודה size. כשמחזיקים את הסמן מעל העמודה 'גודל', מוצג מזהה הנתב הרשום. הכללים התואמים מוצגים בכרטיסייה של האפליקציה.
