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

טעינה באמצעות generateSW

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

generateSW מבצע פעולות שונות כברירת מחדל בהתאם לכלי ה-build שבו אתם משתמשים. כשמשתמשים ב-workbox-webpack-plugin, לא צריך לציין אפשרויות הגדרה. כברירת מחדל, הפלאגין יאחסן מראש את כל מה ש-webpack כולל בתרשים התלות שלו ויכתוב Service Worker בשם service-worker.js לספרייה שצוינה ב-output.path

לעומת זאת, אם משתמשים ב-workbox-build או ב-workbox-cli, רק נכסי HTML, CSS ו-JavaScript שנקראים ממערכת הקבצים המקומית יישמרו מראש כברירת מחדל. כדי שהשמירה מראש במטמון תעבוד, צריך לציין את swDest ואת האפשרות globDirectory בהגדרות של generateSW. סביר להניח שתרצו להגדיר אפשרויות נוספות שמשפיעות גם על התנהגות קובץ השירות שלכם, לכן עיינו בתיעוד.

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

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

כשמשתמשים ב-injectManifest, אתם אחראים על חיווט הלוגיקה של השמירה במטמון. כש-injectManifest בוחן את ה-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:

node build-sw.js

ב-injectManifest נדרש קובץ שירות של מקור, ולכן כדי להשתמש בדוגמה סבירה נדרש קובץ worker של שירות מקור. אם כל מה שנדרש הוא שמירה מראש, ה-service worker הזה עשוי להיראות בערך כך:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

חשוב לזכור את המחרוזת self.__WB_MANIFEST. זהו placeholder ש-Workbox מחליף במניפסט של המטמון מראש. בהמשך מוצגת הגדרה חוקית לתרחיש לדוגמה הזה:

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