שמירה במטמון של קובץ שירות (service worker) ושמירה במטמון ב-HTTP

היתרונות והחסרונות של שימוש בלוגיקת תפוגה עקבית או שונה בשכבות של המטמון של קובץ השירות ושל מטמון ה-HTTP.

Jonathan Chen

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

• תרחישים לדוגמה והבדלים בין שמירה במטמון של Service Worker לבין שמירה במטמון HTTP.
• היתרונות והחסרונות של אסטרטגיות תפוגה שונות של שמירה במטמון על ידי עובדי שירות בהשוואה לשיטות רגילות אסטרטגיות לשמירה במטמון HTTP.

סקירה כללית של תהליך השמירה במטמון

ברמה הכללית, דפדפן פועל לפי סדר השמירה במטמון שמופיע בהמשך, כשהוא מבקש משאב:

1. מטמון של Service Worker: ה-Service Worker בודק אם המשאב נמצא במטמון שלו מחליט אם להחזיר את המשאב עצמו על סמך האסטרטגיות המתוכנתות לשמירה במטמון. הערה שזה לא יקרה באופן אוטומטי. צריך ליצור handler של אירועי אחזור ב- Service Worker ויירוט בקשות רשת כדי שהבקשות יתקבלו מהשירות במטמון של העובד ולא ברשת.
2. מטמון HTTP (שנקרא גם מטמון הדפדפן): אם המשאב נמצא ב-HTTP המטמון ועדיין לא פג תוקפו, הדפדפן משתמש באופן אוטומטי ממטמון ה-HTTP.
3. בצד השרת: אם לא נמצא שום דבר במטמון של Service Worker או במטמון ה-HTTP, הדפדפן עובר לרשת כדי לבקש את המשאב. אם המשאב לא נשמר במטמון ב-CDN, הבקשה חייבת לחזור עד לשרת המקור.

שמירת שכבות במטמון

שמירה במטמון של Service Worker

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

שליטה במטמון של Service Worker

קובץ שירות (service worker) מיירט בקשות HTTP באמצעות אירוע מאזינים (בדרך כלל האירוע fetch). הזה קטע קוד מדגים את הלוגיקה של שמירה במטמון של שמירה במטמון.

מומלץ מאוד להשתמש ב-Workbox כדי להימנע להמציא מחדש את הגלגל. לדוגמה, אפשר: רישום נתיבי כתובות URL של משאבים בשורה אחת של קוד של ביטוי רגולרי (regex).

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);

אסטרטגיות ותרחישים לדוגמה לשמירה במטמון של Service Worker

בטבלה הבאה מפורטות אסטרטגיות נפוצות לשמירה במטמון של קובצי שירות (service worker) ומתי כל שיטה שימושית.

יתרונות נוספים של שמירה במטמון של קובצי שירות (service worker)

בנוסף לשליטה פרטנית בלוגיקת השמירה במטמון, שמירה במטמון של Service Worker כוללת גם:

• יותר זיכרון ונפח אחסון עבור המקור: הדפדפן מקצה מטמון HTTP משאבים על בסיס מקור. בעוד במילים אחרות, אם יש לכם מספר תת-דומיינים, כולם חולקים את אותו מטמון HTTP. אין להבטיח שהתוכן של המקור/הדומיין יישאר במטמון ה-HTTP למשך זמן רב. עבור לדוגמה, משתמש עשוי למחוק באופן סופי את המטמון על ידי ניקוי ידני מממשק המשתמש של ההגדרות של הדפדפן, או שמפעילה טעינה קשיחה מחדש של הדף. עם מטמון של Service Worker תוכלו שיש סבירות גבוהה שהתוכן שנשמר במטמון יישאר במטמון. ראו קבוע אחסון.
• גמישות רבה יותר עם רשתות רעות או עם חוויות במצב אופליין: בעזרת מטמון ה-HTTP אתם יש להם רק אפשרות בינארית: אם המשאב נשמר במטמון או לא. עם שמירה במטמון של Service Worker אפשר לצמצם את ה"שיבושים" קלים הרבה יותר קל (בעזרת האסטרטגיה "sold-while-reverify"), מציעים חוויה מלאה אופליין (עם האסטרטגיה 'מטמון בלבד') ביניהם, כגון ממשקי משתמש מותאמים אישית עם חלקים בדף שמגיעים מהמטמון של Service Worker חלקים מסוימים הוחרגו (באמצעות האסטרטגיה 'הגדרת מטפל קליטה') במקרים הרלוונטיים.

שמירת HTTP במטמון

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

שימוש בשמירת HTTP במטמון פירושו הסתמכות על השרת כדי לקבוע מתי לשמור משאב ואיך להשתמש בו. ארוך.

שליטה בתפוגה של מטמון HTTP בעזרת כותרות של תגובת HTTP

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

אסטרטגיות ותרחישים לדוגמה של שמירת HTTP במטמון

שמירה במטמון HTTP הרבה יותר פשוטה משמירה במטמון של Service Worker, כי שמירת HTTP במטמון פועלת רק לוגיקה של תפוגת משאבים (TTL) מבוססת-זמן. צפייה באילו ערכים של כותרות תגובה כדאי להשתמש? וסיכום כדי ללמוד עוד על אסטרטגיות לשמירה במטמון של HTTP.

עיצוב לוגיקת התפוגה של המטמון

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

התקלה הבאה ממחישה איך שמירה במטמון של קובץ שירות (service worker) ושמירה במטמון HTTP פועלות בפעולה תרחישים שונים:

לוגיקת תפוגה עקבית לכל שכבות המטמון

