הגדרה מראש של ארגז עבודה

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

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

Workbox מקל על העבודה הקשה של אחסון נתונים במטמון מראש על ידי פישוט ה-API ואימות שהנכסים יורדו ביעילות.

איך פועלת האחסון המוקדם של workbox

כשאפליקציית אינטרנט נטענת בפעם הראשונה, workbox-precaching יבדוק את כל הנכסים שרוצים להוריד, יסיר כפילויות ויקשר את האירועים הרלוונטיים של ה-service worker כדי להוריד ולאחסן את הנכסים. כתובות URL שכבר כוללות מידע לגבי ניהול גרסאות (כמו גיבוב תוכן) משמשות כמפתחות מטמון ללא שינוי נוסף. לכתובות URL שלא כוללות פרטי גרסאות מצורף פרמטר נוסף של שאילתה בכתובת ה-URL למפתח המטמון, שמייצג גיבוב של התוכן שלהן שנוצר על ידי Workbox בזמן ה-build.

workbox-precaching מבצע את כל הפעולות האלה במהלך האירוע install של ה-service worker.

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

ה-service worker החדש לא ישמש לתשובה לבקשות עד שהאירוע activate שלו יופעל. באירוע activate, הפונקציה workbox-precaching תבדוק אם יש נכסים ששמורים במטמון ושאינם נכללים יותר ברשימת כתובות ה-URL הנוכחיות, ותסיר אותם מהמטמון.

workbox-precaching יבצע את השלבים האלה בכל פעם ש-service worker מותקן ומופעל, כדי לוודא שהמשתמש מקבל את הנכסים העדכניים ביותר, ויורד רק את הקבצים שהשתנו.

הצגת תגובות שנשמרו במטמון

קריאה ל-precacheAndRoute() או ל-addRoute() תיצור מסלול שיתאים לבקשות לכתובות URL שנשמרו במטמון מראש.

שיטת התגובה שמופעלת במסלול הזה היא cache-first: המערכת תשתמש בתגובה שנשמרה במטמון, אלא אם התגובה הזו לא נמצאת במטמון (בגלל שגיאה בלתי צפויה כלשהי). במקרה כזה, המערכת תשתמש בתגובה מהרשת.

חשוב לשים לב לסדר שבו קוראים לפונקציה precacheAndRoute() או addRoute(). בדרך כלל כדאי להפעיל את הפונקציה בשלב מוקדם בקובץ של ה-service worker, לפני שמירת נתיב נוסף באמצעות registerRoute(). אם תבצעו קריאה ל-registerRoute() קודם, והמסלול הזה יתאים לבקשה נכנסת, המערכת תשתמש באסטרטגיה שהגדרתם במסלול הנוסף הזה כדי לתת תשובה, במקום באסטרטגיית 'מטמון קודם' שבה משתמשת workbox-precaching.

הסבר על רשימת האחסון המהיר

workbox-precaching מצפה למערך של אובייקטים עם המאפיינים url ו-revision. המערך הזה נקרא לפעמים מניפסט של שמירת פריטים במטמון מראש:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

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

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

האובייקט הראשון (/index.html) מגדיר באופן מפורש מאפיין גרסה, שהוא גיבוב שנוצר באופן אוטומטי של תוכן הקובץ. בניגוד למקורות של JavaScript ו-CSS, בדרך כלל אי אפשר לכלול בקובצי HTML מידע על גרסאות שונות בכתובות ה-URL שלהם, אחרת הקישורים לקובצי האלה באינטרנט יתנתקו בכל פעם שתוכן הדף ישתנה.

העברת מאפיין גרסה אל precacheAndRoute() מאפשרת ל-Workbox לדעת מתי הקובץ השתנה ולעדכן אותו בהתאם.

