המשתמשים מצפים שאפליקציות יתחילו לפעול באופן מהימן בחיבורים לרשת איטיים או רעועים, או גם במצב אופליין. הם מצפים שהתוכן שהם יצרו איתו אינטראקציה לאחרונה, כמו טראקים של מדיה או כרטיסים ומסלולי נסיעה, יהיה זמין וניתנים לשימוש. כשהבקשה לא מתאפשרת, הם מצפים שהאפליקציה תיידע אותם במקום להיכשל או לקרוס בטעות. והם רוצים שכל זה יקרה במהירות. כמו שאפשר לראות באלפיות שנייה מרוויחים מיליונים, גם שיפור של 0.1 שנייה בזמני הטעינה יכול לשפר את ההמרות בשיעור של עד 10%. קובצי שירות (service worker) הם הכלי שמאפשר למשתמשים שלך לעמוד בציפיות של המשתמשים ב-Progressive Web App (PWA).
כשאפליקציה מבקשת משאב שמכוסה על ידי ההיקף של קובץ השירות (service worker), הוא מיירט את הבקשה ופועל כשרת proxy של רשת, גם אם המשתמש במצב אופליין. לאחר מכן הוא יכול להחליט אם להשתמש במשאב מהמטמון באמצעות Cache Storage API, להגיש אותו מהרשת כאילו אין קובץ שירות (service worker) פעיל או ליצור אותו מאלגוריתם מקומי. כך תוכלו לספק חוויה איכותית כמו זו של אפליקציית פלטפורמה, גם כשהאפליקציה במצב אופליין.
רישום קובץ שירות (service worker)
כדי שה-Service Worker יקבל שליטה על הדף, הוא צריך להיות רשום ב-PWA. כלומר, בפעם הראשונה שמשתמש פותח את ה-PWA, כל בקשות הרשת שלו מגיעות ישירות לשרת שלכם, כי ל-Service Worker אין עדיין שליטה בדפים שלכם.
אחרי שבודקים אם הדפדפן תומך ב-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):
- פותחים את הכלים למפתחים ולוחצים על הכרטיסייה אפליקציה.
- בחלונית הימנית, בוחרים באפשרות Service Workers.
- מוודאים שכתובת ה-URL של הסקריפט של ה-Service Worker מופיעה עם הסטטוס 'מופעל'. (למידע נוסף, ראו מחזור חיים). ב-Firefox, הסטטוס יכול להיות 'פועל' או 'נעצר'.
ב-Safari:
- לוחצים על פיתוח > Service Workers.
- חפש בתפריט הזה רשומה עם המקור הנוכחי. לחיצה על הרשומה תפתח בודק את ההקשר של ה-Service Worker.
היקף
התיקייה שבה נמצא ה-Service Worker קובעת את ההיקף שלה. קובץ שירות (service worker) שנמצא ב-example.com/my-pwa/sw.js יכול לשלוט בכל ניווט במסלול my-pwa או מתחתיו, כמו example.com/my-pwa/demos/. עובדי שירות יכולים לשלוט רק בפריטים (דפים, עובדים, יחד "לקוחות") שבהיקף שלהם.
ההיקף הזה רלוונטי לכרטיסיות בדפדפן ולחלונות של PWA.
מותר להשתמש רק בקובץ שירות אחד לכל היקף. כש-Service Worker פעיל ופועל, בדרך כלל רק מכונה אחת זמינה, ללא קשר למספר הלקוחות (חלונות PWA או כרטיסיות דפדפן) שנמצאים בזיכרון.
ב-Safari יש ניהול היקפים מורכב יותר, שנקרא מחיצות, ומשפיע על האופן שבו היקפים עובדים עם מסגרות iframe בכמה דומיינים. לפרטים נוספים על ההטמעה של WebKit, אפשר לקרוא את הפוסט בבלוג שלהם.
מחזור חיים
ל-Service Workers יש מחזור חיים שקובע את אופן ההתקנה שלהם, בנפרד מהתקנת ה-PWA.
מחזור החיים של קובץ השירות מתחיל ברישום שלו. לאחר מכן הדפדפן ינסה להוריד ולנתח את קובץ ה-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 worker) מתעדכנים כשהדפדפן מזהה ש-Service Worker ששולט בלקוח שונה מ-30% בין הגרסה החדשה של קובץ ה-Service Worker מהשרת.
אחרי התקנה מוצלחת, ה-Service Worker החדש ימתין להפעלה עד שה-Service Worker הישן לא ישלוט יותר על אף לקוח. המצב הזה נקרא 'בהמתנה', וכך הדפדפן מבטיח שרק גרסה אחת של ה-service worker תפעל בכל פעם.
רענון דף או פתיחה מחדש של ה-PWA לא יעניקו ל-Service Worker החדש שליטה. המשתמש צריך לסגור את כל הכרטיסיות והחלונות באמצעות ה-Service Worker הנוכחי או לצאת ממנו, ואז לנווט חזרה כדי לתת ל-Service Worker החדש שליטה. למידע נוסף, ראו מחזור החיים של Service Worker.
משך החיים של קובץ שירות (service worker)
קובץ שירות (service worker) מותקן ורשום יכול לנהל את כל בקשות הרשת במסגרת ההיקף שלו. הוא פועל ב-thread משלו, וההפעלה והסגירה בשליטת הדפדפן, כך שהוא יכול לפעול עוד לפני שה-PWA נפתח או אחרי שהוא נסגר. קובצי שירות (service worker) רצים ב-thread משלהם, אבל יכול להיות שמצב הזיכרון לא יישמר בין הרצה של Service Worker, לכן חשוב לוודא שכל מה שרוצים לעשות שימוש חוזר בכל הרצה זמין ב-IndexedDB או באחסון קבוע אחר.
אם הוא עדיין לא פועל, ה-Service Worker מתחיל בכל פעם שנשלחת בקשת רשת במסגרת ההיקף שלה, או כשהוא מקבל אירוע מפעיל כמו סנכרון תקופתי ברקע או הודעת דחיפה.
קובצי שירות (service worker) נסגרים אם הם לא היו פעילים למשך כמה שניות, או אם הם היו עסוקים יותר מדי זמן. משך הזמן הזה משתנה מדפדפנים שונים. אם קובץ שירות (service worker) נסגר ומתרחש אירוע שהפעיל אותו, הוא יופעל מחדש.
יכולות
קובץ שירות (service worker) רשום ופעיל משתמש ב-thread עם מחזור חיים של ביצוע שונה לגמרי מה-thread הראשי של ה-PWA. עם זאת, כברירת מחדל, לקובץ ה-service worker עצמו אין התנהגות. הוא לא ישמור משאבים ולא יציג אותם. אלו פעולות שהקוד צריך לעשות. תוכלו לגלות איך עושים זאת בפרקים הבאים.
היכולות של Service Worker לא חלות רק על שרת Proxy או על הצגת בקשות HTTP. בנוסף, יש תכונות נוספות לממשק הזה למטרות אחרות, כמו ביצוע קוד ברקע, התראות באינטרנט ועיבוד תשלומים. נדון בתוספות האלה בחלק יכולות.