שמירה מראש עם תיבת עבודה

אחת מהתכונות של שירותי העבודה היא היכולת לשמור קבצים במטמון בזמן ההתקנה של שירות העבודה. התהליך הזה נקרא 'אחסון במטמון מראש'. שמירת פריטים במטמון מראש מאפשרת להציג בדפדפן קבצים שנשמרו במטמון בלי להתחבר לרשת. כדאי להשתמש בשמירת פריטים במטמון מראש לנכסים קריטיים שהאתר שלכם זקוק להם גם במצב אופליין: הדף הראשי, סגנונות, תמונה חלופית וסקריפטים חיוניים.

השימוש ב-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 נפרד שמכיל גיבוב של תוכן הקובץ המקומי.

הצגת משאבים שנשמרו במטמון מראש

הוספת נכסים למטמון היא רק חלק אחד מהסיפור של שמירת נכסים מראש – אחרי שהנכסים נשמרים במטמון, הם צריכים להגיב לבקשות יוצאות. לשם כך, צריך להוסיף למעקב האירועים ב-service worker אירוע מסוג fetch, שיוכל לבדוק אילו כתובות 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 עוזרים לכם לדעת כמה פריטים יש במניפסט של האחסון המוקדם, וגם את הגודל הכולל של עומס העבודה של האחסון המוקדם.

מבקרים חוזרים באפליקציית האינטרנט שלכם נהנים בטווח הארוך מהעלות הראשונית של האחסון המוקדם, כי היכולת להימנע מהשימוש ברשת משתלמת במהירות בזכות חיסכון ברוחב הפס לאורך זמן.