שימוש ב-Service Worker Static Routing API כדי לעקוף את ה-Service worker בנתיבים ספציפיים

Rachel Andrew

החל מ-Chrome 123, זמין Service Worker Static Routing API. ממשק ה-API הזה מאפשר להצהיר איך צריך לאחזר נתיבי משאבים מסוימים, כלומר הדפדפן לא צריך להריץ service worker רק כדי לאחזר תגובות ממטמון או ישירות מהרשת. ה-API הזה נמצא בגרסת מקור לניסיון מאז Chrome 116, ובמאמר הזה מפורטות ההשקות של ה-API ב-Chrome 123.

שימוש ב-API

כדי להשתמש בקריאה ל-API event.addRoutes באירוע של Service Worker install. מעבירים לשיטה הזו רשימה של מסלולים עם המאפיינים הבאים:

condition
מציין מתי הכלל חל. המאפיינים הבאים קבילים:
  • ‫urlPattern: מופע של URLPattern או מחרוזת שמייצגת URLPattern תקין, שאפשר להעביר אל הבונה URLPattern.
  • ‫requestMethod: מחרוזת שמכילה method של בקשה.
  • ‫requestMode: מחרוזת שמכילה מצב של בקשה.
  • ‫requestDestination: מחרוזת שמכילה יעד של בקשה.
  • ‫runningStatus: מחרוזת, "running" או "not-running". הסטטוס של ה-service 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, מוסיף את האפשרות לציין שיטת בקשה, מצב ויעד, ומוסיף אפשרויות נוספות למקור.

תמיכה בכלי הפיתוח ל-Chrome

כללי הניתוב הרשומים מוצגים בכרטיסייה Service Worker בחלונית Application.

כללי הניתוב מודגשים בחלונית Application (אפליקציה).

בחלונית Network, אם הבקשה תואמת לכלל הרשום, הדבר יצוין בעמודת הגודל. כשמחזיקים את הסמן מעל העמודה 'גודל', מוצג מזהה הנתב הרשום. הכללים המתאימים מוצגים בכרטיסיית האפליקציה.

מזהה הנתב כפי שמוצג בחלונית הרשת.