פיתוח תיבת עבודה

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

רוב המפתחים ישתמשו בשני המצבים generateSW ו-injectManifest. התשובות לשאלות הבאות יכולות לעזור לכם לבחור את המצב וההגדרה המתאימים.

איזה מצב כדאי להשתמש בו

generateSW

המצב generateSW יוצר בשבילכם קובץ של שירות עובד, מותאם אישית באמצעות אפשרויות תצורה, וכותב אותו בדיסק.

מתי להשתמש ב-generateSW

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

מתי לא כדאי להשתמש ב-generateSW

  • אתם רוצים להשתמש בתכונות אחרות של Service Worker (למשל Web Push).
  • אתם רוצים לייבא סקריפטים נוספים או להוסיף לוגיקה נוספת לאסטרטגיות שמירת מטמון בהתאמה אישית.

injectManifest

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

מתי להשתמש ב-injectManifest

  • אתם רוצים יותר שליטה על ה-service worker.
  • אתם רוצים לשמור קבצים במטמון מראש.
  • צריך להתאים אישית את הניתוב ואת האסטרטגיות.
  • אתם רוצים להשתמש ב-service worker עם תכונות אחרות בפלטפורמה (למשל Web Push).

מתי לא כדאי להשתמש ב-injectManifest

  • אתם רוצים להוסיף שירות ל-worker לאתר שלכם בדרך הקלה ביותר.

מצב generateSW

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

// Inside of build.js:
const {generateSW} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while generating a service worker:',
      warnings.join('\n')
    );
  }

  console.log(`Generated a service worker, which will precache ${count} files, totaling ${size} bytes.`);
});

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

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

מצב injectManifest

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

// Inside of build.js:
const {injectManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while injecting the manifest:',
      warnings.join('\n')
    );
  }

  console.log(`Injected a manifest which will precache ${count} files, totaling ${size} bytes.`);
});

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

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

מצבים נוספים

אנחנו צופים ש-generateSW או injectManifest יענו על רוב הצרכים של המפתחים. עם זאת, יש עוד מצב אחד שנתמך ב-workbox-build שעשוי להתאים לתרחישי שימוש מסוימים.

מצב getManifest

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

אפשר להשתמש במצב injectManifest בסקריפט build שמבוסס על Node, באמצעות אפשרויות ההגדרה הנפוצות ביותר, באופן הבא:

// Inside of build.js:
const {getManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
}).then(({manifestEntries, count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while getting the manifest:',
      warnings.join('\n')
    );
  }

  // Do something with the manifestEntries, and potentially log count and size.
});

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

סוגים

BasePartial

מאפיינים

  • additionalManifestEntries

    (string | ManifestEntry)[] אופציונלי

    רשימה של רשומות שיאוחסנו במטמון מראש, בנוסף לכל רשומה שנוצרת כחלק מהגדרת ה-build.

  • dontCacheBustURLsMatching

    ביטוי רגולרי (RegExp) אופציונלי

    נכסים שתואמים לתנאי הזה ייחשבו כנכסים עם גרסה ייחודית באמצעות כתובת ה-URL שלהם, והם פטורים מהפעלת ה-HTTP רגילה לביטול מטמון שמתבצעת בזמן האכלוס של המטמון המוקדם. לא חובה, אבל אם תהליך ה-build הקיים כבר מוסיף ערך [hash] לכל שם קובץ, מומלץ לספק ביטוי רגולרי (regex) שיזהה את זה, כי הוא יפחית את רוחב הפס שנצרך במהלך האחסון המוקדם.

  • manifestTransforms

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

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

  • maximumFileSizeToCacheInBytes

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

    ערך ברירת המחדל הוא: 2097152

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

  • modifyURLPrefix

    אובייקט אופציונלי

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

    דוגמה לשימוש:

    // Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}

BuildResult

סוג

Omit<GetManifestResult"manifestEntries"
> & object

מאפיינים

  • filePaths

    string[]

GeneratePartial

