תיבת עבודה: ערכת הכלים של Service Worker ברמה גבוהה

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

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

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

שילוב build

ב-Workbox יש כלי שורת פקודה, מודול Node.js ויישומי פלאגין של webpack שמספקים דרכים חלופיות להשגת שני דברים:

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

למה כדאי להשתמש ב-Workbox?

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

ניהול מטמון

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

רישום ביומן נרחב ודיווח על שגיאות

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

רישום ביומן של Workbox במסוף כלי הפיתוח

בעזרת ההודעות ביומן תוכלו להגיע לשורש הבעיה בתצורה או בביטול התוקף מהר יותר מאשר אם תעשו זאת לבד.

קוד בסיס נבדק לכל הדפדפנים

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

איך משתמשים ב-Workbox?

שילוב מסגרת

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

הוספת Workbox לתהליך ה-build הקיים

אם כבר יש לכם תהליך build לאתר, יכול להיות שכל מה שצריך כדי להתחיל להשתמש ב-Workbox הוא להוסיף את שורת הפקודה, את המודול של Node.js או את הפלאגין של webpack המתאימים.

במיוחד, ממשק שורת הפקודה של Workbox מאפשר להתחיל לעבוד בקלות, עם מצב wizard שבודק את סביבת הפיתוח המקומית ומציע הגדרת ברירת מחדל סבירה שאפשר להשתמש בה בהמשך:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

כדי ליצור את ה-service worker, מריצים את workbox generateSW workbox-config.js כחלק מתהליך build. פרטים נוספים זמינים במסמכי התיעוד של generateSW. אפשר לבצע שינויים ב-workbox-config.js כדי להתאים אישית את ה-service worker. פרטים נוספים זמינים במסמכי העזרה של האפשרויות.

שימוש ב-Workbox בסביבת זמן הריצה ב-service worker קיים

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

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);