CacheQueryOptions מגיעים ל-Chrome 54

Jeff Posnick

אם אתם משתמשים ב-Cache Storage API, בתוך service worker או ישירות מאפליקציות אינטרנט דרך window.caches, יש לנו חדשות טובות: החל מ-Chrome 54, יש תמיכה בקבוצה המלאה של CacheQueryOptions, כך שיהיה קל יותר למצוא את התשובות ששמורות במטמון שאתם מחפשים.

אילו אפשרויות זמינות?

אפשר להגדיר את האפשרויות הבאות בכל קריאה ל-CacheStorage.match() או ל-Cache.match(). אם המדיניות לא מוגדרת, ברירת המחדל של כולן היא false (או undefined למשך cacheName), ואפשר להשתמש במספר אפשרויות בקריאה אחת ל-match().

ignoreSearch

הפרמטר הזה מורה לאלגוריתם ההתאמה להתעלם מהחלק של החיפוש בכתובת URL, שנקרא גם פרמטרים של שאילתה בכתובת ה-URL. האפשרות הזו יכולה להיות שימושית כשיש לכם כתובת URL של מקור שמכילה פרמטרים של שאילתות שמשמשים, למשל, למעקב ב-Analytics, אבל לא משמעותיים מבחינת זיהוי ייחודי של משאב במטמון. לדוגמה, הרבה אנשים נופלים בפח של "המלכודת" הבאה של שירות העבודה:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => cache.add('index.html'))
  );
});

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

קוד כזה פועל כצפוי כשמשתמש מנווט ישירות אל index.html, אבל מה קורה אם באפליקציית האינטרנט שלכם נעשה שימוש בספק ניתוח נתונים כדי לעקוב אחרי קישורים נכנסים, והמשתמש מנווט אל index.html?utm_source=some-referral? כברירת מחדל, העברה של index.html?utm_source=some-referral אל caches.match() לא תחזיר את הערך של index.html. אבל אם הערך של ignoreSearch מוגדר כ-true, אפשר לאחזר את התשובה שצפויה להיות שמורה במטמון, ללא קשר לפרמטרים של השאילתה שהוגדרו:

caches.match(event.request, {ignoreSearch: true})

cacheName

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

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod וגם ignoreVary

ignoreMethod ו-ignoreVary הם קצת יותר ספציפיים מ-ignoreSearch ו-cacheName, אבל הם משמשים למטרות ספציפיות.

ignoreMethod מאפשר להעביר באובייקט Request כל method (POST, PUT וכו') כפרמטר הראשון אל match(). בדרך כלל מותר לשלוח רק בקשות GET או HEAD.

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

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

תמיכה בדפדפנים

השדה CacheQueryOptions רלוונטי רק בדפדפנים שתומכים ב-Cache Storage API. מלבד Chrome ודפדפנים המבוססים על Chromium, התמיכה מוגבלת כרגע ל-Firefox, שכבר תומך באופן מובנה ב-CacheQueryOptions.

מפתחים שרוצים להשתמש ב-CacheQueryOptions בגרסאות של Chrome שקודמות לגרסה 54 יכולים להשתמש בפולימילוי, באדיבות ארתור סטוליאר.