אסטרטגיות של ארגזי עבודה

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

workbox-strategies מספק את האסטרטגיות הנפוצות ביותר לשמירה במטמון, כך שקל להחיל אותם ב-Service Worker.

לא נוסיף פרטים מעבר לאסטרטגיות שנתמכות על ידי Workbox. אבל אפשר לקרוא מידע נוסף ב'מתכונים שלי'.

שימוש באסטרטגיות

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

בקטע 'שימוש מתקדם' נסביר איך אפשר להשתמש את אסטרטגיות השמירה במטמון ישירות בלי workbox-routing.

לא פעיל בזמן אימות מחדש

לא פעיל בזמן אימות מחדש של התרשים

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

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

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

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

קודם המטמון (מטמון המערכת חוזרת אל הרשת)

תרשים של המטמון הראשון

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

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

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

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

הרשת הראשונה (הרשת חזרה במטמון)

תרשים ראשון של הרשת

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

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

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

רשת בלבד

תרשים רשת בלבד

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

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

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

מטמון בלבד

תרשים של המטמון בלבד

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

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

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

הגדרת אסטרטגיות

כל האסטרטגיות מאפשרות לכם להגדיר:

  • שם המטמון לשימוש באסטרטגיה.
  • הגבלות על תפוגת התוקף של המטמון לשימוש בשיטה.
  • מערך של יישומי פלאגין שה-methods של מחזור החיים שלהם ייקראו כאשר אחזור ושמירה של בקשה במטמון.

שינוי המטמון שמשמש אסטרטגיה

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

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

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

שימוש ביישומי פלאגין

תיבת העבודה כוללת קבוצה של יישומי פלאגין שבהם אפשר להשתמש עם האסטרטגיות האלה.

כדי להשתמש באחד מיישומי הפלאגין האלו (או בפלאגין מותאם אישית), צריך רק להעביר למופעים של האפשרות plugins.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

אסטרטגיות מותאמות אישית

בנוסף להגדרת אסטרטגיות, מערכת Workbox מאפשרת לכם ליצור אסטרטגיות מותאמות אישית משלכם. כדי לעשות זאת, אפשר לייבא את מחלקת הבסיס Strategy ולהרחיב אותה מ-workbox-strategies:

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

בדוגמה הזו, השיטה handle() משמשת כאסטרטגיית בקשות להגדרה של לוגיקת טיפול ספציפית. יש יש שתי אסטרטגיות בקשה שבהן אפשר להשתמש:

  • handle(): מבצעים אסטרטגיית בקשות ומחזירים ערך של Promise שיסתיים עם Response, הפעלה של כל הקריאות החוזרות (callback) הרלוונטיות של יישומי הפלאגין.
  • handleAll(): דומה ל-handle(), אבל מחזיר שני אובייקטים של Promise. הראשונה היא שווה ערך למה ש-handle() יחזיר, והשנייה תיפתר כשהבטחות שהובטחו שנוספו ל-event.waitUntil() בתוך האסטרטגיה השלימו את התהליך.

שתי אסטרטגיות הבקשות מופעלות באמצעות שני פרמטרים:

  • request: Request שהשיטה הזו תחזיר תשובה.
  • handler: מכונה של StrategyHandler שנוצרה באופן אוטומטי עבור השיטה הנוכחית.

יצירת אסטרטגיה חדשה

דוגמה לשיטה חדשה שמממשת מחדש את ההתנהגות של NetworkOnly:

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

