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