Workbox כולל כלים שיעזרו לכם ליצור את הרשימה הזו:

  • workbox-build: זהו חבילת node שאפשר להשתמש בה במשימה של gulp או בתור סקריפט של npm run.
  • workbox-webpack-plugin: משתמשי webpack יכולים להשתמש בפלאגין הזה.
  • workbox-cli: אפשר גם להשתמש ב-CLI שלנו כדי ליצור את רשימת הנכסים ולהוסיף אותם ל-service worker.

בקשות נכנסות לקובצי מטמון

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

לדוגמה, בדרך כלל אפשר למלא בקשה ל-/ באמצעות הקובץ שנמצא ב-/index.html.

בהמשך מופיעה רשימת הפעולות שמתבצעות על ידי workbox-precaching כברירת מחדל, ודרכים לשינוי ההתנהגות הזו.

התעלמות מפרמטרים של כתובות URL

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

כברירת מחדל, פרמטרים של חיפוש שמתחילים ב-utm_ או תואמים במדויק ל-fbclid יוסרו. כלומר, בקשה עבור /about.html?utm_campaign=abcd תתמלא באמצעות רשומה שנשמרה מראש במטמון עבור /about.html.

אפשר להתעלם מקבוצה אחרת של פרמטרים לחיפוש באמצעות ignoreURLParametersMatching:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Directory Index

כברירת מחדל, בקשות שמסתיימים ב-/ יתואמו לרשומים עם index.html שמצורף בסוף. המשמעות היא שאפשר לטפל באופן אוטומטי בבקשה נכנסת עבור / באמצעות הערך /index.html שנשמר במטמון מראש.

אפשר לשנות את הערך הזה למשהו אחר או להשבית אותו לגמרי על ידי הגדרת directoryIndex:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

כתובות URL נקיות

אם בקשה לא תואמת לאחסון המאוחסן מראש, נוסיף את הערך .html בסוף כדי לתמוך בכתובות URL "נקיות" (נקראות גם כתובות URL "יפות"). המשמעות היא שבקשה כמו /about תטופל על ידי הרשומה שנשמרה מראש ב-cache עבור /about.html.

כדי להשבית את ההתנהגות הזו, מגדירים את cleanUrls:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

מניפולציות בהתאמה אישית

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

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

שימוש מתקדם

שימוש ישיר ב-PrecacheController

כברירת מחדל, workbox-precaching תגדיר בשבילכם את המאזינים install ו-activate. מפתחים שמכירים קובצי שירות (service workers) עשויים לא לרצות להשתמש באפשרות הזו אם הם צריכים יותר שליטה.

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

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

קריאה ישירה של נכסים שנשמרו במטמון

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

באופן כללי, אפשר להשתמש ב-Cache Storage API כדי לקבל את אובייקטי ה-Response שנשמרו מראש במטמון, אבל יש בעיה אחת: מפתח המטמון של כתובת ה-URL שצריך להשתמש בו בקריאה ל-cache.match() עשוי להכיל פרמטר של ניהול גרסאות שנוצר ומתוחזק באופן אוטומטי על ידי workbox-precaching.

כדי לקבל את מפתח המטמון הנכון, אפשר להפעיל את getCacheKeyForURL(), להעביר את כתובת ה-URL המקורית ואז להשתמש בתוצאה כדי לבצע cache.match() במטמון המתאים.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

לחלופין, אם כל מה שדרוש לכם הוא אובייקט Response שנשמר מראש במטמון, תוכלו להפעיל את matchPrecache(), שתשתמש באופן אוטומטי במפתח המטמון הנכון ותחפש במטמון הנכון:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

ניקוי של נתונים שנשמרו מראש (cache)

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

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

שימוש ב-Subresource Integrity

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

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

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

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

סוגים

CleanupResult

מאפיינים

  • deletedCacheRequests

    string[]

InstallResult

מאפיינים

  • notUpdatedURLs

    string[]

  • updatedURLs

    string[]

PrecacheController

ביצוע אחסון מראש יעיל של נכסים.