מאפיינים

  • babelPresetEnvTargets

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

    ערך ברירת המחדל הוא: ["chrome >= 56"]

    היעדים שצריך להעביר ל-babel-preset-env במהלך המרת ה-bundle של ה-service worker.

  • cacheId

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

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

  • cleanupOutdatedCaches

    boolean אופציונלי

    ערך ברירת המחדל הוא: false

    האם ל-Workbox יהיה ניסיון לזהות ולמחוק נתונים שנשמרו מראש על ידי גרסאות ישנות יותר שלא תואמות.

  • clientsClaim

    boolean אופציונלי

    ערך ברירת המחדל הוא: false

    אם להתחיל לשלוט בלקוחות קיימים ברגע שה-service worker מופעל.

  • directoryIndex

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

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

  • disableDevLogs

    boolean אופציונלי

    ערך ברירת המחדל הוא: false

  • ignoreURLParametersMatching

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

    שמות של פרמטרים לחיפוש שתואמים לאחד מהביטויים הרגולריים (RegExp) במערך הזה יוסרו לפני חיפוש התאמה של נתונים שנשמרו במטמון מראש. האפשרות הזו שימושית אם המשתמשים שלכם עשויים לבקש כתובות URL שמכילות, למשל, פרמטרים של כתובות URL שמשמשים למעקב אחר מקור התנועה. אם לא מציינים ערך, ערך ברירת המחדל הוא [/^utm_/, /^fbclid$/].

  • importScripts

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

    רשימה של קובצי JavaScript שצריך להעביר אל importScripts() בתוך קובץ ה-service worker שנוצר. האפשרות הזו שימושית אם רוצים לאפשר ל-Workbox ליצור את קובץ ה-service worker ברמה העליונה, אבל רוצים לכלול קוד נוסף, כמו מאזין לאירועי דחיפה.

  • inlineWorkboxRuntime

    boolean אופציונלי

    ערך ברירת המחדל הוא: false

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

  • מצב

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

    ערך ברירת המחדל הוא: "production"

    אם ההגדרה היא 'production', המערכת תיצור חבילה אופטימיזציה של שירות העבודה, שלא כוללת את פרטי ניפוי הבאגים. אם לא תגדירו את הערך כאן, המערכת תשתמש בערך process.env.NODE_ENV. אם לא, היא תשתמש בערך 'production'.

  • navigateFallback

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

    ערך ברירת המחדל הוא: null

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

  • navigateFallbackAllowlist

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

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

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

  • navigateFallbackDenylist

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

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

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

  • navigationPreload

    boolean אופציונלי

    ערך ברירת המחדל הוא: false

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

  • offlineGoogleAnalytics

    boolean | GoogleAnalyticsInitializeOptions אופציונלי

    ערך ברירת המחדל הוא: false

    ההגדרה קובעת אם לכלול תמיכה ב-Google Analytics אופליין. כשהערך הוא true, הקריאה ל-initialize() של workbox-google-analytics תווסף ל-service worker שנוצר. כשמגדירים אותו כ-Object, האובייקט הזה מועבר לקריאה ל-initialize(), ומאפשר להתאים אישית את ההתנהגות.

  • runtimeCaching

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

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

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

  • skipWaiting

    boolean אופציונלי

    ערך ברירת המחדל הוא: false

    האם להוסיף קריאה ללא תנאי ל-skipWaiting() ל-service worker שנוצר. אם הערך הוא false, במקום זאת יתווסף מאזין message, שיאפשר לדפי לקוח להפעיל את skipWaiting() על ידי קריאה ל-postMessage({type: 'SKIP_WAITING'}) ב-service worker שממתין.

  • sourcemap

    boolean אופציונלי

    ערך ברירת המחדל הוא: true

    האם ליצור מפת מקור לקובצי ה-service worker שנוצרו.

GenerateSWOptions

סוג

BasePartial & GlobPartial & GeneratePartial & RequiredSWDestPartial & OptionalGlobDirectoryPartial

GetManifestOptions

סוג

BasePartial & GlobPartial & RequiredGlobDirectoryPartial

GetManifestResult

מאפיינים

  • count

    number

  • manifestEntries

    ManifestEntry[]

  • size

    number

  • אזהרות

    string[]

GlobPartial