כדאי לשים לב איך handler.fetch() נקראת במקום שיטת fetch המקורית. StrategyHandler המחלקה מספקת מספר פעולות אחזור ומטמון, שאפשר להשתמש בהן בכל פעם שhandle() או נעשה שימוש ב-handleAll():

  • fetch: מאחזר בקשה נתונה ומפעיל את requestWillFetch(), fetchDidSucceed() fetchDidFail() שיטות במחזור החיים של הפלאגין
  • cacheMatch: מתאים לבקשה מהמטמון ומפעיל את cacheKeyWillBeUsed() cachedResponseWillBeUsed() שיטות במחזור החיים של יישומי פלאגין
  • cachePut: שומר צמד של בקשה/תשובה במטמון ומפעיל את cacheKeyWillBeUsed(), שיטות מחזור החיים של הפלאגין cacheWillUpdate() ו-cacheDidUpdate()
  • fetchAndCachePut: התקשרות אל fetch() והרצת cachePut() ברקע בתשובה נוצר על ידי fetch().
  • hasCallback: הפונקציה מקבלת קריאה חוזרת כקלט ומחזירה את הערך True אם לאסטרטגיה יש לפחות פלאגין אחד עם הקריאה החוזרת הנתונה.
  • runCallbacks: מריץ את כל הקריאות החוזרות (callback) של יישומי הפלאגין התואמים לשם נתון, לפי הסדר של פרמטר נתון אובייקט (מוזג עם מצב הפלאגין הנוכחי) כארגומנט היחיד.
  • iterateCallbacks: מקבל קריאה חוזרת (callback) ומחזיר קריאה חוזרת של קריאות חוזרות תואמות, כאשר כל קריאה חוזרת עטופה במצב ה-handler הנוכחי (כלומר, כשקוראים לכל קריאה חוזרת, כל פרמטר אובייקט שמעבירים ימוזג עם המצב הנוכחי של הפלאגין).
  • waitUntil: הוספת הבטחה להבטחה להארכת משך החיים של האירוע המשויך ל מטופלת (בדרך כלל FetchEvent).
  • doneWaiting: פונקציה זו מחזירה הבטחה שמטופלת לאחר שכל ההבטחות שהועברו אל waitUntil() הוסדר.
  • destroy: הפסקת הפעלת האסטרטגיה ופתרון מיידי של כל הבטחות waitUntil() ממתינות.

שיטת מרוץ מותאמת אישית לרשת המטמון

הדוגמה הבאה מבוססת על cache-network-race מ- 'המתכונים שלי' (ש-Workbox לא מספקים), אבל מתקדמים צעד אחד נוסף ותמיד מעדכנים את במטמון לאחר בקשת רשת שהופעלה בהצלחה. דוגמה לאסטרטגיה מורכבת יותר שמשתמשת מספר פעולות.

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

שימוש מתקדם

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

לדוגמה, כדי להשתמש באסטרטגיה לא פעילה בזמן אימות מחדש, אפשר לבצע את הפעולות הבאות: הבאים:

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

אפשר למצוא את רשימת הכיתות הזמינות בקטע מסמכי עזר של workbox-strategies.

סוגים

CacheFirst

יישום של מודל מטמון אסטרטגיית בקשות.

אסטרטגיה של שמירה במטמון שימושית במיוחד לנכסים ששונו, כמו כתובות URL כמו /styles/example.a8f5f1.css, כי אפשר לשמור במטמון לפרקי זמן ארוכים.

אם בקשת הרשת תיכשל, ואין התאמה במטמון, חריג של WorkboxError.

מאפיינים

  • constructor

    ריק

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

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

    הפונקציה constructor נראית כך: 

    (options?: StrategyOptions) => {...}

  • cacheName

    מחרוזת

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[]

  • _awaitComplete

    ריק

    הפונקציה _awaitComplete נראית כך: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • בקשה

      בקשה

    • אירוע

      ExtendableEvent

    • החזרות

      הבטחה<Empty>

  • _getResponse

    ריק

    הפונקציה _getResponse נראית כך: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • החזרות

      Promise&lt;Response&gt;

  • נקודת אחיזה

    ריק

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

    כשמופע של אסטרטגיה נרשם באמצעות Workbox workbox-routing.Route, השיטה הזו מופעלת באופן אוטומטי כשהמסלול תואם.

    לחלופין, אפשר להשתמש בשיטה הזו בקובץ FetchEvent עצמאי. באמצעות העברה אל event.respondWith().

    הפונקציה handle נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      Promise&lt;Response&gt;

  • handleAll

    ריק

    דומה ל-workbox-strategies.Strategy~handle, אבל במקום להחזיר רק Promise שמפנה ל-Response הוא יחזיר גידול של [response, done] הבטחות, (response) היא שוות ערך למה שמחזיר handle(), הבטחה שתפתרו לאחר כל הבטחה שיתווספו event.waitUntil() כחלק מביצוע האסטרטגיה.

    אפשר לחכות להבטחה של done כדי לוודא שכל עבודה נוספת תתבצע על ידי האסטרטגיה (בדרך כלל שמירת תגובות במטמון) הושלמה בהצלחה.

    הפונקציה handleAll נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      [Promise<Response>, Promise< אפילו> ]

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

CacheOnly

יישום של מטמון בלבד אסטרטגיית בקשות.

