اگر از Cache Storage API استفاده میکنید، چه در یک سرویسکار یا مستقیماً از برنامههای وب از طریق window.caches
، یک خبر خوب وجود دارد: با شروع در Chrome 54، مجموعه کامل CacheQueryOptions
پشتیبانی میشود و یافتن پاسخهای ذخیرهشده را آسانتر میکند. به دنبال
چه گزینه هایی در دسترس هستند؟
گزینه های زیر را می توان در هر تماسی با CacheStorage.match()
یا Cache.match()
تنظیم کرد. وقتی تنظیم نمیشود، همه آنها به طور پیشفرض روی false
(یا برای cacheName
undefined
) هستند، و میتوانید از چندین گزینه در یک فراخوانی برای match()
استفاده کنید.
ignoreSearch
این به الگوریتم تطبیق دستور می دهد که بخش جستجوی یک URL را نادیده بگیرد که به پارامترهای جستجوی URL نیز معروف است. این زمانی می تواند مفید باشد که شما یک URL منبع حاوی پارامترهای پرس و جو داشته باشید که برای مثال برای ردیابی تجزیه و تحلیل استفاده می شوند، اما از نظر شناسایی منحصر به فرد یک منبع در حافظه پنهان مهم نیستند. به عنوان مثال، بسیاری از مردم طعمه کارمند خدمات زیر "گوچا" شده اند:
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()
قبلاً روی یک تکی با نام cache عمل می کند.
// 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، در حال حاضر به فایرفاکس محدود شده است، که در حال حاضر به صورت بومی از CacheQueryOptions
پشتیبانی میکند.
توسعهدهندگانی که میخواهند از CacheQueryOptions
در نسخههای قبل از 54 Chrome استفاده کنند، میتوانند از یک polyfill استفاده کنند، با حسن نیت آرتور استولیار .