המשתמשים מצפים שאפליקציות יופעלו באופן מהימן בחיבורי רשת איטיים או רעים, או גם בלי חיבור לאינטרנט. הם מצפים לקבל את התוכן שהם יצרו איתו אינטראקציה לאחרונה, כמו טראקים של מדיה, כרטיסים ותוכניות טיול, שיהיו זמינים לשימוש. כשהבקשה לא מתאפשרת, הם מצפים שהאפליקציה תודיע להם במקום נכשלים או קורסים באופן שקט. והם רוצים שכל זה יקרה במהירות. בתור תוכלו לראות בעוד אלפיות שנייה מניבות מיליונים, גם שיפור של 0.1 שניות בזמני הטעינה יכול לשפר את ההמרות בשיעור של עד 10%. קובצי שירות (service worker) הם הכלים שמאפשרים ל-Progressive Web App (PWA) לעמוד בקצב של של המשתמשים שלך לציפיות שלכם.
כשאפליקציה מבקשת משאב שמכוסה על ידי היקף ההרשאות של Service Worker, Service Worker מיירט את הבקשה ומתפקד כשרת proxy של הרשת, גם אם המשתמש לא מחובר לאינטרנט. לאחר מכן הוא יכול להחליט אם יש להציג את המשאב באמצעות Cache Storage API, מציגים אותו מהרשת כאילו לא קובץ שירות (service worker) או ליצור אותו מאלגוריתם מקומי. כך אפשר מספקות חוויה באיכות גבוהה כמו זו של אפליקציית פלטפורמה, גם כאשר האפליקציה במצב אופליין.
רישום Service Worker
לפני ש-Service Worker ישלוט בשליטה על הדף שלכם, הוא צריך להיות רשום ב- ב-PWA. כלומר, בפעם הראשונה שבה משתמש פותח את ה-PWA, כל הרשת שלו הבקשות עוברות ישירות לשרת שלכם כי ל-Service Worker אין עדיין בשליטה בדפים שלך.
אחרי שבודקים אם הדפדפן תומך ב-Service Worker API, ה-PWA יכולה רושמים קובץ שירות (service worker). לאחר הטעינה, קובץ השירות (service worker) מגדיר את עצמו בין ה-PWA לבין הרשת, יירוט בקשות והצגת את התשובות התואמות.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
אימות אם Service Worker רשום
כדי לבדוק אם קובץ שירות (service worker) רשום, צריך להשתמש בכלים למפתחים ב דפדפן מועדף.
בדפדפנים שמבוססים על Firefox ו-Chromium (Microsoft Edge, Google Chrome או אינטרנט של Samsung):
- פותחים את הכלים למפתחים ולוחצים על הכרטיסייה אפליקציה.
- בחלונית הימנית, בוחרים באפשרות Service Workers.
- בודקים שכתובת ה-URL של הסקריפט של Service Worker מופיעה עם הסטטוס 'מופעל'. (מידע נוסף זמין במאמר מחזור חיים). ב-Firefox, הסטטוס יכול להיות 'פועל'. או "Stop".
ב-Safari:
- לוחצים על פיתוח > Service Workers
- בתפריט הזה בודקים רשומה עם המקור הנוכחי. לחיצה על הרשומה פותח סוקר מעל ההקשר של קובץ השירות (service worker).
היקף
התיקייה שבה נמצא ה-Service Worker קובעת את ההיקף שלה. קובץ שירות (service worker)
מגורים ב-example.com/my-pwa/sw.js יכולים לשלוט בכל סוג ניווט שנמצא בכתובת
הנתיב my-pwa, למשל example.com/my-pwa/demos/. קובצי שירות (service worker) יכולים
שולטים רק בפריטים (דפים, עובדים, ביחד "לקוחות") שבהיקף ההרשאות שלהם.
ההיקף הזה רלוונטי לכרטיסיות בדפדפן ולחלונות PWA.
מותר להשתמש רק בקובץ שירות (service worker) אחד לכל היקף. כש-Service Worker פעיל והיא פועלת, בדרך כלל רק מופע אחד זמין, לא משנה כמה לקוחות (חלונות PWA או כרטיסיות בדפדפן) שמורים בזיכרון.
ב-Safari יש ניהול היקף מורכב יותר, שנקרא מחיצות, ומשפיע על האופן שבו היקפים פועלים עם מסגרות iframe חוצות-דומיינים. למידע נוסף על WebKit מומלץ לקרוא את הפוסט בבלוג שלו.
מחזור חיים
ל-Service Worker יש מחזור חיים שקובע את אופן ההתקנה שלהם, בנפרד מהתקנת ה-PWA.
מחזור החיים של Service Worker מתחיל ברישום 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
object:
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 worker) מעודכנים כשהדפדפן מזהה אותם השולטת בלקוח ובגרסה החדשה של קובץ Service Worker השרתים שונים זה מזה בבייטים.
לאחר התקנה מוצלחת, ה-Service Worker החדש ימתין להפעלה עד ה-Service Worker הישן כבר לא שולט בלקוחות כלשהם. המצב הזה נקרא "בהמתנה", וזו הדרך שבה הדפדפן מוודא שרק גרסה אחת של ה-service worker פועל בכל פעם.
רענון הדף או פתיחה מחדש של ה-PWA לא יגרמו ל-Service Worker החדש לעבור בקרה. המשתמש חייב לסגור את כל הכרטיסיות והחלונות או לצאת מהם באמצעות קובץ ה-Service worker הנוכחי ואז לנווט חזרה כדי לתת ל-Service Worker החדש בקרה. מידע נוסף מופיע במאמר מחזור החיים של Service Worker.
משך החיים של Service Worker
קובץ שירות (service worker) מותקן ורשום יכול לנהל את כל בקשות הרשת במסגרת ההיקף שלו. הוא פועל בשרשור משלו, עם הפעלה וסיום נשלטים על ידי הדפדפן, מה שמאפשר לו לפעול עוד לפני שה-PWA נפתחת או לאחר הסגירה. קובצי שירות (service worker) פועלים בשרשור משלהם, אבל במצב בזיכרון יכול להיות שה-Service Worker לא יעצור, לכן חשוב לוודא שכל מה שאתם רוצים לשימוש חוזר בכל הרצה זמינה ב-IndexedDB או אחסון מתמיד.
אם הוא עדיין לא פועל, קובץ שירות (service worker) מתחיל בכל פעם שנשלחת בקשת רשת נשלח בהיקף שלו, או כשהוא מקבל אירוע טריגר כמו אירוע תקופתי סנכרון ברקע או הודעה.
עובדי שירות נסגרים אם הם לא היו פעילים במשך מספר שניות, או במקרה הם עסוקים כבר יותר מדי זמן. התזמון משתנה בין דפדפנים שונים. אם ה-service worker הסתיים ומתרחש אירוע שהתחיל אותו, מופעלת מחדש.
יכולות
קובץ שירות (service worker) רשום ופעיל משתמש בשרשור עם מחזור החיים של ביצוע מה-thread הראשי של ה-PWA. אבל, כברירת מחדל, לקובץ Service Worker עצמו אין התנהגות. הוא לא ישמור במטמון ולא יציג משאבים; אלה הדברים שהקוד צריך לעשות. תגלו איך לאחר הפרקים.
היכולות של Service Worker לא מתאימות רק לשרת proxy או למילוי בקשות HTTP. תכונות אחרות זמינות מעל הטלפון למטרות אחרות, כמו רקע ביצוע קוד, התראות באינטרנט ועיבוד תשלומים. נדבר על התוספות האלה בקטע יכולות.