Chrome 54에 CacheQueryOptions 도입

Jeff Posnick

서비스 워커 내에서 또는 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-referral를 caches.match()에 전달해도 index.html의 항목은 반환되지 않습니다. 하지만 ignoreSearch가 true로 설정된 경우 설정된 쿼리 매개변수와 관계없이 예상되는 캐시된 응답을 검색할 수 있습니다.

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

cacheName

cacheName는 캐시가 여러 개 있고 응답을 특정 캐시 하나에 저장하고 싶을 때 유용합니다. 이를 사용하면 브라우저가 모든 캐시가 아닌 하나의 캐시만 확인하면 되므로 쿼리를 더 효율적으로 실행할 수 있으며, 여러 캐시에서 해당 URL을 키로 보유하고 있을 수 있는 경우 지정된 URL에 대한 특정 응답을 검색할 수 있습니다. cacheName는 Cache.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'});

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

Chrome 54 이전 버전에서 CacheQueryOptions를 사용하려는 개발자는 아서스 스토일러가 제공하는 폴리필을 사용할 수 있습니다.