סקירה כללית של העובדים

איך רכיבי Web Worker ורכיבי Service Worker יכולים לשפר את הביצועים של האתר, ומתי כדאי להשתמש ב-Web Worker במקום ב-Service Worker.

Andrew Guan

Demián Renzulli

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

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

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

בפיתוח אפליקציות ל-iOS או ל-Android, דפוס נפוץ להבטיח שהשרשור הראשי של האפליקציה יישאר פנוי להגיב לאירועי משתמשים הוא להעביר פעולות לשרשור נוסף. למעשה, בגרסאות האחרונות של Android, חסימה של הליבה למשך זמן רב מדי גורמת לקריסת האפליקציה.

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

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

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

Web workers וקובצי שירות (service workers)

תכונות דומות

Web Workers וService Workers הם שני סוגים של רכיבי worker שזמינים לאתרים. יש להם כמה דברים משותפים:

• שניהם פועלים בשרשור משני, שמאפשר להריץ קוד JavaScript בלי לחסום את השרשור הראשי ואת ממשק המשתמש.
• אין להם גישה לאובייקטים Window ו-Document, ולכן הם לא יכולים לקיים אינטראקציה ישירה עם ה-DOM, ויש להם גישה מוגבלת לממשקי API של דפדפנים.

הבדלים

יכול להיות שתחשבו שרוב הפעולות שאפשר להקצות ל-web worker אפשר לבצע ב-service worker ולהפך, אבל יש הבדלים חשובים ביניהם:

• בניגוד ל-web workers, שירותי ה-workers מאפשרים לכם ליירט בקשות רשת (באמצעות האירוע fetch) ולהאזין לאירועי Push API ברקע (באמצעות האירוע push).
• דף יכול ליצור כמה עובדים באינטרנט, אבל קובץ שירות אחד שולט בכל הכרטיסיות הפעילות בהיקף שבו הוא נרשם.
• משך החיים של עובד האינטרנט מקושר באופן הדוק לכרטיסייה שהוא שייך אליה, בעוד שמחזור החיים של קובץ השירות הוא עצמאי. לכן, סגירת הכרטיסייה שבה פועל web worker תגרום לסיום הפעולה שלו, בעוד שקובץ שירות יכול להמשיך לפעול ברקע, גם אם אין באתר כרטיסיות פעילות פתוחות.

תרחישים לדוגמה

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

תרחישי שימוש ל-web workers קשורים בדרך כלל להעברת עומס עבודה (כמו חישובים כבדים) לשרשור משני, כדי למנוע חסימה של ממשק המשתמש.

• דוגמה: הצוות שיצר את משחק הווידאו PROXX רצה להשאיר את השרשור הראשי פתוח ככל האפשר כדי לטפל בקלט של המשתמשים ובאנימציות. כדי לעשות זאת, הם השתמשו ב-web workers כדי להריץ את הלוגיקה של המשחק ואת תחזוקת המצב בשרשור נפרד.

משימות של שירותי עבודה קשורות בדרך כלל יותר לפעולות כמו עבודה בתור שרת proxy ברשת, טיפול במשימות ברקע, שמירה בקובץ שמור ועבודה במצב אופליין.

דוגמה: באפליקציית PWA של פודקאסט, יכול להיות שתרצו לאפשר למשתמשים להוריד פרקים מלאים כדי להאזין להם במצב אופליין. אפשר להשתמש לצורך כך ב-service worker, ובמיוחד ב-Background Fetch API. כך, אם המשתמש סוגר את הכרטיסייה בזמן שהפרק מורידים, אין צורך להפסיק את המשימה.

כלים וספריות

אפשר להטמיע תקשורת בין חלונות לבין עובדים באמצעות ממשקי API שונים ברמה נמוכה יותר. למרבה המזל, יש ספריות שמפשטות את התהליך הזה ומטפלות בתרחישי השימוש הנפוצים ביותר. בקטע הזה נסקור שניים מהם, שמטפלים בהעברה של חלונות ל-Web Workers ול-Service Workers, בהתאמה: Comlink ו-Workbox.

Comlink

Comlink היא ספריית RPC קטנה (1.6k) שמטפלת בפרטים רבים שמתרחשים ברקע כשאתם יוצרים אתרים שמשתמשים ב-Web Workers. הוא שימש באתרים כמו PROXX ו-Squoosh. כאן אפשר למצוא סיכום של המניעים לכך ודוגמאות לקוד.

Workbox

Workbox היא ספרייה פופולרית ליצירת אתרים שמשתמשים ב-service workers. הוא מכיל חבילה של שיטות מומלצות בנושאים כמו אחסון במטמון, אופליין, סנכרון ברקע וכו'. המודול workbox-window מספק דרך נוחה להחליף הודעות בין ה-service worker לדף.

השלבים הבאים

שאר הסדרה הזו מתמקדת בדפוסים לתקשורת בין חלונות לבין שירותי עבודה:

• מדריך לשימוש חובה במטמון: קריאה לקובץ שירות (service worker) מהדף כדי לשמור משאבים במטמון מראש (למשל בתרחישים של אחסון מראש).
• שידור עדכונים: קריאה לדף מה-service worker כדי להודיע על עדכונים חשובים (למשל, גרסה חדשה של האתר זמינה).
• תקשורת דו-כיוונית: הענקת משימה ל-service worker (למשל, הורדה כבדה) ועדכון הדף לגבי ההתקדמות.

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