כשהשקנו את ה-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()
.
אסטרטגיית מרוץ של רשת מטמון מותאמת אישית
הדוגמה הבאה מבוססת על 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 אופציונלי
-
החזרות
-
-
cacheName
string
-
fetchOptions
RequestInit אופציונלי
-
matchOptions
CacheQueryOptions אופציונלי
-
יישומי פלאגין
-
_awaitComplete
void
הפונקציה
_awaitComplete
נראית כך:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
הבטחה<Response>
-
handler
-
בקשה
בקשה
-
אירוע
ExtendableEvent
-
החזרות
Promise<void>
-
-
_getResponse
void
הפונקציה
_getResponse
נראית כך:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
בקשה
בקשה
-
אירוע
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 אופציונלי
-
החזרות
-
-
cacheName
string
-
fetchOptions
RequestInit אופציונלי
-
matchOptions
CacheQueryOptions אופציונלי
-
יישומי פלאגין
-
_awaitComplete
void
הפונקציה
_awaitComplete
נראית כך:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
הבטחה<Response>
-
handler
-
בקשה
בקשה
-
אירוע
ExtendableEvent
-
החזרות
Promise<void>
-
-
_getResponse
void
הפונקציה
_getResponse
נראית כך:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
בקשה
בקשה
-
אירוע
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 אופציונלי
-
החזרות
-
-
cacheName
string
-
fetchOptions
RequestInit אופציונלי
-
matchOptions
CacheQueryOptions אופציונלי
-
יישומי פלאגין
-
_awaitComplete
void
הפונקציה
_awaitComplete
נראית כך:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
הבטחה<Response>
-
handler
-
בקשה
בקשה
-
אירוע
ExtendableEvent
-
החזרות
Promise<void>
-
-
_getResponse
void
הפונקציה
_getResponse
נראית כך:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
בקשה
בקשה
-
אירוע
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 אופציונלי
-
החזרות
-
-
cacheName
string
-
fetchOptions
RequestInit אופציונלי
-
matchOptions
CacheQueryOptions אופציונלי
-
יישומי פלאגין
-
_awaitComplete
void
הפונקציה
_awaitComplete
נראית כך:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
הבטחה<Response>
-
handler
-
בקשה
בקשה
-
אירוע
ExtendableEvent
-
החזרות
Promise<void>
-
-
_getResponse
void
הפונקציה
_getResponse
נראית כך:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
בקשה
בקשה
-
אירוע
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 אופציונלי
-
החזרות
-
-
cacheName
string
-
fetchOptions
RequestInit אופציונלי
-
matchOptions
CacheQueryOptions אופציונלי
-
יישומי פלאגין
-
_awaitComplete
void
הפונקציה
_awaitComplete
נראית כך:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
הבטחה<Response>
-
handler
-
בקשה
בקשה
-
אירוע
ExtendableEvent
-
החזרות
Promise<void>
-
-
_getResponse
void
הפונקציה
_getResponse
נראית כך:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
בקשה
בקשה
-
אירוע
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
string
-
fetchOptions
RequestInit אופציונלי
-
matchOptions
CacheQueryOptions אופציונלי
-
יישומי פלאגין
-
_awaitComplete
void
הפונקציה
_awaitComplete
נראית כך:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
הבטחה<Response>
-
handler
-
בקשה
בקשה
-
אירוע
ExtendableEvent
-
החזרות
Promise<void>
-
-
_getResponse
void
הפונקציה
_getResponse
נראית כך:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
בקשה
בקשה
-
אירוע
ExtendableEvent
-
החזרות
הבטחה<Response>
-
-
_handle
void
הפונקציה
_handle
נראית כך:(request: Request, handler: StrategyHandler) => {...}
-
בקשה
בקשה
-
handler
-
החזרות
הבטחה<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) => {...}
-
אסטרטגיה
-
אפשרויות
-
החזרות
-
-
אירוע
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()
ל-methodwaitUntil()
של אירוע (לא ל-methodwaitUntil()
של ה-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[] אופציונלי