כדי להדגים את היתרונות והחסרונות, נבחן 3 תרחישים: בטווח הארוך, בטווח הבינוני, לטווח הקצר.

תרחיש: שמירה במטמון לטווח ארוך (מטמון, חזרה לרשת)

• כאשר משאב שמור במטמון תקף (פחות מ-30 ימים): ה-Service Worker מחזיר את המטמון משאב באופן מיידי, מבלי לגשת לרשת.
• כשפג התוקף של משאב שנשמר במטמון (יותר מ-30 יום): ה-Service Worker עובר לרשת כדי ומאחזרים את המשאב. לדפדפן אין עותק של המשאב במטמון ה-HTTP שלו, לכן עובר לצד השרת של המשאב.

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

תרחיש: שמירה במטמון לטווח בינוני (מצב מושהה בזמן אימות מחדש)

• כאשר משאב שמור במטמון תקף (פחות מיום אחד): ה-Service Worker מחזיר את המטמון המשאב באופן מיידי, ועוברים לרשת כדי לאחזר את המשאב. בדפדפן יש עותק של המשאב במטמון ה-HTTP שלו, כך שהוא מחזיר את העותק הזה ל-service worker.
• כשפג התוקף של משאב שנשמר במטמון (יותר מיום אחד): ה-Service Worker מחזיר את המטמון המשאב באופן מיידי, ועוברים לרשת כדי לאחזר את המשאב. בדפדפן אין עותק של המשאב במטמון ה-HTTP שלו, כך שהוא עובר לצד השרת כדי לאחזר את המשאב.

חסרון: ה-Service Worker דורש עקיפת מטמון (cache busting) כדי לעקוף את מטמון ה-HTTP ב- כדי להפיק את המרב מ'אימות מחדש'. בכל פעימה.

תרחיש: שמירה במטמון לטווח קצר (חזרה של הרשת למטמון)

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

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

Service Worker בכל התרחישים

בכל התרחישים, המטמון של ה-Service Worker עדיין יכול להחזיר משאבים שנשמרו במטמון כשהרשת ולא יציב. מצד שני, מטמון ה-HTTP לא אמין כשהרשת לא יציבה או מושבתת.

לוגיקת תפוגה שונה של המטמון בשכבות ה-HTTP ובמטמון של Service Worker

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

תרחיש: שמירה במטמון לטווח ארוך (מטמון, חזרה לרשת)

• כאשר משאב שנשמר במטמון תקף למטמון של קובץ השירות (service worker) (<= 90 ימים): השירות worker יחזיר מיד את המשאב שנשמר במטמון.
• כשפג התוקף של משאב שנשמר במטמון במטמון של ה-Service Worker (יותר מ-90 יום): השירות העובד עובר לרשת כדי לאחזר את המשאב. לדפדפן אין עותק של במטמון ה-HTTP שלו, כך שהוא עובר לצד השרת.

יתרונות וחסרונות:

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

תרחיש: שמירה במטמון ברמת אמצע (מצב מושהה בזמן אימות מחדש)

• כאשר משאב שנשמר במטמון תקף למטמון של קובץ השירות (service worker) (<= 30 ימים): השירות worker יחזיר מיד את המשאב שנשמר במטמון.
• כשפג התוקף של משאב שנשמר במטמון במטמון של ה-Service Worker (יותר מ-30 ימים): השירות ה-Worker עובר לרשת של המשאב. לדפדפן אין עותק של המשאב ב- את מטמון ה-HTTP שלו, כך שהוא עובר בצד השרת.

יתרונות וחסרונות:

• Pro: המשתמשים מקבלים תגובה מיידית כש-Service Worker מחזיר משאבים שנשמרו במטמון באופן מיידי.
• Pro: קובץ השירות (service worker) יכול לוודא שהבקשה הבאה של כתובת URL נתונה משתמשת תגובה חדשה מהרשת, הודות לאימות מחדש שמתרחש "ברקע".
• חסרון: נדרשת אסטרטגיית שמירה במטמון של Service Worker מוגדרת היטב.

תרחיש: שמירה במטמון לטווח קצר (חזרה של הרשת למטמון)

• כאשר משאב שנשמר במטמון תקף במטמון של קובץ השירות (service worker) (פחות מיום אחד): השירות ה-Worker עובר לרשת של המשאב. הדפדפן מחזיר את המשאב מה-HTTP שמירה במטמון, אם הוא מופיע. אם הרשת מושבתת, ה-Service Worker מחזיר את המשאב מטמון של קובץ שירות (service worker)
• כשפג התוקף של משאב שנשמר במטמון במטמון של Service Worker (יותר מיום אחד): השירות העובד עובר לרשת כדי לאחזר את המשאב. הדפדפן מאחזר את המשאבים דרך כי פג התוקף של גרסת המטמון במטמון ה-HTTP שלה.

יתרונות וחסרונות:

• Pro: כשהרשת לא יציבה או מושבתת, ה-Service Worker מחזיר קובץ שמור את המשאבים באופן מיידי.
• חסרון: ה-Service Worker דורש עקיפת מטמון (cache busting) כדי לעקוף את המטמון של HTTP וגם הגדרה כ'רשת תחילה' בקשות.

סיכום

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

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

מידע נוסף

• אמינות הרשת
• מניעה של בקשות רשת לא נחוצות באמצעות מטמון ה-HTTP
• Codelab של מטמון HTTP
• מדידת ההשפעה של קובצי שירות (service worker) בעולם האמיתי
• בקרת המטמון לעומת תאריך התפוגה