מאפיינים

  • globFollow

    boolean אופציונלי

    ערך ברירת המחדל הוא: true

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

  • globIgnores

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

    ערך ברירת המחדל הוא: ["**\/node_modules\/**\/*"]

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

  • globPatterns

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

    ערך ברירת המחדל הוא: ["**\/*.{js,wasm,css,html}"]

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

  • globStrict

    boolean אופציונלי

    ערך ברירת המחדל הוא: true

    אם הערך הוא True, שגיאה בקריאת ספרייה במהלך יצירת מניפסט של שמירת מטמון מראש תגרום לכישלון ה-build. אם הערך הוא false, הספרייה הבעייתית תידלג. מידע נוסף זמין בהגדרה של strict במסמכי העזרה של glob.

  • templatedURLs

    אובייקט אופציונלי

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

InjectManifestOptions

סוג

BasePartial & GlobPartial & InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

מאפיינים

  • injectionPoint

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

    ערך ברירת המחדל הוא: "self.__WB_MANIFEST"

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

  • swSrc

    מחרוזת

    הנתיב ושם הקובץ של קובץ ה-service worker שייקרא במהלך תהליך ה-build, ביחס לספריית העבודה הנוכחית.

ManifestEntry

מאפיינים

  • תקינות

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

  • גרסה

    מחרוזת

  • כתובת אתר

    מחרוזת

ManifestTransform()

workbox-build.ManifestTransform(
  manifestEntries: (ManifestEntry & object)[],
  compilation?: unknown,
)

סוג

פונקציה

פרמטרים

  • manifestEntries

    (ManifestEntry & object)[]

    • size

      number

  • אוסף

    לא ידוע אופציונלי

החזרות

ManifestTransformResult

מאפיינים

  • מניפסט

    (ManifestEntry & object)[]

    • size

      number

  • אזהרות

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

OptionalGlobDirectoryPartial

מאפיינים

  • globDirectory

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

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

RequiredGlobDirectoryPartial

מאפיינים

  • globDirectory

    מחרוזת

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

RequiredSWDestPartial

מאפיינים

  • swDest

    מחרוזת

    הנתיב ושם הקובץ של קובץ ה-service worker שייווצר על ידי תהליך ה-build, ביחס לספריית העבודה הנוכחית. הסיומת שלו צריכה להיות '‎.js'.

RuntimeCaching

מאפיינים

  • האפשרות הזו קובעת איך המסלול בסביבת זמן הריצה ייצור תגובה. כדי להשתמש באחד מ-workbox-strategies המובנים, מציינים את השם שלו, למשל 'NetworkFirst'. לחלופין, אפשר להשתמש בפונקציית קריאה חוזרת (callback) של workbox-core.RouteHandler עם לוגיקה של תגובה בהתאמה אישית.

  • method

    HTTPMethod אופציונלי

    ערך ברירת המחדל הוא: "GET"

    שיטת ה-HTTP שרוצים להתאים אליה. בדרך כלל ערך ברירת המחדל של 'GET' מספיק, אלא אם אתם צריכים להתאים באופן מפורש ל-'POST', ל-'PUT' או לבקשת סוג אחר.

  • אפשרויות

    אובייקט אופציונלי

  • urlPattern

    מחרוזת | RegExp | RouteMatchCallback

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

    הערך הזה ממופה ישירות לפרמטר הראשון שמוענק ל-workbox-routing.registerRoute. מומלץ להשתמש בפונקציה workbox-core.RouteMatchCallback כדי לקבל את הגמישות הרבה ביותר.

StrategyName

Enum

"CacheFirst"

"CacheOnly"

"NetworkFirst"

"NetworkOnly"

"StaleWhileRevalidate"

WebpackGenerateSWOptions

סוג

BasePartial & WebpackPartial & GeneratePartial & WebpackGenerateSWPartial

WebpackGenerateSWPartial

מאפיינים

  • importScriptsViaChunks

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

    שם אחד או יותר של קטעי קוד ב-Webpack. התוכן של הקטעים האלה ייכלל ב-service worker שנוצר, באמצעות קריאה ל-importScripts().

  • swDest

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

    ערך ברירת המחדל הוא: "service-worker.js"

    שם הנכס של קובץ ה-service worker שנוצר על ידי הפלאגין הזה.

