פתרון בעיות ורישום ביומן

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

כלים זמינים לפתרון בעיות

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

Chrome ו-Edge

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

Firefox

משתמשי Firefox יכולים לעיין במקורות המידע הבאים:

Safari

ב-Safari יש כרגע קבוצה מוגבלת יותר של כלים למפתחים לניפוי באגים בשירות ה-Service Workers. מידע נוסף זמין במקורות המידע הבאים:

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

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

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

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

עם או בלי Bundle

Bundlers הם כלים שלוקחים קוד ממודולים נפרדים ויוצרים פלט JavaScript שמוכן להפעלה בדפדפן. כשמשתמשים ב-bundler, אפשר להשתמש גם בפלאגין Workbox ספציפי ל-bundler שעוזר בהגדרה מראש של המטמון, כמו workbox-webpack-plugin. אפשרות נוספת היא פשוט לאחד לוגיקת שמירה במטמון של Workbox בזמן ריצה. בכל מקרה, הרישום של Workbox מושפע מהגדרת מצב ייצור בהגדרות ה-bundler:

  • בחבילה באינטרנט אפשר להגדיר את אפשרות ההגדרה mode ל-'production' או ל-'development'. workbox-webpack-plugin ישתמש ביומן הייצור או הפיתוח ב-Workbox על סמך הערך הזה.
  • עבור הרשימה הכללית, ב-rollup-plugin-workbox אפשר להשתמש באפשרות ההגדרה של mode, שמשפיעה גם על האפשרות לתעד פרטים במסוף ב-Workbox. אם אתה משתמש ברשימה כללית ללא הפלאגין הספציפי לתיבת העבודה, יהיה עליך להגדיר את @rollup/plugin-replace להחליף את process.env.NODE_ENV ב-'development' או ב-'production'.

נניח שיש לבטל את התנהגות ברירת המחדל של הרישום ביומן בתהליך הפיתוח. במקרה כזה, הפלאגין של Workbox המתאים ל-bundler אמור לאפשר לכם לקודד בתוך הקוד העדפה לניפוי באגים ביומנים בתצורה שלו. לדוגמה, ניתן להשבית את ההתחברות ל-Workbox באמצעות האפשרות mode של workbox-webpack-plugin עבור השיטה GenerateSW.

ללא חבילה

אומנם מקבצים הם דרך נהדרת, אבל לא לכל פרויקט יש צורך בהם. אם אתם נמצאים במצב שבו אתם רוצים להוסיף את Workbox לפרויקט שלא משתמש ב-bundler, תוכלו לעשות זאת בעזרת workbox-sw.

המודול workbox-sw מפשט טעינה של מודולים אחרים של תיבת עבודה (לדוגמה, workbox-routing, workbox-precaching וכו') מ-CDN. טעינת חבילות הפיתוח או סביבת הייצור תלויה בכתובת ה-URL ששימשה לגישה לאפליקציית האינטרנט. כברירת מחדל, workbox-sw יטען את גרסת הפיתוח של Workbox אם אפליקציית האינטרנט פועלת ב-http://localhost, ואת גרסת הייצור בכל שאר הזמן.

כדי לשנות את התנהגות ברירת המחדל, אפשר לקרוא לשיטה setConfig של תיבת העבודה כדי להגדיר את האפשרות debug לערך true:

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

השבתה של התחברות לגרסאות build בפיתוח בכל תהליך עבודה

גם אם לא משתמשים ב-bundler, אפשר להשבית את כל גרסאות ה-build של הפיתוח על ידי הקצאת true למשתנה self.__WB_DISABLE_DEV_LOGS מיוחד ב-Service Worker:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

אחד היתרונות של הגישה הזו הוא שהיא בלתי תלויה לחלוטין בהגדרת ה-bundler שלך, והיא תפעל בין אם תשתמש ב-workbox-sw ישירות, ובין אם הוא תלוי ב-bundler שיכין עבורך את ה-Service Worker המופעל על-ידי Workbox.

מידע נוסף

אם אתם עדיין לא מצליחים להבין מה קורה ב-Service worker עם באגים, והרישום ביומן פשוט לא מספיק, נסו לפרסם שאלה בדף Stack Overflow עם התג workbox. אם לא מצאת תשובה, אפשר לדווח על בעיה ב-GitHub (אחרי שקוראים את ההנחיות בנושא תוכן שהוספת). התשובה הזו לא רק תאפשר לקהל רחב של מפתחים לקרוא את השאלות שלך ולענות עליהן, אלא גם התשובה לשאלה שלך יכולה לעזור למישהו שנמצא במצב דומה בהמשך.