קובצי שירות (service worker)

המשתמשים מצפים שהאפליקציות יפעלו בצורה מהימנה גם בחיבורים איטיים או לא יציבים לרשת, או אפילו במצב אופליין. הם מצפים שהתוכן שהם יצרו איתו אינטראקציה לאחרונה, כמו רצועות מדיה או כרטיסים ומסלולי נסיעה, יהיה זמין וניתן לשימוש. אם הבקשה לא אפשרית, הם מצפים שהאפליקציה תודיע להם על כך במקום להיכשל או לקרוס בלי להודיע. והם רוצים שהכול יקרה במהירות. כפי שאפשר לראות במאמר Milliseconds make millions, שיפור של 0.1 שניות בזמני הטעינה יכול להוביל לשיפור של עד 10% בהמרות. קובצי שירות (service workers) הם הכלי שמאפשר לאפליקציית Progressive Web App (‏PWA) לעמוד בציפיות של המשתמשים.

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

רישום קובץ שירות (service worker)

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

אחרי שבודקים אם הדפדפן תומך ב-Service Worker API, אפשר לרשום Service Worker ב-PWA. אחרי שהוא נטען, ה-service worker ממוקם בין ה-PWA לבין הרשת, מיירט בקשות ומציג את התגובות המתאימות.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}

בדיקה אם קובץ שירות (service worker) רשום

כדי לבדוק אם רשום service worker, משתמשים בכלים למפתחים בדפדפן המועדף.

בדפדפני Firefox ומבוססי Chromium (Microsoft Edge,‏ Google Chrome או Samsung Internet):

1. פותחים את הכלים למפתחים ואז לוחצים על הכרטיסייה Application (אפליקציה).
2. בחלונית הימנית, בוחרים באפשרות Service Workers.
3. בודקים שכתובת ה-URL של הסקריפט של Service Worker מופיעה עם הסטטוס Activated (הופעל). (מידע נוסף זמין במאמר בנושא מחזור החיים). ב-Firefox, הסטטוס יכול להיות 'פועל' או 'הופסק'.

ב-Safari:

1. לוחצים על פיתוח > Service Workers.
2. בודקים אם יש בתפריט הזה רשומה עם המקור הנוכחי. לחיצה על הרשומה הזו פותחת כלי לבדיקת ההקשר של קובץ השירות.

היקף

התיקייה שבה נמצא ה-service worker קובעת את ההיקף שלו. ‫Service worker שנמצא בנתיב example.com/my-pwa/sw.js יכול לשלוט בכל ניווט בנתיב my-pwa או מתחתיו, למשל example.com/my-pwa/demos/. קובצי שירות יכולים לשלוט רק בפריטים (דפים, קובצי שירות, שנקראים ביחד 'לקוחות') שנמצאים בטווח שלהם. ההיקף הזה חל על כרטיסיות בדפדפן ועל חלונות של אפליקציות PWA.

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

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

מחזור חיים

ל-Service Workers יש מחזור חיים שקובע איך הם מותקנים, בנפרד מההתקנה של ה-PWA.

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

ההתקנה של Service Worker מתבצעת ברקע, בלי לדרוש הרשאת משתמש, גם אם המשתמש לא מתקין את ה-PWA. ‫Service Worker API זמין גם בפלטפורמות שלא תומכות בהתקנת PWA, כמו Safari ו-Firefox במחשבים.

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

אפשר להאזין לאירועים בהיקף הגלובלי של ה-service worker באמצעות האובייקט self:

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

עדכון של service worker

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

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

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

משך החיים של קובץ שירות (service worker)

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

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

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

יכולות

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

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

משאבים

• Service Worker API (MDN)
• גישה של Service Worker
• ‫WebKit Workers לשירותכם
• מודולים של ES ב-Service Workers
• מחזור החיים של Service Worker