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

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

מה הם עובדי שירות?

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

עובדי שירות גם מאפשרים לך להוסיף תכונות כמו סנכרון ברקע ליישומי האינטרנט שלך.

למה עובדי שירות?

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

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

instagram viewer
מטמון האפליקציה הוא Douchebag לפרטים נוספים. (מָקוֹר: MDN)

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

מקרי שימוש עבור עובדי שירות

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

הנה כמה מהתכונות שעובדי שירות מאפשרים:

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

מחזור החיים של עובד שירות

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

  1. רישום והורדה של העובד. חייו של Service Worker מתחילים כאשר קובץ JavaScript רושם אותו. אם ההרשמה הצליחה, ה-Service Worker מוריד, ולאחר מכן מתחיל לפעול בתוך שרשור מיוחד.
  2. כאשר עמוד הנשלט על ידי ה-Service Worker נטען, ה-Service Worker מקבל אירוע 'התקנה'. זה תמיד האירוע הראשון שעובד שירות מקבל, וניתן להגדיר מאזין לאירוע זה בתוך העובד. אירוע 'התקנה' משמש בדרך כלל כדי לאחזר ו/או לשמור במטמון כל משאב ש-Service Worker צריך.
  3. לאחר שעובד השירות מסיים את ההתקנה, הוא מקבל אירוע 'הפעלה'. אירוע זה מאפשר לעובד לנקות משאבים מיותרים ששימשו עובדי שירות קודמים. אם אתה מעדכן שירות עובד, אירוע ההפעלה יופעל רק כאשר בטוח לעשות זאת. זה קורה ברגע שאין דפים נטענים שעדיין משתמשים בגרסה הישנה של Service Worker.
  4. לאחר מכן, ל-Service Worker יש שליטה מלאה על כל הדפים שנטענו לאחר רישוםו בהצלחה.
  5. השלב האחרון של מחזור החיים הוא יתירות, המתרחשת כאשר ה-Service Worker מוסר או מוחלף בגרסה חדשה יותר.

כיצד להשתמש ב-Service Workers ב-JavaScript

ה-Service Worker API (MDN) מספק את הממשק המאפשר לך ליצור ולתקשר עם עובדי שירות ב-JavaScript.

עובדי שירות עוסקים בעיקר בבקשות רשת ואירועים אסינכרוניים אחרים. כתוצאה מכך, ה-API של Service Worker עושה בו שימוש רב הבטחות ותכנות אסינכרוני.

כדי ליצור שירות עובד, הדבר הראשון שעליך לעשות הוא להתקשר ל- navigator.serviceWorker.register() שיטה. כך זה עשוי להיראות:

אם ('serviceWorker' בנווט) {
 navigator.serviceWorker.register('/sw.js').then(פוּנקצִיָה(הַרשָׁמָה){
 console.log('רישום עובדי השירות הצליח:', רישום);
 }).catch((שגיאה) => { console.log('רישום שירות עובד נכשל:', שגיאה); });
} אַחֵר {
 console.log('עובדי שירות אינם נתמכים.');
}

בלוק ה-if החיצוני ביותר מבצע זיהוי תכונה. זה מבטיח שקוד הקשור ל-Service Worker יפעל רק בדפדפנים התומכים ב-Service Workers.

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

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

אם תהליך הרישום נכשל, הקוד תופס את השגיאה ומתעד אותה בקונסולה.

לאחר מכן, הנה דוגמה פשוטה כיצד יכול להיראות ה-Service Worker עצמו:

self.addEventListener('להתקין', (אירוע) => {
 event.waitUntil(חָדָשׁהַבטָחָה((לפתור, לדחות) => {
 console.log("עושה דברים בהגדרות")
 לִפְתוֹר()
 }))
 console.log("עובד שירות סיים את ההתקנה")
})
self.addEventListener('לְהַפְעִיל', (אירוע) => {
 event.waitUntil(חָדָשׁהַבטָחָה((לפתור, לדחות) => {
 console.log("עושה דברים לנקות!")
 לִפְתוֹר()
 }))
 console.log('ההפעלה בוצעה!')
})
self.addEventListener('לְהָבִיא', (אירוע) => {
 console.log("הבקשה יורטה", אירוע)
});

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

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

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

המשאבים הנשלטים על ידי Service Worker כוללים את כל הדפים שהוא שולט בו, כמו גם כל הנכסים שאליהם מתייחסים דפים אלה.

שפר את אפליקציות האינטרנט שלך עם Service Workers

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