ב-Codelab הזה מוסבר איך לרשום קובץ שירות (service worker) מתוך אפליקציית האינטרנט, ולהשתמש בכלי הפיתוח ל-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 worker. הדבר נכון במיוחד לגרסאות ישנות של דפדפנים שלא מתעדכנים באופן אוטומטי. לכן מומלץ להפעיל את navigator.serviceWorker.register() באופן מותנה אחרי שבודקים אם יש תמיכה ב-navigator.serviceWorker.
שנית, כשרושמים קובץ Service Worker, הדפדפן מריץ את הקוד בקובץ service-worker.js ויכול להיות שהוא יתחיל להוריד כתובות URL כדי לאכלס את המטמון, בהתאם לקוד שנמצא ברכיבי handler של אירועים ב-install וב-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, API של אחסון המטמון וידע על התנועה ברשת של אפליקציית האינטרנט.
אבל... זה הכול כדי ללמוד בשלב מאוחר יותר. בשלב הזה אנחנו מתמקדים בצפייה באירועים שונים של קובצי שירות, ולהתרגל להשתמש בכלי הפיתוח של 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 הותקן והופעל:
לאחר מכן עוברים לכרטיסייה Applications ובוחרים בחלונית Service Workers. אתם אמורים לראות משהו כזה:
כך אפשר לדעת שיש קובץ שירות (service worker) עם כתובת ה-URL המקורית של service-worker.js, שמופעלת כרגע באפליקציית האינטרנט solar-donkey.glitch.me. הוא גם מציין שכרגע יש לקוח אחד (כרטיסייה פתוחה) שנשלט על ידי ה-Service Worker.
תוכלו להשתמש בקישורים שבחלונית הזו, כמו Unregister או stop, כדי לבצע שינויים ב-Service Worker הרשום הנוכחי למטרות ניפוי באגים.
הפעלת תהליך העדכון של Service Worker
אחד המושגים המרכזיים שכדאי להבין כשמפתחים עם Service Works הוא תהליך עדכון.
אחרי שהמשתמשים ייכנסו לאפליקציית אינטרנט שמתעדת קובץ שירות (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 מופיעה בהמשך. הוא במצב waiting, והוא יישאר בהמתנה עד שכל הכרטיסיות הפתוחות שנשלטות על ידי ה-Service Worker הישן ייסגרו.
התנהגות ברירת המחדל הזו מבטיחה שאם ל-service worker החדש יש הבדל מהותי בהתנהגות של השירות הישן, כמו handler של fetch שמגיב עם משאבים שלא תואמים לגרסאות ישנות של אפליקציית האינטרנט, היא לא תיכנס לתוקף עד שהמשתמש יסגור את כל המופעים הקודמים של אפליקציית האינטרנט שלכם.
לסכם
עכשיו אתם אמורים להיות מוכנים לתהליך הרישום של קובץ השירות (service worker) ולצפות בהתנהגות של ה-Service Worker באמצעות כלי הפיתוח ב-Chrome.
עכשיו אתם יכולים להתחיל ליישם אסטרטגיות של שמירה במטמון, וליהנות מכל התכונות הטובות שיעזרו לאפליקציית האינטרנט שלכם להיטען במהירות ובצורה מהימנה.