Workbox

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

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

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

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

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

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

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

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

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

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

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

• Workbox CLI: כלי שורת פקודה שיוצר קובץ שירות (service worker) מלא, מחדיר מניפסט של קובץ שמור מראש או מעתיק קובצי Workbox נחוצים.
• Workbox Build: מודול npm שיוצר קובץ שירות (service worker) מלא, מחדיר מניפסט של קובץ שמור מראש ומעתיק את קובצי Workbox. את זה צריך לשלב בתהליך ה-build שלכם.
• workbox-sw: דרך לטעינת חבילות של Workbox Serviceer מ-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() ומעבירה אובייקט Request אל הקריאה החוזרת (callback). אם הערך של request.mode הוא "navigate", המערכת משתמשת באסטרטגיה CacheFirst (שנקראת כאן pageStrategy) שהוגדרה בדוגמת הקוד הקודמת.

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

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

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

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

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

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

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

Google Play with Workbox

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

משאבים

• תחילת העבודה עם Workbox
• מודולים של תיבת עבודה
• הדרכים של Workbox