עבודה עם קובצי שירות (service worker)

Jeff Posnick

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

היכרות עם הפרויקט לדוגמה

הקבצים בפרויקט לדוגמה שרלוונטיים ביותר לסדנת הקוד הזו הם:

  • המשתנה 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) כדי לפתוח את DevTools.
  • לוחצים על הכרטיסייה מסוף.

אמורות להופיע הודעות ביומן כמו אלה, שמציינות שה-service worker הותקן והופעל:

הסטטוס הזה מראה שקובץ השירות (service worker) מותקן ומופעל.

לאחר מכן עוברים לכרטיסייה Applications ובוחרים בחלונית Service Workers. אמורה להופיע הודעה דומה לזו:

הצגת פרטי ה-service worker בחלונית של ה-service worker.

המשמעות היא שיש עובד שירות עם כתובת 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 שמותקנות בשלב הזה. הגרסה הקודמת, שכבר הופעלה, פועלת ומנהלת את הדף הנוכחי. הגרסה המעודכנת של ה-service worker מופיעה בהמשך. הוא נמצא במצב waiting, ויישאר במצב המתנה עד שכל הכרטיסיות הפתוחות שנשלטות על ידי ה-service worker הישן ייסגרו.

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

סיכום

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

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