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

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

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

לא נפרט יותר מדי על האסטרטגיות שנתמכות ב-Workbox, אבל תוכלו לקבל מידע נוסף ב-אופליין ב-Cookbook.

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

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

בקטע Advanced Usage מוסבר איך אפשר להשתמש ישירות באסטרטגיות השמירה במטמון בלי workbox-routing.

לא פעיל במהלך אימות מחדש

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

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

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());

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

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

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

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

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

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

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

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

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

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• Workbox-expiration
• בקשות טווח-עבודה

כדי להשתמש באחד מיישומי הפלאגין האלה (או בפלאגין מותאם אישית), צריך רק להעביר במכונות את האפשרות 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: הפונקציה מקבלת קריאה חוזרת (callback) כקלט ומחזירה את הערך true אם לשיטה יש לפחות פלאגין אחד עם הקריאה החוזרת (callback) הנתון.
• runCallbacks: מריץ את כל הקריאות החוזרות של הפלאגין שתואמות לשם נתון, לפי הסדר, ומעביר אובייקט פרמטר נתון (ממוזג עם מצב הפלאגין הנוכחי) כארגומנט היחיד.
• iterateCallbacks: מקבל קריאה חוזרת ומחזיר מספר איטרציה של קריאות חוזרות תואמות של יישומי פלאגין, כאשר כל קריאה חוזרת ארוזה במצב ה-handler הנוכחי (כלומר, בכל קריאה חוזרת לכל פרמטר של אובייקט שיועבר, הוא ימוזג עם המצב הנוכחי של הפלאגין).
• waitUntil: הוספת הבטחה להארכת משך החיים של האירוע שקשור לבקשה שמטופלת (בדרך כלל FetchEvent).
• doneWaiting: מחזירה הבטחה שמתקיימת לאחר שכל ההבטחות שהועברו אל waitUntil() יושבו.
• destroy: מפסיק להפעיל את האסטרטגיה ופותר מיד את כל ההבטחות הממתינות ל-waitUntil().

הערה: אפשר להיעזר בהטמעת המקור של StrategyHandler כדי לראות את כל הפרמטרים שאושרו בכל פעולה

אסטרטגיית מרוץ של רשת מטמון מותאמת אישית

הדוגמה הבאה מבוססת על cache-network-race ב-מצב אופליין Cookbook (שלא מסופק ב-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}));
  }
});

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

סוגים

CacheFirst

הטמעה של אסטרטגיית בקשות cache-first.

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

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

תכונות

• Constructor

  void

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

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

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

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

  • אפשרויות

    StrategyOptions אופציונלי

  • החזרות

    CacheFirst

• cacheName

  מחרוזת

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

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

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    הבטחה<Response>

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    הבטחה<Response>

• כינוי

  void

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

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    הבטחה<Response>

• handleAll

  void

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    [Promise<Response>,Promise<void>]

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

CacheOnly

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

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

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

תכונות

• Constructor

  void

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

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

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

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

  • אפשרויות

    StrategyOptions אופציונלי

  • החזרות

    CacheOnly

• cacheName

  מחרוזת

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

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

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    הבטחה<Response>

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    הבטחה<Response>

• כינוי

  void

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

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    הבטחה<Response>

• handleAll

  void

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    [Promise<Response>,Promise<void>]

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

NetworkFirst

הטמעה של אסטרטגיית בקשות לרשת הראשונה.

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

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

תכונות

• Constructor

  void

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

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

  • אפשרויות

    NetworkFirstOptions אופציונלי

  • החזרות

    NetworkFirst

• cacheName

  מחרוזת

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

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

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    הבטחה<Response>

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    הבטחה<Response>

• כינוי

  void

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

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    הבטחה<Response>

• handleAll

  void

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    [Promise<Response>,Promise<void>]

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

NetworkFirstOptions

תכונות

• cacheName

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

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

• networkTimeoutSeconds

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

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

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

NetworkOnly

