אחת מהתכונות של שירותי העבודה היא היכולת לשמור קבצים במטמון בזמן ההתקנה של שירות העבודה. התהליך הזה נקרא 'שמירה מראש במטמון'. שמירת פריטים במטמון מראש מאפשרת להציג בדפדפן קבצים שנשמרו במטמון בלי להתחבר לרשת. כדאי להשתמש במטמון מראש לנכסים קריטיים שהאתר צריך גם במצב אופליין: הדף הראשי, סגנונות, תמונה חלופית וסקריפטים חיוניים.
למה כדאי להשתמש ב-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, נוצרות שלוש רשומות במטמון באחסון המטמון, לכל אחת משלושת כתובות ה-URL שצוינו. המידע על הגרסאות של הנכס הראשון כבר כלול בכתובת ה-URL שלו (app הוא שם הקובץ בפועל, ו-.abcd1234 מכיל את פרטי הגרסאות, ממש לפני סיומת הקובץ .js). כלי ה-build של Workbox יכולים לזהות את זה ולהחריג שדה של גרסה. שני הנכסים האחרים לא כוללים פרטי גרסאות בכתובות ה-URL שלהם, לכן כלי ה-build של Workbox יוצרים שדה revision נפרד שמכיל גיבוב של תוכן הקובץ המקומי.
הצגת משאבים שנשמרו במטמון מראש
הוספת נכסים למטמון היא רק חלק אחד מהסיפור של שמירת נכסים מראש – אחרי שהנכסים נשמרים במטמון, הם צריכים להגיב לבקשות יוצאות. לשם כך, צריך להשתמש ב-event listener fetch ב-Service Worker שיכול לבדוק אילו כתובות URL נשמרו מראש במטמון ולהחזיר את התגובות שנשמרו במטמון באופן מהימן, וכך לעקוף את הרשת בתהליך. מכיוון שה-Service Worker בודק את המטמון כדי לאתר תגובות (ומשתמש בהן לפני הרשת), היא נקראת אסטרטגיה לשמירה על המטמון.
עדכונים יעילים
מניפסט שמאוחסן במטמון מספק ייצוג מדויק של מצב המטמון הצפוי. אם שילוב של כתובת URL/גרסה במניפסט משתנה, ידוע ל-service worker שהרשומה הקודמת ששמורה במטמון כבר לא תקפה, וצריכה להתעדכן. כדי לקבוע אילו כתובות URL שנשמרו במטמון צריך לרענן, נדרשת רק בקשת רשת אחת, שהדפדפן שולח באופן אוטומטי כחלק מבדיקת העדכון של ה-service worker.
עדכונים למשאבים שנשמרו במטמון מראש
ככל שתוציאו גרסאות חדשות של אפליקציית האינטרנט לאורך זמן, תצטרכו לעדכן את כתובות ה-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 של Workbox עוזרים לכם לדעת כמה פריטים יש במניפסט של האחסון המוקדם, וגם את הגודל הכולל של עומס העבודה של האחסון המוקדם.
מבקרים חוזרים באפליקציית האינטרנט שלכם נהנים בטווח הארוך מהעלות הראשונית של האחסון המוקדם, כי היכולת להימנע מהשימוש ברשת משתלמת במהירות בזכות חיסכון ברוחב הפס לאורך זמן.