שמירה מראש עם תיבת עבודה

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

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

מתבצעת טעינה מראש באמצעות injectManifest

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

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

הערה: כדי לשנות את המחרוזת שהפונקציה injectManifest מחפשת, היא לחפש משהו אחר מ-self.__WB_MANIFEST, ניתן לעשות זאת על ידי ציון האפשרות injectionPoint בהגדרות האישיות שלה.

אפשר לשנות את רשימת הרשומות במניפסט של המטמון מראש בעזרת אפשרויות הגדרה נוספות.

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

זהירות: בדוגמאות שלמעלה אנחנו מניחים שאתם נמצאים בסביבת צומת שתומכת במודולים של ES בלי שלב build. בגרסאות של צומת לפני גרסה 16, יכול להיות שיהיה צורך להגדיר סימון כדי להפעיל תמיכה במודול ES, או להסתמך על הסמנטיקה של CommonJS באמצעות module.exports.

סיכום

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