מאפיינים

  • constructor

    void

    יוצרים אובייקט PrecacheController חדש.

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

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

    • אפשרויות

      PrecacheControllerOptions אופציונלי

  • אסטרטגיה

    אסטרטגיה

  • הפעלה

    void

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

    הערה: השיטה הזו קוראת ל-event.waitUntil() בשבילכם, כך שאין צורך לבצע את הקריאה בעצמכם במטפלי האירועים.

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

    (event: ExtendableEvent) => {...}

    • אירוע

      ExtendableEvent

  • addToCacheList

    void

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

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

    (entries: (string | PrecacheEntry)[]) => {...}

    • רשומות

      (string | PrecacheEntry)[]

      מערך של רשומות לאחסון במטמון מראש.

  • createHandlerBoundToURL

    void

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

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

    (url: string) => {...}

    • כתובת אתר

      מחרוזת

      כתובת ה-URL שנשמרה במטמון ותשמשת לחיפוש הערך של Response.

  • getCacheKeyForURL

    void

    הפונקציה מחזירה את מפתח המטמון שמשמש לאחסון כתובת URL נתונה. אם כתובת ה-URL הזו לא מסומנת בגרסה, כמו ‎/index.html, מפתח המטמון יהיה כתובת ה-URL המקורית עם פרמטר חיפוש שמצורף אליה.

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

    (url: string) => {...}

    • כתובת אתר

      מחרוזת

      כתובת URL של מפתח מטמון שרוצים לחפש.

    • החזרות

      מחרוזת

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

  • getCachedURLs

    void

    הפונקציה מחזירה רשימה של כל כתובות ה-URL ששמורות במטמון מראש על ידי ה-service worker הנוכחי.

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

    () => {...}

    • החזרות

      string[]

      כתובות ה-URL שנשמרו במטמון מראש.

  • getIntegrityForCacheKey

    void

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

    (cacheKey: string) => {...}

    • cacheKey

      מחרוזת

    • החזרות

      מחרוזת

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

  • getURLsToCacheKeys

    void

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

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

    () => {...}

    • החזרות

      Map<stringstring>

      כתובת URL של מיפוי מפתחות ששמור במטמון.

  • התקנה

    void

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

    הערה: השיטה הזו קוראת ל-event.waitUntil() בשבילכם, כך שאין צורך לבצע את הקריאה בעצמכם במטפלי האירועים.

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

    (event: ExtendableEvent) => {...}

    • אירוע

      ExtendableEvent

  • matchPrecache

    void

    האפשרות הזו משמשת כתחליף ל-cache.match(), עם ההבדלים הבאים:

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

    למשל: matchPrecache('index.html') ימצא את התגובה הנכונה שהועברה מראש למטמון של קובץ השירות (service worker) הפעיל כרגע, גם אם מפתח המטמון בפועל הוא '/index.html?__WB_REVISION__=1234abcd'.

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

    (request: string | Request) => {...}

    • בקשה

      string | Request

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

    • החזרות

      Promise<Response>

  • אחסון במטמון מראש

    void

    הוספת פריטים לרשימת המטמון מראש, הסרת כפילויות ואחסון הקבצים במטמון" כשה-service worker מתקין.

    אפשר להפעיל את השיטה הזו כמה פעמים.

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

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

מאפיינים

  • תקינות

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

  • גרסה

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

  • כתובת אתר

    מחרוזת

PrecacheFallbackPlugin

PrecacheFallbackPlugin מאפשר לכם לציין תשובה 'חלופית אופליין' שתהיה בשימוש כשאסטרטגיה מסוימת לא תוכל ליצור תשובה.

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

אם לא מעבירים למבנה ה-constructor מופע של PrecacheController באופן מפורש, המערכת תשתמש במופע ברירת המחדל. באופן כללי, רוב המפתחים יגיעו בסופו של דבר לשימוש בברירת המחדל.

