אם אתם משתמשים ב-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.