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

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

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

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

generateSW

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

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

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

מתי לא מומלץ להשתמש בgenerateSW

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

injectManifest

במצב injectManifest תיווצר רשימה של כתובות URL לשמירה במטמון מראש, והרשימה הזו תתווסף לקובץ קיים של Service Worker. אחרת, הקובץ יישאר כמו שהוא.

מתי כדאי להשתמש ב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.`);
});

הפעולה הזו תיצור מניפסט של קובצי מטמון מראש על סמך הקבצים שנבחרו על ידי ההגדרה, ותוסיף אותו לקובץ הקיים של 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

    (string | ManifestEntry)[] optional

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

  • dontCacheBustURLsMatching

    ביטוי רגולרי אופציונלי

    אם נכס מסוים תואם לדפוס הזה, המערכת תניח שיש לו גרסה ייחודית שמוגדרת באמצעות כתובת ה-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

סוג

Omit<GetManifestResult"manifestEntries"
> & object

מאפיינים

  • filePaths

    string[]

GeneratePartial

מאפיינים

  • babelPresetEnvTargets

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

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

    יעדים להעברה אל babel-preset-env כשמבצעים הידור של חבילת ה-service worker.

  • cacheId

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

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

  • cleanupOutdatedCaches

    boolean אופציונלי

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

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

  • clientsClaim

    boolean אופציונלי

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

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

  • directoryIndex

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

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

  • disableDevLogs

    boolean אופציונלי

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

  • ignoreURLParametersMatching

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

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

  • importScripts

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

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

  • inlineWorkboxRuntime

    boolean אופציונלי

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

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

  • מצב

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

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

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

  • navigateFallback

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

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

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

  • navigateFallbackAllowlist

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

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

    הערה: יכול להיות שהביטויים הרגולריים האלה יוערכו מול כל כתובת URL של יעד במהלך ניווט. מומלץ להימנע משימוש בביטויי Regexp מורכבים, אחרת המשתמשים עלולים לחוות עיכובים בניווט באתר.

  • navigateFallbackDenylist

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

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

    הערה: יכול להיות שהביטויים הרגולריים האלה יוערכו מול כל כתובת URL של יעד במהלך ניווט. מומלץ להימנע משימוש בביטויי Regexp מורכבים, אחרת המשתמשים עלולים לחוות עיכובים בניווט באתר.

  • navigationPreload

    boolean אופציונלי

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

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

  • offlineGoogleAnalytics

    ‫boolean | GoogleAnalyticsInitializeOptions optional

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

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

  • runtimeCaching

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

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

    למידע על כל האפשרויות, אפשר לעיין במסמכי התיעוד בנושא 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

מאפיינים

  • ספירה

    number

  • manifestEntries

    ManifestEntry[]

  • size

    number

  • אזהרות

    string[]

GlobPartial

מאפיינים

  • globFollow

    boolean אופציונלי

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

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

  • globIgnores

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

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

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

  • globPatterns

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

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

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

  • templatedURLs

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

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

InjectManifestOptions

סוג

‫BasePartial ו-GlobPartial ו-InjectPartial ו-RequiredSWDestPartial ו-RequiredGlobDirectoryPartial

InjectPartial

מאפיינים

  • injectionPoint

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

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

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

  • swSrc

    מחרוזת

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

ManifestEntry

מאפיינים

  • תקינות

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

  • גרסה

    מחרוזת

  • כתובת אתר

    מחרוזת

ManifestTransform()

workbox-build.ManifestTransform(
  manifestEntries: (ManifestEntry & object)[],
  compilation?: unknown,
): Promise<ManifestTransformResult> | ManifestTransformResult

סוג

פונקציה

פרמטרים

  • manifestEntries

    (ManifestEntry & object)[]

    • size

      number

  • אוסף

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

החזרות

ManifestTransformResult

מאפיינים

  • מניפסט

    (ManifestEntry & object)[]

    • size

      number

  • אזהרות

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

OptionalGlobDirectoryPartial

מאפיינים

  • globDirectory

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

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

RequiredGlobDirectoryPartial

מאפיינים

  • globDirectory

    מחרוזת

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

RequiredSWDestPartial

מאפיינים

  • swDest

    מחרוזת

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

RuntimeCaching

מאפיינים

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

  • method

    ‫HTTPMethod optional

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

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

  • options

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

  • urlPattern

    מחרוזת | RegExp | RouteMatchCallback

    קריטריון ההתאמה הזה קובע אם המטפל שהוגדר ייצור תגובה לכל הבקשות שלא תואמות לאחת מכתובות האתרים ששמורים במטמון מראש. אם מוגדרים כמה נתיבים של 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, לא מתבצעת קומפילציה (ואי אפשר להשתמש ב-webpackCompilationPlugins). מגדירים את הערך false אם רוצים להוסיף את המניפסט, למשל, לקובץ JSON.

  • swDest

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

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

  • webpackCompilationPlugins

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

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

WebpackPartial

מאפיינים

  • גושים

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

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

  • אל תכלול

    ‫(string | RegExp | function)[] optional

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

  • excludeChunks

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

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

  • כוללים

    ‫(string | RegExp | function)[] optional

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

  • מצב

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

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

Methods

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
): Promise<string>

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

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

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

פרמטרים

  • destDirectory

    מחרוזת

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

החזרות

  • Promise<string>

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

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
): Promise<BuildResult>

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

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

על סמך מניפסט השמירה במטמון מראש וההגדרה הנוספת, הוא כותב קובץ 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,
): Promise<GetManifestResult>

השיטה הזו מחזירה רשימה של כתובות 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,
): string

פרמטרים

  • moduleName

    מחרוזת

  • buildType

    BuildType

החזרות

  • מחרוזת

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
): Promise<BuildResult>

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

קובץ המניפסט מוזרק לקובץ swSrc, והמחרוזת של הפלייסהולדר 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: '...',
});

פרמטרים

החזרות