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

Jeff Posnick

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

למה כדאי להשתמש ב-Workbox?

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

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

הוספת נכסים למטמון היא רק חלק אחד מהסיפור של ההטמעה מראש – הנכסים נשמרים במטמון, הם צריכים להגיב לבקשות יוצאות. לשם כך מעבד אירוע של fetch ב-Service Worker שיכול לבדוק לאילו כתובות URL יש שנשמר מראש במטמון, ומחזירים את התגובות שנשמרו במטמון באופן מהימן, תוך עקיפה של עמוקה בתהליך. מכיוון שה-Service Worker בודק את המטמון כדי לאתר תגובות (ומשתמשת בהם לפני הרשת), בשיטה שמתמקדת במטמון.

עדכונים יעילים

מניפסט טרום-מטמון מספק ייצוג מדויק של המטמון הצפוי state; אם שילוב של כתובת אתר/גרסה במניפסט משתנה, קובץ שירות (service worker) יודע שהרשומה הקודמת שנשמרה במטמון כבר לא בתוקף, ושהיא צריכה להיות עודכן. נדרשת רק בקשת רשת אחת, המבוצעת באופן אוטומטי על ידי הדפדפן כחלק מ-Service Worker update Check, כדי לקבוע אילו כתובות 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 שהכי הגיוניות לשמור במטמון. הכלל הוא שמירה מראש של כל קוד HTML, JavaScript או CSS שנטען בשלב מוקדם, והוא חיוני שמציג את המבנה הבסיסי של דף נתון.

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

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

כלי ה-build של תיבת העבודה מספקים מידע על מספר הפריטים במטמון וכן את הגודל הכולל של המטען הייעודי (payload) של המטמון מראש.

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