הגדרה מראש של המטמון היא אחת הפעולות הנפוצות ביותר ב-Service Worker, ו-Workbox מציעה גמישות רבה באופן שבו ניתן לבצע את המשימה החשובה הזו, ללא קשר לאחד מכלי הבנייה של Workbox שתבחרו. במדריך הזה נסביר איך לשמור נכסים במטמון מראש באמצעות generateSW
ו-injectManifest
, ונפרט איזו שיטה הכי מתאימה לפרויקט שלכם.
מתבצעת טעינה מראש באמצעות generateSW
generateSW
הוא הדרך הקלה ביותר לשמור מראש נכסים במטמון ב-Workbox. מה שחשוב לזכור לגבי generateSW
הוא שלא כותבים את קובץ השירות (service worker) שלך, אלא מבקשים מ-Workbox ליצור עבורך קובץ שירות (service worker). עם זאת, אפשר להשפיע על ההתנהגות של האפליקציה באמצעות מגוון אפשרויות הגדרה.
כברירת מחדל, generateSW
מבצע פעולות שונות, בהתאם לכלי ה-build שבו אתם משתמשים. בעת השימוש ב-workbox-webpack-plugin
, אין צורך לציין אפשרויות הגדרה כלשהן. כברירת מחדל, הפלאגין ישמור מראש את כל מה שחבילת האינטרנט כוללת בתרשים התלות שלו ויכתוב קובץ שירות (service worker) בשם service-worker.js
לספרייה שצוינה ב-output.path
מצד שני, אם משתמשים ב-workbox-build
או ב-workbox-cli
, רק נכסי HTML, CSS ו-JavaScript שנקראים ממערכת הקבצים המקומית יישמרו מראש במטמון כברירת מחדל. מבחינת ההגדרה, צריך לציין את swDest
ואת האפשרות globDirectory
בהגדרות של generateSW
כדי שהשמירה מראש תפעל. סביר להניח שתרצו להגדיר אפשרויות נוספות שמשפיעות גם על ההתנהגות של קובץ השירות (service worker), אז כדאי לעיין במסמכי התיעוד.
מתבצעת טעינה מראש באמצעות injectManifest
השימוש ב-injectManifest
לא פשוט כמו השימוש ב-generateSW
, אבל אתה מוותר על קלות השימוש כדי ליהנות מגמישות רבה יותר. כאשר generateSW
מטפל בכל היצירה של קובץ השירות (service worker) עבורך, injectManifest
לוקח את קובץ השירות (service worker) שאתה כותב כמקור, ומזין רשימה של כתובות URL לשמירה מראש, ומשאירים את שאר רכיבי ה-Service Worker כפי שהם.
כשמשתמשים ב-injectManifest
, באחריותך לחבר את הלוגיקה של הטעינה מראש למטמון. כש-injectManifest
בודק את קובץ השירות (service worker) לקליטת הנתונים, הוא מחפש משתנה self.__WB_MANIFEST
מיוחד ומחליף אותו במניפסט של המטמון מראש. אם המשתנה הזה לא קיים, injectManifest
תקפיץ הודעת שגיאה.
אפשר לשנות את רשימת הרשומות במניפסט של המטמון מראש בעזרת אפשרויות הגדרה נוספות.
השוואה זה לצד זה
אפשר ללחוץ על כל אחת מהכרטיסיות שלמטה כדי להשוות בין השימוש בשיטה generateSW
ובשיטה injectManifest
:
מכיוון ש-generateSW
יוצר קובץ שירות (service worker), עליך לציין רק מערך הגדרות אישיות. למטה מוצגת דוגמה לשימוש ב-workbox-build
:
// build-sw.js
import {generateSW} from 'workbox-build';
generateSW({
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
לאחר מכן אפשר לבנות את Service Worker בשורת הפקודה באמצעות צומת:
node build-sw.js
מאחר של-injectManifest
נדרש קובץ שירות (service worker) של מקור, דוגמה שימושית מינימלית דורשת קובץ של קובץ שירות (service worker) של מקור. אם כל מה שנדרש הוא טעינה מראש במטמון, ה-Service Worker של הקלט עשוי להיראות כך:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
יש לשים לב למחרוזת self.__WB_MANIFEST
. זהו placeholder שתיבת העבודה מחליפה במניפסט של המטמון מראש. בהמשך מופיעה הגדרה חוקית לתרחיש לדוגמה הזה:
// build-sw.js
import {injectManifest} from 'workbox-build';
injectManifest({
swSrc: './src/sw.js',
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
מומלץ להשתמש ב-injectManifest
אם יש לך דרישות מורכבות כמו ניתוב מתקדם, אסטרטגיות מותאמות אישית לשמירה במטמון או אפשרויות אחרות שלא נכללות באפשרויות של generateSW
.
סיכום
הגדרה מראש במטמון ב-Workbox הרבה יותר פשוטה מאשר אם הייתם צריכים לנהל את השמירה במטמון בעצמכם, במיוחד אם מדובר בנכסים עם גרסאות שנאספו על ידי מנהלי חבילות. עם זאת, שמירה מראש במטמון היא לא הפעולה היחידה שסביר להניח שתעשו ב-Service Worker. ככל שתמשיכו, תלמדו טכניקות אחרות, כמו שמירה במטמון בזמן הריצה.