שמירת משאבים במטמון במהלך זמן ריצה

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

ב-Workbox, אפשר לטפל בשמירה במטמון של זמן ריצה עבור נכסים באמצעות המודול workbox-routing כדי להתאים מסלולים, ולטפל באסטרטגיות שמירה במטמון עבורם באמצעות המודול workbox-strategies.

אסטרטגיות של שמירה במטמון

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

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

אפשר להחיל את האסטרטגיות האלה על בקשות נבחרות באמצעות שיטות שמוצעות על ידי workbox-routing.

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

workbox-routing חושפת method registerRoute כדי להתאים מסלולים ולטפל בהם באמצעות אסטרטגיית שמירה במטמון. registerRoute מקבל אובייקט Route שמקבל שני ארגומנטים:

1. מחרוזת, ביטוי רגולרי או קריאה חוזרת (callback) של התאמה כדי לציין קריטריונים של התאמת מסלול.
2. רכיב handler של המסלול – בדרך כלל אסטרטגיה שמסופקת על ידי workbox-strategies.

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

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

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

// A new route that matches same-origin image requests and handles
// them with the cache-first, falling back to network strategy:
const imageRoute = new Route(({ request, sameOrigin }) => {
  return sameOrigin && request.destination === 'image'
}, new CacheFirst());

// Register the new route
registerRoute(imageRoute);

שימוש בכמה מטמון

תיבת העבודה מאפשרת לקבץ תגובות שנשמרו במטמון למכונות Cache נפרדות באמצעות האפשרות cacheName שזמינה באסטרטגיות המקובצות.

בדוגמה הבאה, התמונות משתמשות באסטרטגיה של אימות לא פעיל בזמן אימות מחדש, ואילו נכסי CSS ו-JavaScript משתמשים באסטרטגיית רשת לשמירה במטמון. המסלול של כל נכס שומר את התגובות במטמון נפרד על ידי הוספת המאפיין cacheName.

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

// Handle images:
const imageRoute = new Route(({ request }) => {
  return request.destination === 'image'
}, new StaleWhileRevalidate({
  cacheName: 'images'
}));

// Handle scripts:
const scriptsRoute = new Route(({ request }) => {
  return request.destination === 'script';
}, new CacheFirst({
  cacheName: 'scripts'
}));

// Handle styles:
const stylesRoute = new Route(({ request }) => {
  return request.destination === 'style';
}, new CacheFirst({
  cacheName: 'styles'
}));

// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
registerRoute(stylesRoute);