‫Workbox: ערכת הכלים ברמה גבוהה ל-service worker

Jeff Posnick

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

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

קוד זמן ריצה

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

יצירת שילוב

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

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

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

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

ניהול המטמון

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

רישום נרחב ביומן ו-Error Reporting

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

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

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

בסיס קוד שנבדק בדפדפנים שונים

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

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

שילוב עם Framework

אם אתם מתחילים פרויקט חדש מאפס, אתם יכולים לנצל את היתרונות של השילוב של 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 כחלק מתהליך היצירה. לקבלת פרטים, אפשר לעיין בgenerateSWמסמכים. כדי להתאים אישית את ה-service worker, אפשר לבצע שינויים בקובץ workbox-config.js. פרטים נוספים זמינים במסמכי התיעוד של האפשרויות.

שימוש ב-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',
  })
);