סקירה כללית של קובץ השירות

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

כדי להציג רשימה פעילה של עובדי שירות, מזינים chrome://serviceworker-internals/ בסרגל הכתובות.

רשימה פעילה של עובדי שירות.

מה מספקים קובצי שירות (service worker)?

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

מחזור חיים דמוי-אפליקציה שהולך ומשתפר

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

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

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

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

גישה לממשק API מבוסס-JavaScript לשמירה במטמון

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

מטמון ה-HTTP מושפע מהוראות לשמירה במטמון שצוינו בכותרות HTTP, אבל אפשר לתכנת את ממשק Cache באמצעות JavaScript. כלומר, שמירת התגובות במטמון לבקשות רשת יכולה להתבסס על לוגיקה שמתאימה לאתר נתון. למשל:

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

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

API אסינכרוני ומבוסס-אירועים

העברה של נתונים ברשת היא אסינכרונית מטבעה. לוקח זמן כדי לבקש נכס, עד שהשרת מגיב לבקשה הזו ולהוריד את התגובה. הזמן שנדרש הוא שונה וקבוע. עובדי שירות (Service Workers) מתאימים לאסינכרוניות הזו באמצעות API מבוסס-אירועים, ומשתמשים בקריאות חוזרות (callback) לאירועים כמו:

אפשר לרשום אירועים באמצעות API מוכר של addEventListener. לכל האירועים האלה יכולה להיות אינטראקציה עם הממשק של Cache. היכולת להפעיל התקשרות חזרה בזמן שליחת בקשות רשת היא חיונית לאספקת האמינות והמהירות המבוקשות.

ביצוע עבודה אסינכרונית ב-JavaScript כרוכה בשימוש בהבטחות. כי ההבטחות תומכות גם ב-async וב-await, ולכן אפשר להשתמש בתכונות ה-JavaScript האלה גם כדי לפשט את הקוד של Service Worker (ו-Workbox!) וכך לשפר את חוויית הפיתוח.

שמירה במטמון ושמירה במטמון זמן ריצה

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

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

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

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

בידוד מה-thread הראשי

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

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

מה בהמשך

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