ניתוב תיבת עבודה

קובץ שירות (service worker) יכול ליירט בקשות רשת לדפים. הוא עשוי להגיב ל: דפדפן עם תוכן שנשמר במטמון, תוכן מהרשת או תוכן שנוצר בקובץ השירות (service worker).

workbox-routing הוא מודול שמאפשר "לנתב" בקלות הבקשות האלה פונקציות שונות שמספקות תשובות.

איך מתבצע הניתוב

כשבקשת רשת גורמת לאירוע אחזור של Service Worker, workbox-routing ינסה להגיב לבקשה באמצעות המסלולים ורכיבי ה-handler שסופקו.

הנקודות העיקריות שכדאי לשים לב אליהן הן:

• חשוב לזכור את השיטה של הבקשה. כברירת מחדל, המסלולים רשומים עבור GET בקשות. אם ברצונך ליירט סוגים אחרים של בקשות, צריך כדי לציין את ה-method.

• חשוב לסדר את הרישום של המסלול. אם יש כמה מסלולים רשום שיכול לטפל בבקשה, המסלול שנרשם ראשון ישמש לתגובה לבקשה.

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

התאמה וטיפול במסלולים

"נתיב" בתיבת העבודה היא לא יותר משתי פונקציות: פונקציה כדי לקבוע אם המסלול צריך להתאים לבקשה ול'טיפול' פונקציה, שאמורה לטפל בבקשה ולהגיב בתגובה.

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

א' התאמה של פונקציית קריאה חוזרת עובר ExtendableEvent, Request, וגם אפשר URL של אובייקט באמצעות החזרת ערך של ערך. לדוגמה פשוטה, אפשר לבצע התאמה כתובת URL ספציפית, למשל:

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

כדי לטפל ברוב תרחישי השימוש, ניתן לבחון או לבדוק את url או את request.

א' פונקציית הקריאה החוזרת של ה-handler יקבלו ExtendableEvent, Request, וגם URL אובייקט וגם ערך params, שהוא הערך שהוחזר על ידי "match" מותאמת אישית.

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

ה-handler צריך להחזיר הבטחה שמסתיימת ל-Response. כאן נשתמש בדוגמה הזאת, async ו-await. מתחת למכסה הקדמי, הערך המוחזר של Response יהיה מוקף בהבטחה.

אפשר לרשום את הקריאות החוזרות האלה, למשל:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

המגבלה היחידה היא שה"התאמה" הקריאה החוזרת (callback) חייבת לסנכרן באופן סינכרוני ערך זה, לא ניתן לבצע עבודה אסינכרונית. הסיבה לכך היא הערך של Router חייב להגיב באופן סינכרוני לאירוע האחזור או לאפשר שגיאה לאירועי אחזור אחרים.

בדרך כלל ה-handler (המטפל) ייעשה שימוש באחת מהאסטרטגיות שצוינו ב-callback לפי אסטרטגיות תיבת עבודה כמו:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(matchCb, new StaleWhileRevalidate());

בדף הזה נתמקד בנושא workbox-routing אבל אפשר מידע נוסף על האסטרטגיות האלה בנושא אסטרטגיות של תיבות עבודה

איך לרשום נתיב של ביטוי רגולרי

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

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

לבקשות מאת אותו מקור, הביטוי הרגולרי הזה יתאים כל עוד כתובת ה-URL של הבקשה תואמת ביטוי רגולרי.

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

עם זאת, בבקשות ממקורות שונים, ביטויים רגולריים חייב להיות תואם לתחילת כתובת ה-URL. הסיבה לכך היא לא סביר להניח שעם הביטוי הרגולרי new RegExp('/styles/.*\\.css') שהתכוונתם להתאים לקובצי CSS של צד שלישי.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

אם רצית התנהגות כזו, צריך רק לוודא שההתנהגות תואם להתחלה של כתובת ה-URL. אם אנחנו רוצים להתאים עבור https://cdn.third-party-site.com, נוכל להשתמש new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css').

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

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

איך לרשום מסלול ניווט

אם האתר הוא אפליקציה שכוללת דף אחד, אפשר להשתמש NavigationRoute עד תשובה ספציפית לכל בקשות ניווט.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

בכל פעם שמשתמש נכנס לאתר שלכם דרך הדפדפן, הבקשה להצגת הדף תהיה בקשת ניווט, ותוצג הדף שנשמר במטמון /app-shell.html. (הערה: צריך לשמור את הדף במטמון דרך workbox-precaching או דרך בשלב ההתקנה עצמו).

כברירת מחדל, הפעולה הזו תגיב לכל בקשות הניווט. אם רוצים להגביל אותה כך שהיא תוכל להגיב לקבוצת משנה של כתובות URL, אפשר להשתמש בפקודה allowlist ו-denylist כדי להגביל את הדפים שתואמים למסלול הזה.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

חשוב רק לזכור שהשדה denylist ינצח אם כתובת URL מסוימת נמצאת בשני המקומות allowlist וdenylist.

הגדרת handler ברירת מחדל

אם רוצים לספק 'handler' לבקשות שלא תואמות למסלול, אתם יכול להגדיר handler ברירת מחדל.

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

הגדרת מטפל תפיסה

במקרה שהמסלולים שלך מקפיצים שגיאה, אפשר לצלם ו לפגוע באלגנטיות על ידי הגדרת handler של קליטה.

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

הגדרת נתיב לבקשות שאינן מסוג GET

ההנחה היא שכל המסלולים הם עבור בקשות GET כברירת מחדל.

כדי לנתב בקשות אחרות, כמו בקשה של POST, צריך כדי להגדיר את השיטה בזמן רישום המסלול, למשל:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

רישום ביומן של נתב

אפשר לזהות את זרימת הבקשה בעזרת היומנים של workbox-routing, שידגיש אילו כתובות URL נמצאות בתהליך עיבוד דרך תיבת העבודה.

אם דרוש לך מידע מפורט נוסף, אפשר להגדיר את רמת היומן ל-debug כך: לצפות ביומנים של בקשות שלא טופלו על ידי הנתב. כדאי לעיין במדריך לניפוי באגים תוכלו למצוא מידע נוסף על בהגדרה של רמת היומן.

שימוש מתקדם

אם אתם רוצים שתהיה לכם יותר שליטה על המועד שבו ניתן הנתב של תיבת העבודה תוכל ליצור בקשות משלך, מופע וקריאה של Router השעה handleRequest() method בכל פעם שרוצים להשתמש בנתב כדי להגיב לבקשה.

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

כשמשתמשים ישירות ב-Router, צריך להשתמש גם במחלקה Route, או כל אחת מהמחלקות המתרחבות כדי לרשום מסלולים.

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string | RegExp | RouteMatchCallback | Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)