מחזור החיים של קובץ השירות (service worker) מבטיח תהליך התקנה ועדכון ניתן לחיזוי, אך הוא יכול להפוך את מחזור הפיתוח המקומי לדקויות יותר.
במחזור הפיתוח המקומי הרגיל, מפתחים שומרים שינויים בקבצים בעורך טקסט, ואז עוברים לדפדפן כדי לאמת את השינויים והתהליך חוזר. כשיש שילוב של קובצי שירות (service worker), המחזור הזה זהה במידה רבה, אבל ייתכנו הבדלים בין מה שהמפתח מצפה לראות לבין מה שהדפדפן עושה.
חריגות בפיתוח המקומי
באופן כללי, ממשקי API של Service Worker זמינים רק בדפים שמוצגים באמצעות HTTPS, אך יש יוצאי דופן לכלל הזה שבהם הם עשויים להיות זמינים ב-HTTP.
חריג בולט אחד הוא לדפים שמוצגים מעל localhost, שמתאים מאוד לפיתוח מקומי.
עם זאת, המפתחים מציינים שמות מארחים מקומיים מלבד localhost בקובץ מארחים.
הדרישה הזו נדרשת בסביבות פיתוח מקומיות, במקרים שבהם לפרויקטים רבים נדרשים שמות מארחים נפרדים.
במקרים כאלה, מומלץ להקצות אישור בחתימה עצמית.
פתרון נוח יותר הוא להורות לדפדפן להגדיר חריגים לצורך בדיקה של קובץ השירות (service worker).
ב-Chrome, צריך לעבור אל chrome://flags/#unsafely-treat-insecure-origin-as-secure ולציין מקורות לא מאובטחים כדי להתייחס אליהם כאל מקורות מאובטחים.
Firefox מאפשר לבדוק Service Workers במקורות לא מאובטחים באמצעות ההגדרה devtools.serviceWorkers.testing.enabled ב-about:config.
עזרי פיתוח של Service Worker
התפתחות מקומית עם שילוב של קובצי שירות (service worker) עלולה להוביל להתנהגות בלתי צפויה לכאורה.
לדוגמה, נניח שמיושמת אסטרטגיה לשמירה במטמון בלבד לנכסים סטטיים שלא היו להם גרסאות או לדף 'במצב אופליין' שנשמר מראש במטמון, ושצפוי להתעדכן בטעינה מחדש אחרי שמבצעים שינויים.
גרסאות לא עדכניות של הנכסים האלה תמיד מוצגות ממכונה של Cache, ולכן נראה שהם אף פעם לא מתעדכנים!
זה מתסכל, אבל ה-Service Worker עושה רק את מה שהוא נועד לעשות, אבל יש כמה דרכים להקל על הבדיקה.
בדרך כלל, הדרך היעילה ביותר לבדוק קובץ שירות (service worker) היא להסתמך על חלונות של גלישה פרטית, כמו חלונות פרטיים ב-Chrome, או על תכונת הגלישה הפרטית ב-Firefox.
בכל פעם שפותחים חלון גלישה פרטית, מתחילים מחדש.
אין קובצי שירות פעילים (service worker) ואין מכונות פתוחות של Cache. התרחיש של בדיקה כזו הוא:
- פותחים חלון גלישה פרטית.
- נכנסים לדף שרושם קובץ שירות (service worker).
- בדיקה אם קובץ השירות (service worker) מתנהג כמצופה.
- סגירה של חלון פרטי.
- ולהתחיל מחדש.
התהליך הזה מחקה בנאמנות את מחזור החיים של קובץ השירות (service worker).
כלי בדיקה אחרים שזמינים בחלונית האפליקציות של Chrome DevTools יכולים לעזור, למרות שהם יכולים לשנות את מחזור החיים של ה-Service Worker בדרכים מסוימות.
בחלונית של האפליקציה יש חלונית משנה בשם Service Workers, שבה מוצגים קובצי שירות פעילים בדף הנוכחי. ניתן לעדכן באופן ידני כל קובץ שירות (service worker) פעיל ואפילו לבטל את הרישום שלו. קיימים גם שלושה מתגים בחלק העליון שעוזרים בפיתוח.
- מצב אופליין מדמה תנאים אופליין. כך ניתן לבדוק אם קובץ שירות (service worker) פעיל מציג תוכן אופליין.
- עדכון לאחר טעינה מחדש: לאחר החלפת המצב, מאחזרים מחדש את קובץ השירות הנוכחי ומחליפים אותו בכל פעם שהדף נטען מחדש.
- עקיפה עבור רשת, כשמתבצעת החלפה, היא עוקפת כל קוד באירוע
fetchשל קובץ השירות (service worker) ותמיד מאחזרת תוכן מהרשת.
אלה מתגים מועילים, במיוחד עקיפת רשת, שהיא שימושית במיוחד כשמפתחים פרויקט עם קובץ שירות (service worker) פעיל, אבל גם רוצים לוודא שהחוויה תמשיך לפעול ללא צורך ב-Service Worker.
ב-Firefox יש חלונית אפליקציה דומה בכלים למפתחים, אבל הפונקציונליות מוגבלת רק כדי להציג את ה-Service Workers שמותקנים, וכן את האפשרות לבטל ידנית את הרישום של כל ה-Service Workers בדף הנוכחי. היא מועילה באותה מידה, אבל לשם כך נדרש מאמץ ידני יותר במחזור הפיתוח המקומי.
Shift וטעינה מחדש
כשמפתחים באופן מקומי עם קובץ שירות (service worker) פעיל, ללא צורך בפונקציונליות שמספקת עדכון בעת רענון או עקיפת רשת, כדאי גם להחזיק את המקש Shift וללחוץ על לחצן הרענון.
התהליך הזה נקרא רענון מאולץ, שעוקף את מטמון ה-HTTP של הרשת. כאשר קובץ שירות (service worker) פעיל, רענון מאולץ גם ידלג על ה-Service Worker לגמרי.
הפונקציונליות הזו שימושית במקרים שבהם יש אי ודאות לגבי אופן הפעולה של אסטרטגיית שמירה מסוימת במטמון, ומומלץ להשתמש בכל הנתונים מהרשת כדי להשוות בין התנהגויות לבין Service Worker. בנוסף, זוהי התנהגות מוגדרת, כך שכל הדפדפנים שתומכים ב-Service Workers יבחינו בה.
בדיקת התוכן של המטמון
אם לא ניתן לבדוק את המטמון, קשה לדעת אם אסטרטגיית שמירה במטמון פועלת כמצופה.
בוודאי, אפשר לבדוק את המטמון בקוד, אבל זהו תהליך שכולל כלים לניפוי באגים ו/או הצהרות console שבהן כלי חזותי מתאים יותר למשימה.
החלונית Application ב-Chrome DevTools כוללת חלונית משנה לבדיקת התוכן של מכונות Cache.
בעזרת חלונית המשנה הזו קל יותר לפתח את קובץ השירות (service worker) באמצעות פונקציונליות כמו:
- הצגת השמות של
Cacheמופעים. - היכולת לבדוק את גוף התגובה של נכסים שנשמרו במטמון ואת כותרות התגובה המשויכות אליהם.
- עליך לפנות פריט אחד או יותר מהמטמון, או אפילו למחוק את כל המופעים של
Cache.
ממשק המשתמש הגרפי הזה מאפשר לבדוק בקלות את המטמון של Service Worker כדי לראות אם פריטים נוספו, עודכנו או הוסרו לגמרי ממטמון של Service Worker. Firefox מציע מציג מטמון משלו עם פונקציונליות דומה, על אף שהוא נמצא בחלונית אחסון נפרדת.
הדמיה של מכסת אחסון
באתרים שיש בהם הרבה נכסים סטטיים גדולים (כמו תמונות ברזולוציה גבוהה), אפשר להגיע למכסת האחסון. במצב כזה, הדפדפן יוציא מהמטמון פריטים שלדעתו מיושנים או שהם ראויים לוותר כדי לפנות מקום לנכסים חדשים.
ההתמודדות עם מכסות אחסון צריכה להיות חלק מהפיתוח של קובץ שירות (service worker), ותיבת העבודה הופכת את התהליך הזה לפשוט יותר מאשר לנהל אותו בעצמך. עם זאת, עם או בלי תיבת עבודה, מומלץ לדמות מכסת אחסון מותאמת אישית כדי לבדוק את הלוגיקה של ניהול המטמון.
החלונית 'אפליקציה' בכלי הפיתוח של Chrome כוללת חלונית משנה של אחסון, שבה מוצג מידע על השימוש בדף ממכסת האחסון הנוכחית. הוא גם מאפשר לציין מכסה מותאמת אישית במגה-בייט. לאחר שהשינוי ייכנס לתוקף, Chrome יאכוף את מכסת האחסון המותאמת אישית כדי שניתן יהיה לבדוק אותה.
דרך אגב, חלונית המשנה הזו כוללת גם לחצן ניקוי נתוני אתר ומערך שלם של תיבות סימון המשויכות לפריטים שצריך להסיר כשלוחצים על הלחצן.
בין הפריטים האלה יש מופעים פתוחים של Cache והיכולת לבטל את הרישום של כל ה-Service Workers הפעילים בדף.
פיתוח קל יותר, פרודוקטיביות טובה יותר
כאשר המפתחים לא מחויבים, הם יכולים לעבוד בביטחון רב יותר ולהיות פרודוקטיביים יותר. פיתוח מקומי עם קובץ שירות (service worker) יכול להיות מעודן, אבל הוא לא חייב להיות מורכב. בעזרת הטיפים והטריקים האלה, פיתוח עם Service Worker צריך להיות הרבה יותר שקוף וצפוי ולהוביל לשיפור חוויית המפתחים.