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