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

ג'ף פוזניק

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

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

הקבצים בפרויקט לדוגמה הרלוונטיים ביותר ל-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 worker. זה נכון במיוחד בגרסאות ישנות של דפדפנים שלא מתעדכנים באופן אוטומטי. לכן מומלץ לקרוא לפונקציה navigator.serviceWorker.register() עם תנאי, אחרי בדיקה אם יש תמיכה ב-navigator.serviceWorker.

שנית, כשרושמים קובץ שירות (service worker), הדפדפן מריץ את הקוד בקובץ service-worker.js, ויכול להיות שיתחיל הורדה של כתובות URL כדי לאכלס קובצי מטמון, בהתאם לקוד ברכיבי install של Service Worker ושל activate.

הפעלת קוד נוסף והורדת נכסים יכולים לנצל משאבים חשובים שהדפדפן יכול להשתמש בהם כדי להציג את דף האינטרנט הנוכחי. כדי למנוע הפרעה כזו, מומלץ לעכב את הרישום של Service Worker עד שהדפדפן יסיים לעבד את הדף הנוכחי. דרך נוחה להעריך את המספר הזה היא להמתין עד שהאירוע window.load יופעל.

מחברים את שתי הנקודות האלה יחד, ומוסיפים את קוד הרישום של קובץ השירות (service worker) לשימוש הכללי לקובץ register-sw.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

הוספת קוד רישום ביומן של Service Worker

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

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

כדי לעשות זאת, צריך להוסיף את הקוד הבא ל-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);
});

היכרות עם חלונית Service Workers בכלי הפיתוח

עכשיו, אחרי שהוספתם את הקוד לקבצים register-sw.js ו-service-worker.js, זה הזמן להיכנס לגרסה הפעילה של הפרויקט לדוגמה ולבחון את קובץ השירות (service worker) בפעולה.

  • כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  • לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  • לוחצים על הכרטיסייה מסוף.

אמורה להופיע משהו כמו הודעות היומן הבאות, שמוכיחות שה-Service Worker הותקן והופעל:

תמונה שמראה ש-Service Worker מותקן והופעל.

לאחר מכן נכנסים לכרטיסייה Applications (יישומים) ובוחרים בחלונית Service Workers. אתם אמורים לראות משהו כזה:

הצגת פרטי קובץ השירות (service worker) בחלונית של קובץ השירות.

כך תוכלו לדעת שיש קובץ שירות (service worker) עם כתובת URL מקור של service-worker.js לאפליקציית האינטרנט solar-donkey.glitch.me, שפעיל כרגע. הוא גם מציין שיש כרגע לקוח אחד (כרטיסייה פתוחה) שנמצא בשליטת ה-Service Worker.

אפשר להשתמש בקישורים בחלונית הזו, כמו Unregister או stop, כדי לבצע שינויים ב-Service Worker הרשום כרגע למטרות ניפוי באגים.

הפעלת תהליך העדכון של קובץ השירות (service worker)

אחד מעקרונות המפתח שחשוב להבין כשמפתחים עם Service Workers הוא הרעיון של תהליך עדכון.

אחרי שהמשתמשים ייכנסו לאפליקציית אינטרנט שרשמתם Service Worker, הם יקבלו את הקוד של העותק הנוכחי של service-worker.js שהותקן בדפדפן המקומי שלהם. אבל מה קורה כשמעדכנים את הגרסה של service-worker.js שמאוחסנת בשרת האינטרנט שלכם?

כשמבקר חוזר חוזר לכתובת URL שנמצאת בטווח של קובץ שירות (service worker), הדפדפן יבקש באופן אוטומטי את הערך העדכני ביותר של 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);
});

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

מוצגות שתי גרסאות של קובץ השירות (service worker) שהותקן.

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

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

מסכם דברים

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

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