שני ממשקי API ממלאים תפקיד חיוני בבניית אפליקציות אינטרנט אמינות: Service Worker ו-Cache Storage. אבל השימוש בהם ביעילות – בלי להכניס באגים קלים או להיתקל במקרים שוליים – יכול להיות מאתגר. לדוגמה, שגיאות בקוד של קובץ השירות (service worker) עלולות לגרום לבעיות בשמירה במטמון. יכול להיות שיוצג למשתמשים תוכן לא עדכני או קישורים מנותקים.
Workbox היא ערכת כלים של Service Worker ברמה גבוהה, שמבוססת על Service Worker ועל ממשקי ה-API של אחסון במטמון. היא מספקת קבוצת ספריות שמוכנות לייצור, כדי להוסיף תמיכה אופליין לאפליקציות אינטרנט. ערכת הכלים מחולקת לשני אוספים: כלים שעוזרים לנהל את הקוד שפועל בתוך ה-Service Worker, וכלים שמשתלבים עם תהליך ה-build.
קוד זמן ריצה
הקוד שרץ בתוך הסקריפט של Service Worker קובע איך הוא מיירט בקשות יוצאות ומקיים אינטראקציה עם ה-API של אחסון המטמון. לתיבת העבודה יש כ-12 מודולים בסך הכול בספריות, שכל אחד מהם מטפל במגוון תרחישים לדוגמה. המודולים החשובים ביותר קובעים אם קובץ השירות יגיב (שנקרא ניתוב) ואיך הוא יגיב (שנקראת אסטרטגיית השמירה במטמון).
יצירת שילוב
ב-Workbox יש כלים לשורת הפקודה, למודול Node.js ולפלאגין ל-webpack שמספקים דרכים חלופיות לביצוע שני דברים:
- ליצור סקריפט של Service Worker על סמך קבוצה של אפשרויות תצורה. קובץ השירות (service worker) שנוצר משתמש בספריות זמן הריצה של Workbox 'מאחורי הקלעים' כדי ליישם את אסטרטגיות השמירה במטמון שהגדרתם.
- יוצרים רשימה של כתובות URL שאמורות להיות במטמון, על סמך תבניות שאפשר להגדיר כדי לכלול ולהחריג קבצים שנוצרו בתהליך ה-build.
למה כדאי להשתמש ב-Workbox?
השימוש ב-Workbox כשבונים את קובץ השירות (service worker) הוא לא חובה – יש כמה מדריכים שמסבירים אסטרטגיות נפוצות לשמירה במטמון מנקודת מבט של 'וניל' של Service Worker. אם תחליטו להשתמש ב-Workbox, הנה כמה מהיתרונות שלו.
ניהול המטמון
כאשר משתמשים בשמירה מראש במטמון, תיבת העבודה מטפלת בעדכוני המטמון דרך תהליך ה-build שלכם, או באמצעות מדיניות ניתנת להגדרה של גודל/גיל כשמשתמשים במטמון זמן ריצה. ה-API הבסיסי של אחסון המטמון הוא חזק, אבל אין לו תמיכה מובנית בתפוגת המטמון. כלים כמו Workbox ממלאים את הפער הזה.
רישום מקיף ביומן ודיווח שגיאות
בתחילת העבודה עם Service Workers, קשה להבין למה משהו נשמר במטמון (או מתסכל באותה מידה, למה הוא לא נשמר במטמון).
תיבת העבודה מזהה באופן אוטומטי מתי שמריצים גרסת פיתוח של האתר שלכם ב-localhost, ומפעילה רישום של ניפוי באגים במסוף ה-JavaScript של הדפדפן.
אם תעקבו אחרי ההודעות ביומן, תוכלו להגיע לשורש של כל בעיה שקשורה לתצורה או לביטול התוקף מהר יותר מאשר אם אתם מנסים לפתור אותה לבד.
בסיס קוד שנבדק בדפדפנים שונים
סביבת העבודה פותחת בהתאם לחבילת בדיקה בדפדפנים שונים, וכשאפשר, היא חוזרת באופן אוטומטי להטמעות חלופיות של תכונות שחסרות בדפדפנים מסוימים.
- הממשק
workbox-broadcast-cache-update moduleמשתמש ב-Broadcast Channel API, כשהוא זמין, ומתבצע חזרה להטמעה מבוססתpostMessage()בדפדפנים שאין בהם תמיכה. - המודול של workbox-background-sync משתמש ב-Background Sync API אם אפשר, ואם לא, הוא חוזר ולנסות שוב את האירועים שבתור בכל פעם שה-service worker מופעל.
איך כדאי להשתמש ב-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',
})
);