Cache: add() 메서드
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018년 4월.
참고 : 이 기능은 Web Worker에서 사용할 수 있습니다.
Cache 인터페이스의 add() 메서드는 URL을 받아서 해당 리소스를 가져온 후, 결과로 받은 응답 객체를 지정된 캐시에 추가합니다.
add() 메서드는 기능적으로 다음과 동일합니다.
fetch(url).then((response) => {
if (!response.ok) {
throw new TypeError("bad response status");
}
return cache.put(url, response);
});
더 복잡한 작업의 경우 Cache.put()을 직접 사용해야 합니다.
참고 :
add()는 요청과 일치하는 캐시에 이전에 저장된 키/값 쌍을 덮어씁니다.
구문
add(request)
매개변수
request-
캐시에 추가하려는 리소스에 대한 요청입니다.
Request객체 또는 URL이 될 수 있습니다.이 매개변수는
Request()생성자의 매개변수로 사용되므로, URL은 해당 생성자와 동일한 규칙을 따릅니다. 특히, URL은 기본 URL에 대한 상대 경로일 수 있으며, 기본 URL은 Window 컨텍스트에서는 문서의baseURI이고, Worker 컨텍스트에서는WorkerGlobalScope.location입니다.
반환 값
undefined로 이행하는 Promise입니다.
예외
TypeError-
URL 스킴이
http또는https가 아닙니다.Response 상태가 200번대가 아닙니다(즉, 성공적인 응답이 아닙니다). 이는 요청이 성공적으로 반환되지 않은 경우뿐만 아니라, 요청이 교차 출처 no-cors 요청인 경우에도 발생합니다(이 경우 보고된 상태는 항상 0입니다).
예제
이 코드 블록은 InstallEvent가 발생할 때까지 기다린 다음, waitUntil()을 호출하여 앱의 설치 프로세스를 처리합니다. 이는 CacheStorage.open을 호출하여 새 캐시를 생성한 다음, Cache.add를 사용하여 자산을 추가하는 것으로 구성됩니다.
this.addEventListener("install", (event) => {
event.waitUntil(caches.open("v1").then((cache) => cache.add("/index.html")));
});
명세서
| Specification |
|---|
| Service Workers Nightly # cache-add |