如果您在服務工作者中使用 Cache Storage API,或是透過 window.caches
直接從網路應用程式使用,那麼有個好消息:從 Chrome 54 開始,我們支援完整的 CacheQueryOptions
,讓您更輕鬆地找到所需的快取回應。
有哪些選項?
您可以在任何對 CacheStorage.match()
或 Cache.match()
的呼叫中設定下列選項。如未設定,則預設為 false
(cacheName
則為 undefined
),您可以在單一 match()
呼叫中使用多個選項。
ignoreSearch
這會指示比對演算法忽略網址的「搜尋」部分,也就是網址查詢參數。如果來源網址含有用於追蹤 Analytics 等的查詢參數,但這些參數在快取中無法明確識別資源,這項功能就非常實用。舉例來說,許多人已和下列 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
就會派上用場。使用這項功能可讓查詢更有效率 (因為瀏覽器只需檢查一個快取,而非所有快取),並可在多個快取都可能將該網址做為索引鍵時,針對特定網址擷取特定回應。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
可讓您將包含任何 method
(POST
、PUT
等) 的 Request
物件傳入 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
。
如果開發人員想在 54 以下版本的 Chrome 中使用 CacheQueryOptions
,可以使用 polyfill,由 Arthur Stolyar 提供。