workbox-cli

ממשק שורת הפקודה של Workbox (שמופיע בקטע workbox-cli) מורכבת מתוכנת Node.js שנקראת 'תיבת עבודה' אפשר להריץ אותן משורת פקודה שתואמת ל-UNIX ב-Windows, ב-macOS הסביבה. מתחת למכסה הקדמי, תיבת העבודה-cli עוטפת את המודול-build של תיבת העבודה, ומספקת דרך קלה לשילוב של Workbox ב-build של שורת הפקודה באמצעות תצורות גמישות.

התקנת ה-CLI

כדי להתקין את ה-CLI עם Node, מריצים את הפקודה הבאה בטרמינל:

npm install workbox-cli --global

מצבי CLI

ל-CLI יש ארבעה מצבים שונים:

  • wizard: מדריך מפורט להגדרת Workbox לפרויקט.
  • generateSW: יצירת קובץ שירות (service worker) מלא.
  • injectManifest: מחדיר את הנכסים כדי לשמור אותם מראש בתוך הפרויקט.
  • copyLibraries: העתקת ספריות תיבת העבודה לספרייה.

wizard

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

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

כדי להתחיל את הפעלת האשף:

npx workbox-cli wizard

צילום מסך של אשף ה-CLI של Workbox

generateSW

אפשר להשתמש ב-CLI של Workbox כדי ליצור קובץ שירות (service worker) מלא באמצעות קובץ תצורה (כמו הקובץ שנוצר על ידי האשף).

פשוט מריצים את הפקודה הבאה:

npx workbox-cli generateSW path/to/config.js

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

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

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

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

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

injectManifest

למפתחים שרוצים יותר שליטה בקובץ Service Worker הסופי אפשר להשתמש במצב injectManifest. המצב הזה מניח שיש לכם קיים של קובץ שירות (service worker) (המיקום שלו מצוין ב-config.js).

כשמריצים את הפקודה workbox injectManifest, המערכת מחפשת מחרוזת ספציפית (precacheAndRoute(self.__WB_MANIFEST) כברירת מחדל) במקור של Service Worker. היא מחליפה את המערך הריק ברשימה של כתובות URL לשמירה במטמון וכתיבה של קובץ ה-service worker מיקום היעד, על סמך אפשרויות ההגדרה ב-config.js. לא נעשו שינויים בשאר הקוד ב-Worker Service מקור.

אפשר להשתמש ב-Workbox במצב הזה באופן הבא:

npx workbox-cli injectManifest path/to/config.js

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

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

מתי לא כדאי להשתמש במאפיין injectManifest

  • אתם רוצים למצוא את הדרך הקלה ביותר להוספת Service Worker לאתר.

copyLibraries

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

צריך רק להריץ אותו עם נתיב לכתיבת הקבצים אל:

npx workbox-cli copyLibraries third_party/workbox/

אינטגרציה של תהליך build

למה צריך לשלב את Workbox בתהליך ה-Build?

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

האם workbox-cli הוא הבחירה הנכונה לתהליך ה-build שלי?

אם יש לכם תהליך build קיים המבוסס אך ורק על סקריפטים של NPM, אז workbox-cli היא בחירה טובה.

אם אתם משתמשים כרגע ב-webpack בתור ה-build ואז באמצעות workbox-webback-plugin הוא בחירה טובה יותר.

אם אתם משתמשים כרגע ב-Gulp, Grunt, או כלי build אחר שמבוסס על Node.js, ואז לשלב את workbox-build בסקריפט ה-build. הוא בחירה טובה יותר.

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

הגדרה והגדרה

לאחר התקנה של workbox-cli כפיתוח או להיות תלוי בפרויקט המקומי שלך, אפשר להוסיף את הקריאה ל-workbox ב סוף סקריפט ה-NPM של תהליך ה-build הקיים:

מ-package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

מחליפים את <mode> ב-generateSW או ב-injectManifest (בהתאם בתרחיש לדוגמה שלכם) ו-<path/to/config.js> בנתיב אל אפשרויות ההגדרה האישיות. יכול להיות שההגדרה שלך נוצרה באופן אוטומטי על ידי workbox wizard או שונו באופן ידני.

תצורה

האפשרויות בשימוש של generateSW

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

האפשרויות בשימוש של injectManifest

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