Cache API: 빠른 가이드

Cache API를 사용하여 애플리케이션 데이터를 오프라인에서 사용할 수 있도록 하는 방법을 알아봅니다.

Pete LePage

Cache API는 네트워크를 저장하고 가져오는 시스템입니다. 이를 통해 할 수 있습니다. 일반적인 요청이 생성한 데이터 및 응답을 수집하거나 나중에 사용할 수 있도록 데이터를 저장할 목적으로만 생성되어야 합니다.

Cache API는 서비스 워커가 네트워크 요청을 캐시할 수 있도록 함 네트워크 속도에 관계없이 빠른 응답을 제공할 수 있도록 제공되어야 합니다 그러나 API는 일반 저장 메커니즘으로도 사용할 수 있습니다.

어느 지역에서 제공되나요?

Cache API는 모든 최신 브라우저에서 사용할 수 있습니다. 그것은 전역 caches 속성을 통해 노출되므로 다음과 같습니다.

const cacheAvailable = 'caches' in self;

Cache API는 window, iframe, worker 또는 서비스 워커에서 액세스할 수 있습니다.

저장할 수 있는 항목

캐시는 Request와 Response 객체로, HTTP 요청 및 응답을 나타냅니다. 각각 1개의 값으로 사용합니다. 그러나 요청과 응답은 어떤 종류의 데이터든 포함할 수 있습니다. HTTP를 통해 전송할 수 있습니다

얼마나 저장할 수 있나요?

간단히 말해서 크게, 수백 MB 이상이며 잠재적으로는 수백 기가바이트 이상이 될 수 있습니다. 브라우저 구현은 다양하지만 사용 가능한 스토리지는 일반적으로 Google Cloud에서 사용할 수 있는 있습니다.

캐시 만들기 및 열기

캐시를 열려면 caches.open(name) 메서드를 사용하여 캐시를 단일 매개변수로 사용합니다. 이름이 지정된 캐시가 없으면 생성됨. 이 메서드는 Cache 객체로 확인되는 Promise를 반환합니다.

const cache = await caches.open('my-cache');
// do something with cache...

캐시에 추가

항목을 캐시에 추가하는 방법에는 add, addAll, put 세 가지가 있습니다. 세 가지 메서드는 모두 Promise를 반환합니다.

cache.add

먼저 cache.add()가 있습니다. 매개변수 하나(Request)를 사용합니다. 또는 URL (string)을 입력할 수 있습니다. 네트워크에 요청하고 응답을 저장합니다. 있습니다. 만약 응답의 상태 코드가 200 범위에 있지 않은 경우 아무것도 저장되지 않고 Promise가 거부됩니다. 교차 출처는 CORS 모드가 아닌 요청은 다음의 status을 반환하므로 저장할 수 없습니다. 0입니다. 이러한 요청은 put에만 저장할 수 있습니다.

// Retreive data.json from the server and store the response.
cache.add(new Request('/data.json'));

// Retreive data.json from the server and store the response.
cache.add('/data.json');

cache.addAll

다음은 cache.addAll()입니다. add()와 유사하게 작동하지만 Request 객체 또는 URL (string)의 배열입니다. 이는 다음과 유사하게 작동합니다. 각 개별 요청에 대해 cache.add를 호출합니다. 단, Promise는 단일 요청이 캐시되지 않으면 거부됩니다.

const urls = ['/weather/today.json', '/weather/tomorrow.json'];
cache.addAll(urls);

이러한 경우 새 항목이 일치하는 기존 항목을 덮어씁니다. 이때 검색할 수도 있습니다.

cache.put

마지막으로 cache.put()를 사용하면 응답을 저장할 수 있습니다. 자체 Response를 만들고 저장할 수 있습니다. 2개의 매개변수입니다. 첫 번째는 Request 객체 또는 URL (string)일 수 있습니다. 두 번째 값은 네트워크에서 또는 직접 생성한 Response이어야 합니다. 있습니다.

// Retrieve data.json from the server and store the response.
cache.put('/data.json');

// Create a new entry for test.json and store the newly created response.
cache.put('/test.json', new Response('{"foo": "bar"}'));

// Retrieve data.json from the 3rd party site and store the response.
cache.put('https://example.com/data.json');

put() 메서드는 add() 또는 addAll()보다 더 많은 권한을 허용합니다. 비 CORS 응답 또는 상태가 응답 코드가 200 범위에 있지 않습니다. 이전 텍스트를 덮어씁니다. 동일한 요청에 대한 응답입니다

요청 객체 만들기

저장되는 항목의 URL을 사용하여 Request 객체를 만듭니다.