WebpackInjectManifestOptions

סוג

BasePartial & WebpackPartial & InjectPartial & WebpackInjectManifestPartial

WebpackInjectManifestPartial

מאפיינים

  • compileSrc

    boolean אופציונלי

    ערך ברירת המחדל הוא: true

    כשהערך הוא true (ברירת המחדל), קובץ swSrc יעבור הידור על ידי webpack. כשהערך של false הוא 0, לא תתבצע הידור (ואי אפשר להשתמש ב-webpackCompilationPlugins). מגדירים את הערך false אם רוצים להחדיר את המניפסט, למשל, לקובץ JSON.

  • swDest

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

    שם הנכס של קובץ ה-service worker שייווצר על ידי הפלאגין הזה. אם השם הזה לא יצוין, השם יהיה מבוסס על השם של swSrc.

  • webpackCompilationPlugins

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

    פלאגינים אופציונליים של webpack שישמשו בזמן הידור קובץ הקלט swSrc. הערך תקף רק אם compileSrc הוא true.

WebpackPartial

מאפיינים

  • קטעים

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

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

  • אל תכלול

    (string | RegExp | function)[] אופציונלי

    ספציפי אחד או יותר שמשמשים להחרגת נכסים מהמניפסט של האחסון המוקדם. הפרשנות מתבצעת לפי אותם כללים כמו האפשרות הרגילה exclude של webpack. אם לא מציינים ערך, ערך ברירת המחדל הוא [/\.map$/, /^manifest.*\.js$].

  • excludeChunks

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

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

  • כוללים

    (string | RegExp | function)[] אופציונלי

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

  • מצב

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

    אם ההגדרה היא 'production', המערכת תיצור חבילה אופטימיזציה של שירות העבודה, שלא כוללת את פרטי ניפוי הבאגים. אם לא תגדירו אותו כאן באופן מפורש, המערכת תשתמש בערך mode שהוגדר ב-webpack הנוכחי.

Methods

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
)

הפקודה הזו מעתיקה קבוצה של ספריות בסביבת זמן ריצה שבהן Workbox משתמש לספרייה מקומית, שצריך לפרוס לצד קובץ ה-service worker.

במקום לפרוס את העותקים המקומיים האלה, אפשר להשתמש ב-Workbox מכתובת ה-URL הרשמית שלו ב-CDN.

השיטה הזו מוצגת למפתחים שמשתמשים ב-workbox-build.injectManifest ומעדיפים לא להשתמש בעותק ה-CDN של Workbox. מפתחים שמשתמשים ב-workbox-build.generateSW לא צריכים להפעיל את השיטה הזו באופן מפורש.

פרמטרים

  • destDirectory

    מחרוזת

    הנתיב לתיקיית ההורה שבה תיווצר התיקייה החדשה של הספריות.

החזרות

  • Promise<string>

    השם של הספרייה החדשה שנוצרה.

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
)

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

הוא גם מקבל אפשרויות נוספות שמגדירות את ההתנהגות של ה-service worker, כמו כללי runtimeCaching שבהם הוא צריך להשתמש.

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

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
});

פרמטרים

החזרות

getManifest()

workbox-build.getManifest(
  config: GetManifestOptions,
)

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

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, manifestEntries, size, warnings} = await getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
});

פרמטרים

החזרות

getModuleURL()

workbox-build.getModuleURL(
  moduleName: string,
  buildType: BuildType,
)

פרמטרים

  • moduleName

    מחרוזת

  • buildType

    BuildType

החזרות

  • מחרוזת

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
)

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

המניפסט מוזרק לקובץ swSrc, ומחרוזת placeholder‏ injectionPoint קובעת לאן המניפסט צריך לעבור בקובץ.

קובץ ה-service worker הסופי, עם המניפסט שהוזן, נכתב בדיסק בכתובת swDest.

השיטה הזו לא תדרוש הידור או קיבוץ של קובץ swSrc, אלא רק תטפל בהחדרת המניפסט.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
});

פרמטרים

החזרות