שיעור זה שימושי אם ברצונך לנצל יישומי פלאגין לתיבת עבודה.

אם אין התאמה במטמון, הפעולה הזו תוביל לחריגה מסוג WorkboxError.

מאפיינים

  • constructor

    ריק

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

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

    הפונקציה constructor נראית כך: 

    (options?: StrategyOptions) => {...}

  • cacheName

    מחרוזת

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[]

  • _awaitComplete

    ריק

    הפונקציה _awaitComplete נראית כך: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • בקשה

      בקשה

    • אירוע

      ExtendableEvent

    • החזרות

      הבטחה<Empty>

  • _getResponse

    ריק

    הפונקציה _getResponse נראית כך: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • החזרות

      Promise&lt;Response&gt;

  • נקודת אחיזה

    ריק

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

    כשמופע של אסטרטגיה נרשם באמצעות Workbox workbox-routing.Route, השיטה הזו מופעלת באופן אוטומטי כשהמסלול תואם.

    לחלופין, אפשר להשתמש בשיטה הזו בקובץ FetchEvent עצמאי. באמצעות העברה אל event.respondWith().

    הפונקציה handle נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      Promise&lt;Response&gt;

  • handleAll

    ריק

    דומה ל-workbox-strategies.Strategy~handle, אבל במקום להחזיר רק Promise שמפנה ל-Response הוא יחזיר גידול של [response, done] הבטחות, (response) היא שוות ערך למה שמחזיר handle(), הבטחה שתפתרו לאחר כל הבטחה שיתווספו event.waitUntil() כחלק מביצוע האסטרטגיה.

    אפשר לחכות להבטחה של done כדי לוודא שכל עבודה נוספת תתבצע על ידי האסטרטגיה (בדרך כלל שמירת תגובות במטמון) הושלמה בהצלחה.

    הפונקציה handleAll נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      [Promise<Response>, Promise< אפילו> ]

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

NetworkFirst

יישום של קודם כל הרשתות אסטרטגיית בקשות.

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

אם בקשת הרשת תיכשל, ואין התאמה במטמון, חריג של WorkboxError.

מאפיינים

  • constructor

    ריק

    הפונקציה constructor נראית כך: 

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    מחרוזת

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[]

  • _awaitComplete

    ריק

    הפונקציה _awaitComplete נראית כך: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • בקשה

      בקשה

    • אירוע

      ExtendableEvent

    • החזרות

      הבטחה<Empty>

  • _getResponse

    ריק

    הפונקציה _getResponse נראית כך: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • החזרות

      Promise&lt;Response&gt;

  • נקודת אחיזה

    ריק

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

    כשמופע של אסטרטגיה נרשם באמצעות Workbox workbox-routing.Route, השיטה הזו מופעלת באופן אוטומטי כשהמסלול תואם.

    לחלופין, אפשר להשתמש בשיטה הזו בקובץ FetchEvent עצמאי. באמצעות העברה אל event.respondWith().

    הפונקציה handle נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      Promise&lt;Response&gt;

  • handleAll

    ריק

    דומה ל-workbox-strategies.Strategy~handle, אבל במקום להחזיר רק Promise שמפנה ל-Response הוא יחזיר גידול של [response, done] הבטחות, (response) היא שוות ערך למה שמחזיר handle(), הבטחה שתפתרו לאחר כל הבטחה שיתווספו event.waitUntil() כחלק מביצוע האסטרטגיה.

    אפשר לחכות להבטחה של done כדי לוודא שכל עבודה נוספת תתבצע על ידי האסטרטגיה (בדרך כלל שמירת תגובות במטמון) הושלמה בהצלחה.

    הפונקציה handleAll נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      [Promise<Response>, Promise< אפילו> ]

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

NetworkFirstOptions

מאפיינים

  • cacheName

    מחרוזת אופציונלי

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • networkTimeoutSeconds

    מספר אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[] אופציונלי

NetworkOnly

יישום של רשת בלבד אסטרטגיית בקשות.

שיעור זה שימושי אם ברצונך לנצל יישומי פלאגין לתיבת עבודה.

אם בקשת הרשת תיכשל, תתרחש החריגה WorkboxError.