הטמעה של אסטרטגיית בקשות לרשת בלבד.

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

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

תכונות

• Constructor

  void

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

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

  • אפשרויות

    NetworkOnlyOptions אופציונלי

  • החזרות

    NetworkOnly

• cacheName

  מחרוזת

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

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

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    הבטחה<Response>

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    הבטחה<Response>

• כינוי

  void

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

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    הבטחה<Response>

• handleAll

  void

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    [Promise<Response>,Promise<void>]

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

NetworkOnlyOptions

תכונות

• fetchOptions

  RequestInit אופציונלי

• networkTimeoutSeconds

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

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

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

StaleWhileRevalidate

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

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

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

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

תכונות

• Constructor

  void

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

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

  • אפשרויות

    StrategyOptions אופציונלי

  • החזרות

    StaleWhileRevalidate

• cacheName

  מחרוזת

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

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

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    הבטחה<Response>

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    הבטחה<Response>

• כינוי

  void

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

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    הבטחה<Response>

• handleAll

  void

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    [Promise<Response>,Promise<void>]

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

Strategy

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

תכונות

• Constructor

  void

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

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

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

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

  • אפשרויות

    StrategyOptions אופציונלי

  • החזרות

    אסטרטגיה

• cacheName

  מחרוזת

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

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

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    הבטחה<Response>

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • בקשה

    בקשה

  • אירוע

    ExtendableEvent

  • החזרות

    הבטחה<Response>

• _handle

  void

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

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

  • בקשה

    בקשה

  • handler

    StrategyHandler

  • החזרות

    הבטחה<Response>

• כינוי

  void

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

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    הבטחה<Response>

• handleAll

  void

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

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

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

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

  • אפשרויות

    FetchEvent|HandlerCallbackOptions

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

  • החזרות

    [Promise<Response>,Promise<void>]

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

StrategyHandler

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

תכונות

• Constructor

  void

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

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

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

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

  • אסטרטגיה

    אסטרטגיה

  • אפשרויות

    HandlerCallbackOptions

  • החזרות

    StrategyHandler

• אירוע

  ExtendableEvent

• params

  כל אופציונלי

• בקשה

  בקשה

• כתובת אתר

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

• cacheMatch

  void

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

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

  • cacheKeyWillByUsed()
  • cachedResponseWillByUsed()

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

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

  • key

    RequestInfo

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

  • החזרות

    הבטחה<Response>

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

• cachePut

  void

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

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

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

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

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

  • key

    RequestInfo

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

  • תשובה

    תשובה

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

  • החזרות

    Promise<boolean>

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

• destroy

  void

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

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

  ()=> {...}

• doneWaiting

  void

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

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

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

  ()=> {...}

  • החזרות

    Promise<void>

• fetch

  void

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

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

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

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

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

  • קלט

    RequestInfo

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

  • החזרות

    הבטחה<Response>

• fetchAndCachePut

  void

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

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

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

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

  • קלט

    RequestInfo

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

  • החזרות

    הבטחה<Response>

• getCacheKey

  void

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

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

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

  • בקשה

    בקשה

  • אמצעי תחבורה

  • החזרות

    הבטחה<בקשה>

• hasCallback

  void

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

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

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

  • name

    C

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

  • החזרות

    boolean

• iterateCallbacks

  void

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

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

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

  • name

    C

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

  • החזרות

    Generator<NonNullable<indexedAccess>anyunknown>

• runCallbacks

  void

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

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

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

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

  • name

    C

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

  • פרמטר

    השמט<indexedAccess"state"
    >

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

  • החזרות

    Promise<void>

• waitUntil

  void

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

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

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

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

  • הבטחה

    Promise<T>

    הבטחה להגדיל את משך החיים של האירוע שגרם לבקשה.

  • החזרות

    Promise<T>

StrategyOptions

תכונות

• cacheName

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

• fetchOptions

  RequestInit אופציונלי

• matchOptions

  CacheQueryOptions אופציונלי

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

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