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

ג'ף פוזניק

אחת התכונות של 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 של תיבת העבודה יכולים לזהות זאת ולהחריג שדה גרסה. שני הנכסים האחרים לא כוללים מידע על ניהול גרסאות בכתובות ה-URL שלהם, כך שכלי ה-build של Workbox יוצרים שדה revision נפרד שמכיל גיבוב של תוכן הקובץ המקומי.

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

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

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