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 יכולים להשתמש בpolyfill, באדיבות Arthur Stolyar.