מאפיינים

  • constructor

    ריק

    הפונקציה constructor נראית כך: 

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    מחרוזת

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[]

  • _awaitComplete

    ריק

    הפונקציה _awaitComplete נראית כך: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • בקשה

      בקשה

    • אירוע

      ExtendableEvent

    • החזרות

      הבטחה<Empty>

  • _getResponse

    ריק

    הפונקציה _getResponse נראית כך: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • החזרות

      Promise&lt;Response&gt;

  • נקודת אחיזה

    ריק

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

    כשמופע של אסטרטגיה נרשם באמצעות Workbox workbox-routing.Route, השיטה הזו מופעלת באופן אוטומטי כשהמסלול תואם.

    לחלופין, אפשר להשתמש בשיטה הזו בקובץ FetchEvent עצמאי. באמצעות העברה אל event.respondWith().

    הפונקציה handle נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      Promise&lt;Response&gt;

  • handleAll

    ריק

    דומה ל-workbox-strategies.Strategy~handle, אבל במקום להחזיר רק Promise שמפנה ל-Response הוא יחזיר גידול של [response, done] הבטחות, (response) היא שוות ערך למה שמחזיר handle(), הבטחה שתפתרו לאחר כל הבטחה שיתווספו event.waitUntil() כחלק מביצוע האסטרטגיה.

    אפשר לחכות להבטחה של done כדי לוודא שכל עבודה נוספת תתבצע על ידי האסטרטגיה (בדרך כלל שמירת תגובות במטמון) הושלמה בהצלחה.

    הפונקציה handleAll נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      [Promise<Response>, Promise< אפילו> ]

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

NetworkOnlyOptions

מאפיינים

  • fetchOptions

    RequestInit אופציונלי

  • networkTimeoutSeconds

    מספר אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[] אופציונלי

StaleWhileRevalidate

יישום של לא פעיל בזמן אימות מחדש אסטרטגיית בקשות.

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

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

אם בקשת הרשת תיכשל, ואין התאמה במטמון, חריג של WorkboxError.

מאפיינים

  • constructor

    ריק

    הפונקציה constructor נראית כך: 

    (options?: StrategyOptions) => {...}

  • cacheName

    מחרוזת

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[]

  • _awaitComplete

    ריק

    הפונקציה _awaitComplete נראית כך: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • בקשה

      בקשה

    • אירוע

      ExtendableEvent

    • החזרות

      הבטחה<Empty>

  • _getResponse

    ריק

    הפונקציה _getResponse נראית כך: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • החזרות

      Promise&lt;Response&gt;

  • נקודת אחיזה

    ריק

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

    כשמופע של אסטרטגיה נרשם באמצעות Workbox workbox-routing.Route, השיטה הזו מופעלת באופן אוטומטי כשהמסלול תואם.

    לחלופין, אפשר להשתמש בשיטה הזו בקובץ FetchEvent עצמאי. באמצעות העברה אל event.respondWith().

    הפונקציה handle נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      Promise&lt;Response&gt;

  • handleAll

    ריק

    דומה ל-workbox-strategies.Strategy~handle, אבל במקום להחזיר רק Promise שמפנה ל-Response הוא יחזיר גידול של [response, done] הבטחות, (response) היא שוות ערך למה שמחזיר handle(), הבטחה שתפתרו לאחר כל הבטחה שיתווספו event.waitUntil() כחלק מביצוע האסטרטגיה.

    אפשר לחכות להבטחה של done כדי לוודא שכל עבודה נוספת תתבצע על ידי האסטרטגיה (בדרך כלל שמירת תגובות במטמון) הושלמה בהצלחה.

    הפונקציה handleAll נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      [Promise<Response>, Promise< אפילו> ]

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

Strategy

מחלקת בסיס מופשטת שכל שאר מחלקות האסטרטגיה חייבות להרחיב ממנה:

