אחת התכונות של Service Worker היא האפשרות לשמור קבצים במטמון במהלך ההתקנה של ה-Service Worker. התהליך הזה נקרא 'שמירה מראש במטמון'. שמירה במטמון מאפשרת להציג קבצים שנשמרו במטמון בדפדפן בלי לעבור לרשת. כדאי להשתמש בשמירה מראש במטמון לנכסים חיוניים שהאתר שלכם צריך, גם כשהוא אופליין: הדף הראשי, סגנונות, תמונה חלופית וסקריפטים חיוניים.
למה כדאי להשתמש ב-Workbox?
השימוש ב-Workbox לשמירה מראש הוא אופציונלי. אתם יכולים לכתוב קוד משלכם לשמירה מראש במטמון של נכסים קריטיים בזמן ההתקנה של Service Worker. היתרון העיקרי של השימוש ב-Workbox הוא ניהול גרסאות חדש לגמרי. יהיה הרבה יותר קשה לעדכן נכסים שנשמרו מראש במטמון באמצעות Workbox, מאשר אם הייתם צריכים לנהל את ניהול הגרסאות והעדכון של הקבצים האלה בעצמכם.
מניפסטים שהוגדרו מראש במטמון
השמירה במטמון מבוססת על רשימה של כתובות URL ומידע על ניהול הגרסאות של כל כתובת URL. בצירוף כל המידע הזה, המידע הזה נקרא מניפסט שנשמר מראש. המניפסט הוא 'מקור האמת' למצב של כל מה שאמור להיות בקובץ מראש של גרסה נתונה של אפליקציית אינטרנט. מניפסט מראש, בפורמט של Workbox, נראה בערך כך:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
כשמתקינים את Service Worker, נוצרות שלוש רשומות מטמון ב-Cache Storage לכל אחת משלוש כתובות ה-URL הרשומות. כתובת ה-URL של הנכס הראשון כוללת מידע על ניהול גרסאות (app הוא שם הקובץ בפועל ו-.abcd1234 מכיל את פרטי ניהול הגרסאות, ממש לפני סיומת הקובץ .js). כלי ה-build של Workbox יכולים לזהות זאת ולהחריג שדה גרסה. שני הנכסים האחרים לא כוללים מידע על ניהול גרסאות בכתובות ה-URL שלהם, כך שכלי ה-build של Workbox יוצרים שדה revision נפרד שמכיל גיבוב (hash) של תוכן הקובץ המקומי.
הצגת משאבים שנשמרו מראש
הוספת נכסים למטמון היא רק חלק אחד מהסיפור של ההטמעה מראש – אחרי שהנכסים נשמרים במטמון, הם צריכים להגיב לבקשות יוצאות. לשם כך, צריך להשתמש ב-event listener fetch ב-Service Worker שיכול לבדוק אילו כתובות URL נשמרו מראש במטמון ולהחזיר את התגובות שנשמרו במטמון באופן מהימן, וכך לעקוף את הרשת בתהליך. מכיוון שה-Service Worker בודק את המטמון כדי לאתר תגובות (ומשתמש בהן לפני הרשת), היא נקראת אסטרטגיה לשמירה על המטמון.
עדכונים יעילים
מניפסט מראש במטמון מספק ייצוג מדויק של מצב המטמון הצפוי. אם שילוב של כתובת URL/גרסה במניפסט משתנה, קובץ שירות (service worker) יודע שהרשומה הקודמת שנשמרה במטמון כבר לא בתוקף וצריך לעדכן אותה. כדי לקבוע אילו כתובות URL שנשמרו מראש במטמון, צריך רק בקשת רשת אחת, שמופעלת באופן אוטומטי על ידי הדפדפן כחלק מבדיקת העדכון של קובץ השירות.
עדכונים למשאבים שנשמרו מראש
כשמפרסמים גרסאות חדשות של אפליקציית האינטרנט לאורך זמן, צריך לעדכן את כתובות ה-URL שנשמרו מראש במטמון, לשמור מראש נכסים חדשים במטמון ולמחוק רשומות מיושנות. כל עוד ממשיכים ליצור מניפסט מלא לשמירה מראש בכל פעם שאתם בונים מחדש את האתר, המניפסט הזה משמש כ'מקור האמת' למצב של המטמון מראש בכל שלב.
אם יש כתובת URL קיימת עם שדה גרסה חדש, או אם נוספו כתובות URL או הוסרו מהמניפסט, זה סימן לכך שה-Service Worker צריך לבצע עדכונים כחלק מגורמים מטפלים באירועים install ו-activate. לדוגמה, אם ביצעתם שינויים באתר ויצרתם אותו מחדש, יכול להיות שבמניפסט האחרון של המטמון מראש בוצעו השינויים הבאים:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
כל אחד מהשינויים האלו מורה ל-Service Worker שצריך לבצע בקשות חדשות כדי לעדכן רשומות קודמות שנשמרו במטמון ('offline.svg' ו-'index.html') וכדי לשמור כתובות URL חדשות במטמון ('app.ffaa4455.js'), וגם מחיקות כדי לנקות כתובות URL שלא נמצאות יותר בשימוש ('app.abcd1234.js').
חוויית התקנה אמיתית של 'חנות אפליקציות'
יתרון נוסף של שמירה מראש במטמון הוא שניתן לספק למשתמשים חוויה שלא הייתה מצליחה להשיג מחוץ להתקנה של 'חנות אפליקציות'. כשמשתמש מבקר בדף כלשהו באפליקציית האינטרנט שלכם בפעם הראשונה, אפשר לשמור מראש את כל כתובות ה-URL שנדרשות כדי להציג מראש כל אחת מהתצוגות של אפליקציית האינטרנט, בלי שתצטרכו להמתין עד שהוא יבקר בכל תצוגה מפורטת בנפרד.
כשמשתמש מתקין אפליקציה, הוא מצפה שכל חלק יוצג במהירות, ולא רק את התצוגות הקודמות שאליו הוא עבר. השימוש במטמון מביא את אותה החוויה באפליקציות אינטרנט.
אילו מהנכסים צריך לשמור מראש?
תוכלו לחזור למדריך זיהוי התוכן שנטען כדי לקבל תמונה טובה לגבי כתובות ה-URL שהכי כדאי לשמור במטמון. הכלל הוא לשמור מראש כל קוד HTML, JavaScript או CSS שנטענים בשלב מוקדם, והוא חיוני להצגת המבנה הבסיסי של דף נתון.
עדיף להימנע משמירה מראש במטמון של מדיה או נכסים אחרים שנטענים מאוחר יותר (אלא אם הדבר חיוני לפונקציונליות של אפליקציית האינטרנט). במקום זאת, כדאי להשתמש באסטרטגיית שמירה במטמון בזמן ריצה כדי לוודא שהנכסים האלה נשמרים במטמון בכל מקום.
חשוב לזכור ששמירה מראש במטמון כוללת שימוש ברוחב פס ובאחסון של הרשת במכשיר של המשתמש (בדיוק כמו שמתקינים אפליקציה מחנות אפליקציות). באחריותכם כמפתח לשמור מראש במטמון, ולהימנע ממניפסט מתנפח מראש של המטמון.
כלי ה-build של תיבת העבודה מספקים מידע על מספר הפריטים במניפסט של המטמון מראש, וגם את הגודל הכולל של המטען הייעודי (payload) של המטמון מראש.
מבקרים חוזרים באפליקציית האינטרנט יפיקו תועלת בטווח הארוך מהעלות מראש של שמירה במטמון, כי היכולת שהיא מאפשרת להימנע מהרשת משלמת במהירות ברוחב פס שמור לאורך זמן.