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

Jeff Posnick

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

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

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

  • 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 וגם 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

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

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

לשם כך, צריך להוסיף את הקוד הבא ל-service-worker.js, שיתועד הודעות למסוף כלי הפיתוח בתגובה לאירועים שונים (אבל לא לעשות הרבה other):

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 בפעולה.

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

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

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

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

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

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

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

הפעלת תהליך העדכון של שירות העבודה

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

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

לסכם

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

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