בקודלאב הזה תלמדו איך לרשום שירות עובד מתוך אפליקציית האינטרנט שלכם, ולהשתמש בכלי הפיתוח של Chrome כדי לצפות בהתנהגות שלו. בנוסף, מוסבר בה איך משתמשים בכמה שיטות לניפוי באגים שיכולות להועיל בעבודה עם שירותי עובדים.
היכרות עם הפרויקט לדוגמה
הקבצים בפרויקט לדוגמה הרלוונטיים ביותר ל-Codelab הזה הם:
- ה-
register-sw.jsמתחיל ריק, אבל מכיל את הקוד שמשמש לרישום ה-Service Worker. הוא כבר נטען באמצעות תג<script>בתוךindex.htmlשל הפרויקט. - גם השדה
service-worker.jsריק. זהו הקובץ שיכיל את ה-service worker של הפרויקט הזה.
הוספת קוד הרישום של ה-service worker
לא ייעשה שימוש ב-Service Worker (גם ריק, כמו הקובץ service-worker.js הנוכחי) אלא אם הוא רשום קודם. אפשר לעשות זאת באמצעות שיחה אל:
navigator.serviceWorker.register(
'/service-worker.js'
)
בתוך הקובץ register-sw.js.
עם זאת, לפני שמוסיפים את הקוד הזה, יש כמה דברים שחשוב לזכור.
קודם כול, לא כל הדפדפנים תומכים ב-service workers. הדבר נכון במיוחד לגרסאות ישנות של דפדפנים שלא מתעדכנים באופן אוטומטי. לכן מומלץ להפעיל את navigator.serviceWorker.register() באופן מותנה, אחרי שבודקים אם navigator.serviceWorker נתמך.
שנית, כשרושמים עובד שירות, הדפדפן מפעיל את הקוד בקובץ service-worker.js, ויכול להיות שהוא יתחיל להוריד כתובות URL כדי לאכלס מטמון, בהתאם לקוד ב-install וב-activate של עובד השירות.
הפעלת קוד נוסף והורדת נכסים עלולים לנצל משאבים חשובים שהדפדפן יכול להשתמש בהם כדי להציג את דף האינטרנט הנוכחי. כדי למנוע את ההפרעה הזו, מומלץ לעכב את הרישום של Service Worker עד שהדפדפן יסיים לעבד את הדף הנוכחי. דרך נוחה לקבל הערכה לכך היא להמתין עד שהאירוע window.load יופעל.
על סמך שני הנתונים האלה, מוסיפים לקובץ register-sw.js את קוד הרישום של ה-service worker למטרות כלליות:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
הוספת קוד לרישום ביומן של שירות העבודה
קובץ service-worker.js הוא המקום שבו בדרך כלל נמצא כל הלוגיקה של הטמעת ה-service worker. כדי ליצור service worker מושלם, מוכן לטפל בכל הבקשות של אפליקציית האינטרנט, צריך להשתמש בשילוב של אירועי מחזור החיים של ה-service worker, ב-Cache Storage API ובידע על תעבורת הנתונים ברשת של אפליקציית האינטרנט.
אבל… זה הכל ללמידה בשלב מאוחר יותר. בשלב הזה, נתמקד במעקב אחרי אירועים שונים של שירותים עובדים, ונלמד להשתמש בכלי הפיתוח של Chrome כדי לנפות באגים במצב של השירותים העובדים.
לשם כך, מוסיפים את הקוד הבא ל-service-worker.js, שיירשם ביומן הודעות במסוף כלי הפיתוח בתגובה לאירועים שונים (אבל לא יעשה הרבה מעבר לכך):
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
היכרות עם החלונית 'קובצי שירות' ב-DevTools
עכשיו, אחרי שהוספתם את הקוד לקבצים register-sw.js ו-service-worker.js, הגיע הזמן לעבור לגרסה הפעילה של הפרויקט לדוגמה ולצפות ב-Service Worker בפעולה.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא
. - מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה מסוף.
אמורות להופיע הודעות ביומן כמו אלה, שמציינות שה-service worker הותקן והופעל:
לאחר מכן עוברים לכרטיסייה Applications ובוחרים בחלונית Service Workers. אמורה להופיע הודעה דומה לזו:
המשמעות היא שיש עובד שירות עם כתובת URL של מקור service-worker.js לאפליקציית האינטרנט solar-donkey.glitch.me, שהוא מופעל כרגע. בנוסף, אפשר לראות שיש כרגע לקוח אחד (כרטיסייה פתוחה) שנשלט על ידי קובץ השירות.
אפשר להשתמש בקישורים בחלונית הזו, כמו Unregister או stop, כדי לבצע שינויים ב-service worker הרשום הנוכחי למטרות ניפוי באגים.
הפעלת תהליך העדכון של שירות העבודה
אחד מהמושגים החשובים שצריך להבין כשמפתחים עם שירותי עבודה הוא תהליך העדכון.
אחרי שהמשתמשים ייכנסו לאפליקציית אינטרנט שמירתת שירות עובד, הם יקבלו את הקוד של העותק הנוכחי של service-worker.js שמותקן בדפדפן המקומי שלהם. אבל מה קורה כשמבצעים עדכונים לגרסה של service-worker.js שמאוחסנת בשרת האינטרנט?
כשמבקר חוזר חוזר לכתובת URL שנכללת בהיקף של עובד שירות, הדפדפן ידרוש באופן אוטומטי את service-worker.js העדכני ביותר ויחפש שינויים. אם יש שינוי כלשהו בסקריפט של ה-service worker, ל-service worker החדש תהיה הזדמנות להתקין, להפעיל ובסופו של דבר להשתלט.
כדי לדמות את תהליך העדכון הזה, אפשר לחזור לעורך הקוד של הפרויקט ולבצע כל שינוי בקוד. שינוי מהיר אחד הוא החלפת
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
עם
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
אחרי ביצוע השינוי, חוזרים לגרסה הפעילה של האפליקציה לדוגמה ומטעינים מחדש את הדף כשכרטיסיית האפליקציה של DevTools עדיין פתוחה. אמורה להופיע הודעה שדומה לזו:
זה מראה שיש שתי גרסאות של ה-service worker שמותקנות בשלב הזה. הגרסה הקודמת, שכבר הופעלה, פועלת ומנהלת את הדף הנוכחי. הגרסה המעודכנת של ה-service worker מופיעה בהמשך. הוא נמצא במצב waiting, ויישאר במצב המתנה עד שכל הכרטיסיות הפתוחות שנשלטות על ידי ה-service worker הישן ייסגרו.
התנהגות ברירת המחדל הזו מבטיחה שאם יש הבדל מהותי בהתנהגות של ה-service worker החדש לעומת הישן – למשל, רכיב טיפול (handler) של fetch שמגיב באמצעות משאבים שלא תואמים לגרסאות ישנות יותר של אפליקציית האינטרנט – הוא לא ייכנס לתוקף עד שמשתמש יכבה את כל המופעים הקודמים של אפליקציית האינטרנט.
לסכם
עכשיו אתם אמורים להבין את התהליך של רישום של עובד שירות ולצפות בהתנהגות של עובד שירות באמצעות כלי הפיתוח של Chrome.
עכשיו אתם מוכנים להתחיל להטמיע אסטרטגיות של אחסון במטמון, וגם את כל הדברים הטובים שיעזרו לאפליקציית האינטרנט שלכם להיטען בצורה מהירה ואמינה.