Workbox

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

חלק מהמשימות שאפשר להיעזר בהן הן התאמה של אסטרטגיות שמירה במטמון לנתיבים (או לדפוסי ניתוב), עבודה עם זרמים ושימוש בתכונות כמו סנכרון ברקע עם חלופות מתאימות.

תיבת העבודה יכולה לעזור לכם לנהל את צורכי השמירה וההצגה של הנכסים במטמון. זוהי גם הספרייה הנפוצה ביותר לעובדי שירות; 54% מהאתרים לנייד משתמשים בו במגוון כלים ליצירה ו-CLI, כולל Angular CLI , Create-React-App ו-Vue CLI. יש גם יישומי פלאגין לרוב הספריות וה-frameworks האחרות, כמו Next.js.

מודולים של תיבת עבודה

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

המודולים של תיבת העבודה פועלים בהקשרים שונים, למשל:

• במסגרת הקשר של קובץ שירות (service worker): מייבאים את המודולים הנדרשים ומשתמשים בהם מקובץ ה-Service worker. לדוגמה, כדי לנהל את השמירה במטמון ולהציג קבצים בעזרת אסטרטגיות שונות.
• בהקשר הראשי של window: עזרה ברישום קובץ שירות (service worker) ויצירת קשר איתו
• כחלק ממערכת build: לדוגמה, webpack למטרות כמו יצירת מניפסט של הנכסים או אפילו יצירת קובץ שירות (service worker) מלא.

הנה כמה מודולים פופולריים:

• workbox-routing: כשה-Service Worker מיירט בקשות, המודול הזה מנתב את הבקשות האלה לפונקציות שונות שמספקות תשובות; זהו הטמעה של הגורם המטפל באירועים של fetch, כפי שצוין בפרק בנושא הצגת מודעות.
• workbox-strategies: קבוצה של אסטרטגיות לשמירה במטמון בזמן ריצה שמטפלות בתגובה לבקשה. למשל, 'מטמון קודם' ו'לא פעיל' בזמן אימות מחדש; מדובר בהטמעה של השיטות השונות שצוינו בפרק בנושא הצגת מודעות.
• העלאה מראש במטמון של תיבת העבודה: מדובר בהטמעה של שמירה במטמון של קבצים ב-handler של אירועי install של ה-service worker (שנקרא גם 'שמירה מראש במטמון'), כפי שצוין בפרק השמירה במטמון. בעזרת המודול הזה אפשר בקלות לשמור במטמון קבוצת קבצים ולנהל ביעילות עדכונים של הנכסים האלה. נסביר על עדכון נכסים בקטע פרק העדכון.
• workbox-expiration: זהו פלאגין שבו משתמשים עם אסטרטגיות שמירה במטמון כדי להסיר בקשות שנשמרו במטמון על סמך מספר הפריטים במטמון או על סמך גיל הבקשה במטמון. הוא עוזר לנהל את המטמון ולהגדיר מגבלות זמן ומספר פריטים בכל מטמון.
• workbox-window: קבוצת מודולים שמיועדים לפעול בהקשר של חלון, כלומר בתוך דפי האינטרנט של PWA. תוכלו לפשט את תהליך הרישום והעדכונים של קובץ השירות, ולאפשר תקשורת קלה יותר בין הקוד שרץ בהקשר של קובץ השירות לבין ההקשר של החלון.

שימוש בתיבת העבודה

תיבת העבודה מספקת דרכים שונות לשילוב באפליקציית PWA. אתם יכולים לבחור את זו שהכי מתאימה לארכיטקטורה של האפליקציה:

• CLI של Workbox: כלי שורת הפקודה שיוצר קובץ שירות (service worker) מלא, מחדיר מניפסט לשמירה מראש או מעתיק את קובצי Workbox הדרושים.
• Workbox Build: מודול NPM שיוצר קובץ שירות (service worker) מלא, מחדיר מניפסט מראש למטמון ומעתיק את קובצי תיבת העבודה. הוא נועד לשילוב בתהליך ה-build שלכם.
• workbox-sw: דרך לטעון חבילות של Workbox מ-CDN שלא משתמשות בתהליך build.

ב-Workbox CLI מופיע אשף שמפרט את יצירת ה-Service Worker. כדי להפעיל את האשף, מקלידים את הפקודה הבאה בשורת הפקודה:

npx workbox-cli wizard

שמירה במטמון והצגה במטמון באמצעות Workbox

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

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

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

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

דוגמת הקוד הבאה משתמשת באסטרטגיית 'מטמון תחילה' (באמצעות המודול CacheFirst) כדי לשמור את הניווטים בדפים במטמון ולהציג אותם.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

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

אחרי שמסיימים ליצור את האסטרטגיה, הגיע הזמן לרשום מסלול ולהשתמש בה. בדוגמה הבאה קוראים לפונקציה registerRoute(), ומעבירים אובייקט בקשה לקריאה חוזרת (callback) שלו. אם הערך של request.mode הוא "navigate", הוא ישתמש בשיטה CacheFirst (שנקראת כאן pageStrategy) שהוגדרה בדוגמה הקודמת של הקוד.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

דוגמאות ושיטות מומלצות נוספות זמינות במסמכי התיעוד של Workbox.

חזרה למצב אופליין

במודול ניתוב תיבת העבודה יש גם setCatchHandler() מיוצא, שמספק טיפול אם מסלול גורם לשגיאה. אפשר להשתמש באפשרות הזו כדי להגדיר חלופה במצב אופליין, כדי להודיע למשתמשים שהמסלול המבוקש שלהם לא זמין כרגע.

כאן, שילוב של Workbox ו-Cache Storage API מספק חלופה למצב אופליין באמצעות אסטרטגיה של מטמון בלבד. ראשית, במהלך מחזור החיים של ההתקנה של קובץ השירות, המטמון offline-fallbacks נפתח ומערך החלופות במצב אופליין מתווסף למטמון.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

לאחר מכן, ב-setCatchHandler(), נקבע היעד של הבקשה שגרמה לשגיאה והמטמון של offline-fallbacks נפתח. אם היעד הוא מסמך, התוכן של החלופה למצב אופליין מוחזר למשתמש. אם המזהה לא קיים או שהיעד אינו מסמך (למשל תמונה או גיליון סגנונות), תוחזר תגובה עם שגיאה. ניתן להרחיב את התבנית הזו לא רק למסמכים, אלא לתמונות, לסרטונים, לגופנים או לכל דבר שרוצים לספק כגיבוי במצב אופליין.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

מתכונים

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

שמירה במטמון ועדכון של נכסים

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

משחק עם Workbox

אפשר לשחק מיד ב-Workbox באמצעות שיעור ה-Lab הבא לכתיבת קוד:

משאבים

• תחילת העבודה עם תיבת עבודה
• מודולים של תיבות עבודה
• הדרך שבה אפשר להשתמש ב-Workbox