CacheQueryOptions מגיעים ל-Chrome 54

ג'ף פוזניק

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

מהן האפשרויות הזמינות?

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

ignoreSearch

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

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.