Cache API를 사용하여 애플리케이션 데이터를 오프라인에서 사용할 수 있도록 하는 방법을 알아봅니다.
Cache API는 네트워크를 저장하고 가져오는 시스템입니다. 이를 통해 할 수 있습니다. 일반적인 요청이 생성한 데이터 및 응답을 수집하거나 나중에 사용할 수 있도록 데이터를 저장할 목적으로만 생성되어야 합니다.
Cache API는 서비스 워커가 네트워크 요청을 캐시할 수 있도록 함 네트워크 속도에 관계없이 빠른 응답을 제공할 수 있도록 제공되어야 합니다 그러나 API는 일반 저장 메커니즘으로도 사용할 수 있습니다.
어느 지역에서 제공되나요?
Cache API는 모든 최신 브라우저에서 사용할 수 있습니다. 그것은
전역 caches
속성을 통해 노출되므로
다음과 같습니다.
const cacheAvailable = 'caches' in self;
브라우저 지원
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
를 반환합니다.
다른 유형의 값으로 대체합니다.
메서드 | 설명 |
---|---|
arrayBuffer |
다음으로 직렬화된 본문을 포함하는 ArrayBuffer 를 반환합니다.
바이트.
|
blob |
Blob 를 반환합니다. Response 가 생성된 경우
Blob 가 있는 경우 새 Blob 도 동일합니다.
있습니다. 그렇지 않은 경우 Content-Type
Response 가 사용됩니다.
|
text |
본문의 바이트를 UTF-8로 인코딩된 문자열로 해석합니다. |
json |
본문의 바이트를 UTF-8로 인코딩된 문자열로 해석한 후
JSON으로 파싱합니다 결과 객체를 반환하거나
문자열을 JSON으로 파싱할 수 없는 경우 TypeError 입니다.
|
formData |
본문의 바이트를
multipart/form-data 또는
application/x-www-form-urlencoded 입니다. 반환 값:
FormData
객체를 파싱하거나 데이터를 파싱할 수 없으면 TypeError 이 발생합니다.
|
body |
ReadableStream을 반환합니다. 확인할 수 있습니다. |
예:
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에 처음 등장했습니다.