קשה לנפות באגים ב-Service Worker. אתם עוסקים במחזור החיים, בעדכונים, במטמון ובאינטראקציה בין כל הדברים האלה. למרבה המזל, בדיוק כפי ש-Workbox מקל על הפיתוח של קובצי שירות (service worker), הוא גם מאפשר ניפוי באגים קל יותר באמצעות הרישום ביומן האינפורמטיבי. בדף הזה נדון בחלק מהכלים הזמינים לניפוי באגים, נסביר איך פועל הרישום ביומן של Workbox ואיך ניתן להגדיר אותו.
כלים זמינים לפתרון בעיות
יש המון כלים הזמינים בדפדפן לניפוי באגים ולפתרון בעיות בזמן פיתוח קובץ שירות (service worker). ריכזנו כאן כמה מקורות מידע שיעזרו לכם להתחיל לעבוד עם הדפדפן שבחרתם.
Chrome ו-Edge
ב-Chrome (ובגרסאות האחרונות של Edge שמבוססות על מנוע Blink) יש כלים מתקדמים למפתחים. בחלק מהכלים האלה (במיוחד בכלי הפיתוח של Chrome) טיפלנו קודם לכן בתיעוד הזה, אבל יש עוד דברים לגלות:
- ניפוי באגים באפליקציות מסוג Progressive Web App
- בדיקת הפעילות ברשת בכלים למפתחים ב-Chrome
- סרטון: ניפוי באגים ב-Service Workers ב-Chrome
- Codelab: ניפוי באגים ב-Service Workers
Firefox
משתמשי Firefox יכולים לעיין במקורות המידע הבאים:
- ניפוי באגים של עובדי שירות באמצעות חלונית האפליקציות של Firefox Devtools
- סרטון: ניפוי באגים ב-Service Workers ב-Firefox
Safari
ב-Safari יש כרגע קבוצה מוגבלת יותר של כלים למפתחים לניפוי באגים בשירות ה-Service Workers. מידע נוסף זמין במקורות המידע הבאים:
רישום ביומן של תיבת העבודה
אחד מהשיפורים המשמעותיים בחוויית המפתח של Workbox הוא הרישום ביומן האינפורמטיבי. כשהרישום ביומן מופעל, 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 (אחרי שקוראים את ההנחיות בנושא תוכן שהוספת). התשובה הזו לא רק תאפשר לקהל רחב של מפתחים לקרוא את השאלות שלך ולענות עליהן, אלא גם התשובה לשאלה שלך יכולה לעזור למישהו שנמצא במצב דומה בהמשך.