מאפיינים

  • constructor

    ריק

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

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

    הפונקציה constructor נראית כך: 

    (options?: StrategyOptions) => {...}

  • cacheName

    מחרוזת

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[]

  • _awaitComplete

    ריק

    הפונקציה _awaitComplete נראית כך: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • בקשה

      בקשה

    • אירוע

      ExtendableEvent

    • החזרות

      הבטחה<Empty>

  • _getResponse

    ריק

    הפונקציה _getResponse נראית כך: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • החזרות

      Promise&lt;Response&gt;

  • _handle

    ריק

    הפונקציה _handle נראית כך: 

    (request: Request, handler: StrategyHandler) => {...}

    • החזרות

      Promise&lt;Response&gt;

  • נקודת אחיזה

    ריק

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

    כשמופע של אסטרטגיה נרשם באמצעות Workbox workbox-routing.Route, השיטה הזו מופעלת באופן אוטומטי כשהמסלול תואם.

    לחלופין, אפשר להשתמש בשיטה הזו בקובץ FetchEvent עצמאי. באמצעות העברה אל event.respondWith().

    הפונקציה handle נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      Promise&lt;Response&gt;

  • handleAll

    ריק

    דומה ל-workbox-strategies.Strategy~handle, אבל במקום להחזיר רק Promise שמפנה ל-Response הוא יחזיר גידול של [response, done] הבטחות, (response) היא שוות ערך למה שמחזיר handle(), הבטחה שתפתרו לאחר כל הבטחה שיתווספו event.waitUntil() כחלק מביצוע האסטרטגיה.

    אפשר לחכות להבטחה של done כדי לוודא שכל עבודה נוספת תתבצע על ידי האסטרטגיה (בדרך כלל שמירת תגובות במטמון) הושלמה בהצלחה.

    הפונקציה handleAll נראית כך: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

      FetchEvent או אובייקט עם המפורטים בהמשך.

    • החזרות

      [Promise<Response>, Promise< אפילו> ]

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

StrategyHandler

מחלקה נוצרת בכל פעם שמופע אסטרטגיה מבצע קריאה workbox-strategies.Strategy~handle או workbox-strategies.Strategy~handleAll שעוקף את כל האחזור ו פעולות במטמון סביב קריאות חוזרות (callback) של יישומי פלאגין ועוקב אחר המועדים של האסטרטגיה היא 'בוצע' (כלומר, כל event.waitUntil() ההבטחות שנוספו נפתרו).

