workbox-cli

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

התקנת ה-CLI

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

npm install workbox-cli --global

מצבי CLI

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

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

wizard

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

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

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

npx workbox-cli wizard

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

generateSW

ניתן לך להשתמש ב-Workbox CLI על מנת ליצור קובץ שירות (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. שאר הקוד ב-service worker של המקור יישאר ללא שינוי.

אפשר להשתמש ב-Workbox במצב הזה כך:

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

מתי להשתמש בinjectManifest

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

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

  • אתם מעוניינים בדרך הקלה ביותר להוספת קובץ שירות (service worker) לאתר שלכם.

copyLibraries

המצב הזה שימושי אם רוצים להשתמש ב-injectManifest ולהשתמש בקבצים של ספריית Workbox שמתארחים במקור שלכם, במקום להשתמש ב-CDN.

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

npx workbox-cli copyLibraries third_party/workbox/

הטמעת תהליך הפיתוח

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

הפרויקט של Workbox מכיל כמה ספריות שפועלות יחד כדי להפעיל את 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 כדי לשמור מראש את הנכסים שלכם. ניסיון לזכור להפעיל את ה-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

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