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

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

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

באיזה מצב להשתמש

generateSW

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

מתי להשתמש בgenerateSW

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

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

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

injectManifest

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

מתי להשתמש בinjectManifest

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

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

  • אתם מעוניינים בדרך הקלה ביותר להוספת קובץ שירות (service 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.`);
});

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

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

מצב 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.`);
});

הפעולה הזו תיצור מניפסט של מטמון (precache) שמבוסס על הקבצים שנאספו בהגדרות שלכם ותכניס אותו לקובץ ה-Service Worker הקיים.

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

מצבים נוספים

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

מצב getManifest

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

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

// 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

    (מחרוזת | ManifestEntry)[] אופציונלי

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

  • dontCacheBustURLsMatching

    RegExp אופציונלי

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

  • manifestTransforms

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

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

  • maximumFileSizeToCacheInBytes

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

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

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

  • modifyURLPrefix

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

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

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

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

BuildResult

סוג

> והאובייקט

תכונות

  • filePaths

    מחרוזת[]

GeneratePartial

תכונות

  • babelPresetEnvTargets

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

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

    היעדים שצריך להעביר ל-babel-preset-env בעת העברת החבילה של קובץ השירות (service worker).

  • cacheId

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

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

  • cleanupOutdatedCaches

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

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

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

  • clientsClaim

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

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

    האם ה-Service Worker צריך להתחיל לשלוט בלקוחות קיימים מיד לאחר ההפעלה.

  • directoryIndex

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

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

  • disableDevLogs

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

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

  • ignoreURLParametersMatching

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

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

  • importScripts

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

    רשימה של קובצי JavaScript שצריך להעביר אל importScripts() בקובץ ה-Service Worker שנוצר. זו אפשרות שימושית כשרוצים לאפשר ל-Workbox ליצור קובץ Service Worker ברמה העליונה, אבל רוצים לכלול קוד נוסף, כמו Push event listener.

  • inlineWorkboxRuntime

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

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

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

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

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

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

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

  • navigateFallback

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

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

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

  • navigateFallbackAllowlist

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

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

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

  • navigateFallbackDenylist

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

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

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

  • navigationPreload

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

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

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

  • offlineGoogleAnalytics

    בוליאני | 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

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

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

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

  • מפת מקור

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

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

    האם ליצור מפת מקור עבור קובצי ה-Service Worker שנוצרו.

GenerateSWOptions

סוג

BasePartial ו-GlobPartial & GeneratePartial & RequiredSWDestPartial ו OptionalGlobDirectoryPartial

GetManifestOptions

סוג

BasePartial ו-GlobPartial & RequiredGlobDirectoryPartial

GetManifestResult

תכונות

  • ספירה

    number

  • manifestEntries

    ManifestEntry[]

  • size

    number

  • אזהרות

    מחרוזת[]

GlobPartial

תכונות

  • globFollow

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

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

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

  • globIgnores

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

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

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

  • globPatterns

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

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

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

  • globStrict

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

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

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

  • templatedURLs

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

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

InjectManifestOptions

סוג

BasePartial ו-GlobPartial ו-InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

תכונות

  • injectionPoint

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

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

    המחרוזת שיש למצוא בתוך הקובץ swSrc. אחרי שיימצא, הוא יוחלף במניפסט של המטמון (precache) שנוצר.

  • swSrc

    string

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

ManifestEntry

תכונות

  • תקינות

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

  • גרסה

    string

  • כתובת אתר

    string

ManifestTransform()

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

סוג

פונקציה

פרמטרים

  • manifestEntries

    (ManifestEntry ואובייקט)[]

    • size

      number

  • לקט

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

החזרות

ManifestTransformResult

תכונות

  • מניפסט

    (ManifestEntry ואובייקט)[]

    • size

      number

  • אזהרות

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

OptionalGlobDirectoryPartial

תכונות

  • globDirectory

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

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

RequiredGlobDirectoryPartial

תכונות

  • globDirectory

    string

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

RequiredSWDestPartial

תכונות

  • swDest

    string

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

RuntimeCaching

תכונות

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

  • method

    HTTPMethod אופציונלי

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

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

  • אפשרויות

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

  • urlPattern

    string | RegExp | RouteMatchCallback

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

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

StrategyName

טיפוסים בני מנייה (enum)

"NetworkFirst"

"NetworkOnly"

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

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

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

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

  • swDest

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

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

  • webpackCompilationPlugins

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

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

WebpackPartial

תכונות

  • מקטעים

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

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

  • לא כולל

    (מחרוזת | RegExp | function)[] אופציונלי

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

  • excludeChunks

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

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

  • כוללים

    (מחרוזת | RegExp | function)[] אופציונלי

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

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

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

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

שיטות

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
)

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

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

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

פרמטרים

  • destDirectory

    string

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

החזרות

  • הבטחה<string>

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

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
)

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

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

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

// 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

    string

  • buildType

    BuildType

החזרות

  • string

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: '...',
});

פרמטרים

החזרות