Chrome 54에 CacheQueryOptions 도입

서비스 워커 내에서 또는 window.caches를 통해 웹 앱에서 직접 Cache Storage API를 사용하는 경우 좋은 소식이 있습니다. 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-referralcaches.match()에 전달하면 index.html 항목이 반환되지 않습니다. 하지만 ignoreSearchtrue로 설정된 경우에는 설정된 쿼리 매개변수와 관계없이 예상되는 캐시된 응답을 검색할 수 있습니다.

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName는 캐시가 여러 개 있고 하나의 특정 캐시에 응답을 저장하려는 경우에 유용합니다. 이를 사용하면 쿼리가 더 효율적일 수 있습니다 (브라우저가 모든 캐시가 아닌 하나의 캐시 내부만 확인하면 되기 때문). 또한 여러 캐시가 해당 URL을 키로 가질 수 있는 경우 주어진 URL에 대한 특정 응답을 검색할 수 있습니다. cacheNameCache.match()가 아닌 CacheStorage.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'});

ignoreMethodignoreVary

ignoreMethodignoreVaryignoreSearchcacheName보다 조금 더 틈새시장이지만 특정 용도로 사용됩니다.

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 기반 브라우저 외에 현재 CacheQueryOptions를 기본적으로 지원하는 Firefox에서만 지원됩니다.

Chrome 54 이전 버전에서 CacheQueryOptions를 사용하려는 개발자는 아서 스톨리아르가 제공한 폴리필을 사용하면 됩니다.