קובצי שירות (service worker) הם כלי עוצמתי שמאפשר לאתרים לעבוד אופליין וליצור לעצמם כללי שמירה במטמון ספציפיים. handler של fetch ל-Service Worker רואה כל בקשה מדף שנמצא בשליטתו, ויכול להחליט אם הוא רוצה לתת תשובה מהמטמון של Service Worker או אפילו לשכתב את כתובת ה-URL כדי לאחזר תשובה אחרת לחלוטין – לדוגמה, בהתאם להעדפות מקומיות של משתמשים.
עם זאת, עשויה להיות עלות ביצועים ל-Service Worker כשדף נטען בפעם הראשונה בזמן שה-Service Worker השולט לא פועל כרגע. מכיוון שכל האחזורים צריכים להתבצע דרך Service Worker, הדפדפן צריך להמתין עד שה-Service Worker יתחיל לפעול כדי לדעת איזה תוכן לטעון. עלות הסטארט-אפ הזו יכולה להיות קטנה אבל משמעותית, למפתחים שמשתמשים ב-Service Worker כדי לשפר את הביצועים באמצעות אסטרטגיות של שמירה במטמון.
טעינה מראש של ניווט היא גישה אחת לפתרון הבעיה, שמאפשרת לשלוח בקשות ניווט דרך הרשת במקביל להפעלת קובץ השירות, אבל היא מוגבלת לבקשות ניווט ראשוניות ועדיין כוללת את ה-Service Worker בנתיב הקריטי. מאז השקת הטעינה מראש של הניווט, עשינו מאמצים רבים לפתח פתרון כללי יותר למרחב הבעיה, כולל דרכים למנוע חסימה של בקשות מסוימות בהפעלה של קובץ השירות.
ה-API של הניתוב הסטטי של Service Worker
החל מגרסה 116 של Chrome, ה-API הניסיוני של Service Worker Static Routing API זמין לבדיקת השלב הראשון בפתרון כזה. כשמתקינים Service Worker, הוא יכול להשתמש ב-Service Worker Static Routing API כדי להצהיר באופן הצהרתי על אופן האחזור של נתיבי משאבים מסוימים.
בגרסה הראשונית של ה-API, אפשר להצהיר על נתיבים שתמיד יוצגו מהרשת, ולא מה-Service Worker. כשכתובת URL מבוקרת נטענת מאוחר יותר, הדפדפן יכול להתחיל לאחזר משאבים מהנתיבים האלה לפני ש-Service Worker מסיים להתחיל. כך קובץ השירות (service worker) יוסר מהנתיבים שאתם יודעים שלא זקוקים להם.
כדי להשתמש ב-API, קובץ השירות (service worker) קורא ל-event.registerRouter באירוע install עם קבוצת כללים:
self.addEventListener('install', event => {
if (event.registerRouter) {
// Go straight to the network and bypass invoking "fetch" handlers for all
// same-origin URLs that start with '/form/'.
event.registerRouter([{
condition: {
urlPattern: {pathname: '/form/*'},
},
source: 'network',
}]);
}
});
לכל כלל יש בדרך כלל שני מאפיינים:
condition: מציין מתי הכלל חל באמצעות URL Template API כדי להתאים לנתיבי המשאבים. המאפיין יכול לקחת מכונהURLPattern, או את האובייקט הפשוט המקביל שתואם להעברה אל ה-constructor שלURLPattern(למשל,new URLPattern({pathname: '*.jpg'})או רק את{pathname: '*.jpg'}).הגמישות של תבניות ה-URL פירושה שהכלל יכול להתאים משהו פשוט כמו כל משאב בנתיב, לתנאים ספציפיים ומפורטים מאוד. הדפוסים צריכים להיות מוכרים בדרך כלל למשתמשים בספריות ניתוב פופולריות.
source: מציין איך ייטענו המשאבים שתואמים ל-condition. כיום יש תמיכה רק בערך'network'(עקיפה של קובץ השירות כדי לטעון את המשאב ישירות דרך הרשת), אבל אנחנו מתכננים להרחיב אותו לערכים אחרים בעתיד.
תרחישים לדוגמה
כמו שהוסבר, הגרסה הראשונית של ה-API היא למעשה פתח בריחה (escape) שמקורם בשליטה של עובדי השירות בנתיבים מסוימים. המיקום הגיוני לשימוש תלוי באופן שבו אתם משתמשים ב-Service Worker ובאופן שבו המשתמשים עוברים באתר שלכם.
דוגמה אחת לכך יכולה להיות אם באתר שלכם מוגדרת אסטרטגיה לשמירה על המטמון (מחזרה לרשת), אבל יש תוכן שמשתמשים מבקרים בו לעיתים רחוקות כל כך עד שאין ערך בכלל שמגיע למטמון (כמו תוכן שהועבר לארכיון או פידים של RSS). רק אפשר להגביל ב-Service Worker את הנתיבים האלה לאחזור מהרשת, אבל ה-Service Worker עדיין צריך להתחיל לפעול כדי להחליט איך לטפל בבקשות האלה.
לעומת זאת, ה-API של הניתוב הסטטי, עוקף את Service Worker באופן מלא באמצעות כמה שורות הצהרתיות:
self.addEventListener('install', event => {
if (event.registerRouter) {
event.registerRouter([{
condition: {
urlPattern: {pathname: '/feeds/*.xml'},
},
source: 'network',
}, {
condition: {
urlPattern: {pathname: '/archives/*'},
},
source: 'network',
}]);
}
});
ככל שה-Service Worker Static Routing API מתפתח, ההגדרות האישיות האלה יהיו גמישות יותר ויתמכו בתרחישים נוספים, כמו מרוץ הצהרתי של אחזור רשת ואתחול של קובץ שירות (service worker). פרטים נוספים זמינים בניתוח המפרט לגבי 'צורה סופית' פוטנציאלית של ה-API.
התנסות עם Service Worker Static Routing API
ה-Service Worker Static Routing API זמין ב-Chrome החל מגרסה 116 של גרסת מקור לניסיון, שמאפשרת למפתחים לבדוק את ה-API באתר שלהם עם משתמשים אמיתיים כדי למדוד את ההשפעה. למידע נוסף על גרסאות מקור לניסיון, ראו "תחילת העבודה עם גרסאות המקור לניסיון".
בבדיקות מקומיות, אפשר להפעיל את Service Worker Static Routing API באמצעות דגל ב-chrome://flags/#service-worker-static-router, או להריץ את Chrome באמצעות פקודה כמו --enable-features=ServiceWorkerStaticRouter.
משוב ומסלולים עתידיים
ה-Service Worker Static Routing API נמצא בשלבי פיתוח ועדיין נמצא בעיצוב. אם נראה לכם שהיא יכולה להועיל לכם, כדאי לנסות אותה בגרסת המקור לניסיון ולשלוח משוב על ה-API, ההטמעה והפונקציונליות הזמינה.