מאפיינים

  • constructor

    ריק

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

    ה-constructor גם מאתחל את המצב שיועבר לכל אחד מהרכיבים יישומי הפלאגין שמטפלים בבקשה הזו.

    הפונקציה constructor נראית כך: 

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • אירוע

    ExtendableEvent

  • פרמטרים

    כל אופציונלי

  • בקשה

    בקשה

  • כתובת אתר

    כתובת URL אופציונלי

  • cacheMatch

    ריק

    מתאים לבקשה מהמטמון (ומפעיל כל פלאגין רלוונטי שיטות קריאה חוזרת) באמצעות cacheName, matchOptions ו-plugins מוגדר באובייקט האסטרטגיה.

    כשמשתמשים בשיטה הזו, השיטות הבאות במחזור החיים של יישומי הפלאגין מופעלות:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    הפונקציה cacheMatch נראית כך: 

    (key: RequestInfo) => {...}

    • מקש

      RequestInfo

      הבקשה או כתובת ה-URL שישמשו כמפתח המטמון.

    • החזרות

      Promise&lt;Response&gt;

      אם נמצאה תגובה תואמת.

  • cachePut

    ריק

    שומרת צמד של בקשה/תשובה במטמון (ומפעילה כל צמד רלוונטי אחר, methods של קריאה חוזרת (callback)) באמצעות cacheName ו-plugins שמוגדרים ב- אובייקט האסטרטגיה.

    כשמשתמשים בשיטה הזו, השיטות הבאות במחזור החיים של יישומי הפלאגין מופעלות:

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    הפונקציה cachePut נראית כך: 

    (key: RequestInfo, response: Response) => {...}

    • מקש

      RequestInfo

      הבקשה או כתובת ה-URL שישמשו כמפתח המטמון.

    • תשובה

      תשובה

      התשובה למטמון.

    • החזרות

      Promise&lt;boolean&gt;

      false אם cacheWillUpdate גרם לתגובה לא להישמר במטמון, ו-true אם לא.

  • כיבוי סופי

    ריק

    הפסקת הפעלת האסטרטגיה ופתרון מיידי של בעיות בהמתנה waitUntil() מבטיח.

    הפונקציה destroy נראית כך: 

    () => {...}

  • doneWaiting

    ריק

    מחזיר הבטחה שמטופלת לאחר שכל ההבטחות מועברות workbox-strategies.StrategyHandler~waitUntil הסתיים.

    הערה: כל עבודה שמבוצעת לאחר הסדרת doneWaiting() תתבצע באופן ידני מועברות ל-method waitUntil() של אירוע (לא ל-method של ה-handler הזה) waitUntil() method), אחרת ה-thread של ה-Service Worker יאבד לפני השלמת העבודה שלכם.

    הפונקציה doneWaiting נראית כך: 

    () => {...}

    • החזרות

      הבטחה<Empty>

  • אחזור

    ריק

    מאחזר בקשה נתונה (ומפעיל כל קריאה חוזרת (callback) רלוונטית של פלאגין שיטות) באמצעות fetchOptions (לבקשות שאינן ניווט) הוגדר plugins באובייקט Strategy.

    כשמשתמשים בשיטה הזו, השיטות הבאות במחזור החיים של יישומי הפלאגין מופעלות:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    הפונקציה fetch נראית כך: 

    (input: RequestInfo) => {...}

    • קלט

      RequestInfo

      כתובת ה-URL או בקשת האחזור.

    • החזרות

      Promise&lt;Response&gt;

  • fetchAndCachePut

    ריק

    השיחה היא this.fetch() והאפליקציה this.cachePut() (ברקע) פועלת התשובה שנוצרה על ידי this.fetch().

    השיחה אל this.cachePut() מפעילה את this.waitUntil() באופן אוטומטי, כך שלא צריך להפעיל ידנית את waitUntil() באירוע.

    הפונקציה fetchAndCachePut נראית כך: 

    (input: RequestInfo) => {...}

    • קלט

      RequestInfo

      הבקשה או כתובת ה-URL לאחזור ולשמירה במטמון.

    • החזרות

      Promise&lt;Response&gt;

  • getCacheKey

    ריק

    בודק את רשימת יישומי הפלאגין עבור הקריאה החוזרת של cacheKeyWillBeUsed, מבצע את כל הקריאות החוזרות (callback) שנמצאו ברצף. Request הסופי האובייקט שהוחזר על ידי הפלאגין האחרון נחשב כמפתח המטמון עבור המטמון קריאה ו/או כתיבה. אם לא בוצעה קריאה חוזרת (callback) של cacheKeyWillBeUsed נרשם, הבקשה שהועברה מוחזרת ללא שינוי

    הפונקציה getCacheKey נראית כך: 

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • בקשה

      בקשה

    • מצב

      "קריאה"
       | "כתיבה"

    • החזרות

      Promise&lt;Request&gt;

  • hasCallback

    ריק

    הפונקציה מחזירה true אם לאסטרטגיה יש לפחות פלאגין אחד עם הפרמטר שצוין קריאה חוזרת.

    הפונקציה hasCallback נראית כך: 

    (name: C) => {...}

    • שם

      C

      שם הקריאה החוזרת שצריך לבדוק.

    • החזרות

      בוליאני

  • iterateCallbacks

    ריק

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

    הפונקציה iterateCallbacks נראית כך: 

    (name: C) => {...}

    • שם

      C

      השם שאליו יש להפעיל את הקריאה החוזרת

    • החזרות

      מחולל<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    ריק

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

    הערה: השיטה הזו מפעילה את כל יישומי הפלאגין, ולכן היא לא מתאימה במקרים שבו צריך להחיל את הערך המוחזר של הקריאה החוזרת לפני הקריאה את הקריאה החוזרת הבאה. צפייה workbox-strategies.StrategyHandler#iterateCallbacks שבהמשך מוסבר איך לטפל במקרה הזה.

    הפונקציה runCallbacks נראית כך: 

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • שם

      C

      שם הקריאה החוזרת שתופעל בתוך כל פלאגין.

    • פרמטר

      Omit<indexedAccess"state"
      >

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

    • החזרות

      הבטחה<Empty>

  • waitUntil

    ריק

    הוספת הבטחה [הרחבת הבטחות לכל החיים]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises של האירוע המשויך לבקשה מטופלת (בדרך כלל FetchEvent).

    הערה: אפשר להמתין workbox-strategies.StrategyHandler~doneWaiting לדעת מתי כל ההבטחות שנוספו יושבו.

    הפונקציה waitUntil נראית כך: 

    (promise: Promise<T>) => {...}

    • מבטיחים

      מבטיח<T>

      הבטחה להוסיף את ההבטחה להארכת משך החיים של האירוע שהפעיל את הבקשה.

    • החזרות

      מבטיח<T>

StrategyOptions

מאפיינים

  • cacheName

    מחרוזת אופציונלי

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • יישומי פלאגין

    WorkboxPlugin[] אופציונלי