const request = new Request('/my-data-store/item-id');

응답 객체 작업

Response 객체 생성자는 다음을 비롯한 여러 유형의 데이터를 허용합니다. Blob, ArrayBuffer, FormData 객체, 문자열

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

적절한 헤더를 설정하여 Response의 MIME 유형을 설정할 수 있습니다.

  const options = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const jsonResponse = new Response('{}', options);

Response를 가져온 후 본문에 액세스하려는 경우 몇 가지 도우미 메서드를 제공합니다. 각각은 다음을 확인하는 Promise를 반환합니다. 다른 유형의 값으로 대체합니다.

예:

const response = new Response('Hello world');
const buffer = await response.arrayBuffer();
console.log(new Uint8Array(buffer));
// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]

캐시에서 검색

캐시에서 항목을 찾으려면 match 메서드를 사용하면 됩니다.

const response = await cache.match(request);
console.log(request, response);

request가 문자열이면 브라우저에서 다음을 호출하여 Request로 변환합니다. new Request(request)입니다. 이 함수는 다음으로 확인되는 Promise을 반환합니다. 일치하는 항목이 있으면 Response, 없으면 undefined입니다.

두 개의 Requests가 일치하는지 확인하기 위해 브라우저는 URL 외에도 다른 정보를 사용합니다. 2개 요청은 다른 쿼리 문자열이 있는 경우 다른 것으로 간주됩니다. Vary 헤더 또는 HTTP 메서드 (GET, POST, PUT 등)입니다.

옵션 객체를 두 번째 매개변수입니다.

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const response = await cache.match(request, options);
// do something with the response

두 개 이상의 캐시된 요청이 일치하는 경우 먼저 생성된 요청이 반환합니다. 일치하는 모든 응답을 검색하려면 다음을 사용하세요. cache.matchAll()입니다.

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const responses = await cache.matchAll(request, options);
console.log(`There are ${responses.length} matching responses.`);

바로가기로 caches.match()를 사용하여 한 번에 모든 캐시를 검색할 수 있습니다. 각 캐시에 cache.match()를 호출하는 대신

검색 중

Cache API는 요청이나 응답을 검색하는 방법을 제공하지 않음 Response 객체와 일치하는 항목을 제외하고 있습니다. 하지만 Cloud Shell에서 필터링을 사용하거나 색인을 생성하여 자체 검색을 구현할 수 있습니다.

필터링

자체 검색을 구현하는 한 가지 방법은 모든 항목을 반복하고 원하는 항목으로 필터링할 수 있습니다. 이 데이터 세트에서 가장 작은 URL이 .png(으)로 끝나는 항목을 찾습니다.

async function findImages() {
  // Get a list of all of the caches for this origin
  const cacheNames = await caches.keys();
  const result = [];

  for (const name of cacheNames) {
    // Open the cache
    const cache = await caches.open(name);

    // Get a list of entries. Each item is a Request object
    for (const request of await cache.keys()) {
      // If the request URL matches, add the response to the result
      if (request.url.endsWith('.png')) {
        result.push(await cache.match(request));
      }
    }
  }

  return result;
}

이렇게 하면 Request 및 Response 객체의 모든 속성을 사용하여 항목을 필터링합니다. 다량의 데이터를 검색하는 경우 속도가 느려집니다. 데이터를 수집하는 데 사용됩니다

색인 만들기

자체 검색을 구현하는 다른 방법은 검색할 수 있는 항목과 IndexedDB에 색인을 저장할 수 있는 항목입니다. 이것이 디코더에 이 작업을 위해 IndexedDB가 설계된 작업이 훨씬 더 나은 성능을 발휘합니다. 매우 유용합니다.

검색 가능한 속성과 함께 Request의 URL을 저장하는 경우 그러면 검색 후 올바른 캐시 항목을 쉽게 검색할 수 있습니다.

항목 삭제

캐시에서 항목을 삭제하려면 다음 단계를 따르세요.

cache.delete(request);

여기서 요청은 Request 또는 URL 문자열일 수 있습니다. 또한 이 메서드는 여러 옵션을 삭제할 수 있는 cache.match와 동일한 옵션 객체입니다. 동일한 URL에 대한 Request/Response 쌍입니다.

cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});

캐시 삭제

캐시를 삭제하려면 caches.delete(name)를 호출합니다. 이 함수는 캐시가 있고 삭제된 경우 true로 확인되는 Promise 그 외에는 false입니다.

감사합니다.

이 문서의 원본을 쓴 Mat Scales와 WebFundamentals에 처음 등장했습니다.