מאפיינים

  • constructor

    void

    יצירת PrecacheFallbackPlugin חדש עם ה-fallbackURL המשויך.

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

    (config: object) => {...}

    • config

      אובייקט

      • fallbackURL

        מחרוזת

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

      • precacheController

        PrecacheController אופציונלי

PrecacheRoute

Subclass של workbox-routing.Route שמקבל מכונה של workbox-precaching.PrecacheController ומשתמש בה כדי להתאים בקשות נכנסות ולטפל באחזור תשובות מהאחסון המוקדם.

מאפיינים

PrecacheRouteOptions

מאפיינים

  • cleanURLs

    boolean אופציונלי

  • directoryIndex

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

  • ignoreURLParametersMatching

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

  • urlManipulation

    urlManipulation אופציונלי

PrecacheStrategy

הטמעה של workbox-strategies.Strategy שתוכננה במיוחד לעבודה עם workbox-precaching.PrecacheController כדי לשמור במטמון ולאחזר נכסים שנשמרו במטמון מראש.

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

מאפיינים

  • constructor

    void

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

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

    • אפשרויות

      PrecacheStrategyOptions אופציונלי

  • cacheName

    מחרוזת

  • fetchOptions

    RequestInit אופציונלי

  • matchOptions

    CacheQueryOptions אופציונלי

  • פלאגינים

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • ‎_awaitComplete

    void

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

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • בקשה

      בקשה

    • אירוע

      ExtendableEvent

    • החזרות

      Promise<void>

  • _getResponse

    void

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

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

    • החזרות

      Promise<Response>

  • ‎_handleFetch

    void

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

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

    • החזרות

      Promise<Response>

  • ‎_handleInstall

    void

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

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

    • החזרות

      Promise<Response>

  • נקודת אחיזה

    void

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

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

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

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

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

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

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

    • החזרות

      Promise<Response>

  • handleAll

    void

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

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

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

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

    • אפשרויות

      FetchEvent | HandlerCallbackOptions

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

    • החזרות

      [Promise<Response>, Promise<void>]

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

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

סוג

פונקציה

פרמטרים

  • { url }

    אובייקט

    • כתובת אתר

      כתובת URL

החזרות

  • URL[]

Methods

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

הוספת יישומי פלאגין לשיטת האחסון המוקדם.

פרמטרים

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

מוסיפים לקובץ השירות (service worker) מאזין fetch שיגיב ל[בקשות רשת]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests עם נכסים שהועברו מראש למטמון.

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

פרמטרים

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

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

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

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

אם אתם יוצרים PrecacheController משלכם, צריך להפעיל את PrecacheController#createHandlerBoundToURL במכונה הזו במקום להשתמש בפונקציה הזו.

פרמטרים

  • כתובת אתר

    מחרוזת

    כתובת ה-URL שנשמרה במטמון ותשממש לחיפוש הערך של Response.

החזרות

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

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

אם מציינים כתובת URL יחסית, המערכת תשתמש במיקום של קובץ ה-service worker בתור הבסיס.

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

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

פרמטרים

  • כתובת אתר

    מחרוזת

    כתובת ה-URL של מפתח המטמון שרוצים לחפש.

החזרות

  • string | undefined

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

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

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

אם אתם יוצרים PrecacheController משלכם, צריך להפעיל את PrecacheController#matchPrecache במכונה הזו במקום להשתמש בפונקציה הזו.

פרמטרים

  • בקשה

    string | Request

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

החזרות

  • Promise<Response | undefined>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

הוספת פריטים לרשימת המטמון מראש, הסרת כפילויות ואחסון הקבצים במטמון" כשה-service worker מתקין.

אפשר להפעיל את השיטה הזו כמה פעמים.

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

אם יש לכם מערך אחד של קבצים שרוצים לאחסן במטמון מראש, תוכלו פשוט להפעיל את workbox-precaching.precacheAndRoute.

פרמטרים

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

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

זוהי שיטה נוחה שמפעילה את workbox-precaching.precache ואת workbox-precaching.addRoute בקריאה אחת.

פרמטרים