קובצי שירות (service worker) הם כלי עוצמתי שמאפשר לאתרים לעבוד אופליין וליצור בעצמם כללים מיוחדים לשמירה במטמון. handler של fetch של קובץ שירות (service worker) רואה כל בקשה מהדף שנמצא בשליטתו, ויכול להחליט אם הוא רוצה לשלוח תגובה מהמטמון של קובץ השירות (service worker) או אפילו לשכתב את כתובת ה-URL כדי לאחזר תגובה אחרת לגמרי – לדוגמה, לפי העדפות של משתמשים מקומיים.
עם זאת, ל-Service Workers עשויה להיות עלות ביצועים כשדף נטען בפעם הראשונה בזמן שה-Service Worker השולט לא פועל. מכיוון שכל האחזורים צריכים להתבצע דרך Service Worker, הדפדפן צריך להמתין עד שה-Service Worker יתחיל לפעול ויפעל כדי לדעת איזה תוכן לטעון. עלות ההפעלה יכולה להיות קטנה אך משמעותית, למפתחים שמשתמשים ב-Service Workers כדי לשפר את הביצועים באמצעות אסטרטגיות שמירה במטמון.
טעינה מראש של ניווט היא אחת הדרכים לפתרון הבעיה, שמאפשרת לשלוח בקשות ניווט ברשת במקביל להפעלה של Service Worker, אבל היא מוגבלת לבקשות ניווט ראשוניות, ועדיין כוללת את Service Worker בנתיב הקריטי. מאז ההשקה של הטעינה מראש לניווט, נעשו מאמצים רבים לפיתוח פתרון כללי יותר למרחב הבעיות, כולל דרכים שבהן חלק מהבקשות לא ייחסמו בכלל בהפעלה של קובץ השירות (service worker).
Service Worker Static Routing API
החל מגרסה 116 של Chrome, ה-Service Worker Static Routing API הניסיוני זמין לבדיקת השלב הראשון בפתרון כזה. כשמתקינים Service Worker, הוא יכול להשתמש ב-Service Worker Static Routing API כדי לציין באופן מוצהר איך יאוחזרו נתיבי משאבים מסוימים.
בגרסה הראשונית של ה-API, אפשר להצהיר על נתיבים כך שיוצגו תמיד מהרשת ולא מה-Service Worker. אחרי שכתובת URL מבוקרת נטענת, הדפדפן יכול להתחיל לאחזר משאבים מהנתיבים האלה לפני שה-Service Worker מסיים את ההפעלה. הפעולה הזו מסירה את קובץ השירות (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 Pattern API כדי להתאים נתיבי משאבים. המאפיין יכול לקחת מופע שלURLPattern, או אובייקט פשוט שווה ערך שתואם להעברה אל ה-constructor שלURLPattern(למשל,new URLPattern({pathname: '*.jpg'})או רק{pathname: '*.jpg'}).המשמעות של הגמישות של תבניות ה-URL היא שהכלל יכול להתאים משהו פשוט כמו כל משאב בנתיב, לתנאים ספציפיים ומפורטים מאוד. באופן כללי, הדפוסים יהיו מוכרים למשתמשים של ספריות ניתוב פופולריות.
source: מציין איך ייטענו המשאבים שתואמים ל-condition. כיום יש תמיכה רק בערך'network'(עוקפים את Service Worker כדי לטעון את המשאב ישירות ברשת), אבל אנחנו מתכוונים להרחיב אותו לערכים נוספים בעתיד.
תרחישים לדוגמה
כפי שמוסבר, הגרסה הראשונית של ה-API היא למעשה פתח מילוט מבקרה של Service Worker בנתיבים מסוימים. כאשר זה מתאים לשימוש תלוי באופן השימוש שלכם ב-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, על ההטמעה ועל הפונקציונליות הזמינה.