주로 Web Worker(e.g. Service Worker)에서 사용된다.
CacheStorage
CacheStorage는 Cache 객체들을 저장하는 storage다.
이름 : string, 값 : Cache object 형태로 저장한다고 한다.
caches로 접근할 수 있다.
caches.open()- 나머지 CacheStorage 메서드들
caches.open()
open(cacheName: string): Promise<Cache>;받은 이름(string)으로 Cache를 찾아서 돌려준다.
없으면 새 Cache를 만들어서 돌려준다.
Promise 형태로 돌려준다.
caches.open("v1").then((cache) => {
// ...
})새 캐시를 만들거나, 기존의 캐시를 가져오게 해준다.
나머지 CacheStorage 메서드들
모두 Promise로 돌려주며, 적힌 값으로 resolve 된다 :
caches.delete()
Cache 이름(string)을 받아서 지운다.
지웠으면 true, 없어서 못지웠으면 false를 돌려준다.
caches.keys()
CacheStorage가 갖고 있는 Cache들의 이름을 배열로 돌려준다.
caches.match()
Request를 받아서, CacheStorage가 가진 모든 Cache들 중에 하나라도 값을 갖고 있으면 그 Response를 돌려준다.
없을 시 undefined를 준다.
캐시가 여러 종류 있을 경우 유용하게 사용할 수 있을듯하다.
caches.has()
Cache 이름(string)을 받아서 Cache가 있으면 true, 없으면 false를 돌려준다.
Cache
Request / Response pair를 저장하게 해준다.
Service Worker 밖에서도 사용할 수 있다고 한다.
caches.open()의 Promise가 돌려주는 값으로 접근 가능하다.
- Cache에서 찾기
- Cache에 추가하기
- Cache에서 삭제하기
- 나머지
1. Cache에서 찾기
cache.matchAll()
matchAll(request?: Request | string, options?): Promise<Response[]>Request 또는 URL string을 받으며, 캐시에서 해당하는 Response를 모두 찾아서 배열로 돌려준다.
쿼리 스트링을 포함한 Request들에 대한 Response를 모두 돌려준다.
쿼리 스트링 이외 부분은 다를 수 없다.
request 부분을 비울 경우, 캐시에 있는 모든 Response를 돌려준다.
cache.match()
match(request: Request | string, options?): Promise<Response | undefined>Request 또는 URL string을 받으며, 캐시에서 Response를 찾아서 돌려준다.
Promise로 돌려주며, 없을 경우 undefined로 resolve 된다.
matchAll()의 첫 번째 값만 받는 것과 똑같다고 한다.
2. Cache에 추가하기
cache.put()
put(request: Request | string, response: Response): Promise<void>request와 response를 둘 다 받아서 캐시에 추가해준다.
add(), addAll()과 달리, Response.status가 200이 아닌 것도 캐싱하게 해준다.
그리고 덮어쓴다.
cache.add()
add(request: Request | string): Promise<void>request만 받으며, Response는 직접 받아와서 캐시에 추가한다.
즉 add()는 다음처럼 적는 것과 같다고 한다 :
fetch(url).then((response) => {
if (!response.ok) {
throw new TypeError("bad response status")
}
return cache.put(url, response)
})그리고 덮어쓴다.
cache.addAll()
addAll(requests: (Request | string)[]): Promise<void>add()와 마찬가지로 request들만 받으며, Response들은 직접 받아와서 캐시에 추가해준다.
undefined로 resolve 되는 Promise를 돌려준다.
그리고 덮어쓴다.
정리 : Cache에 추가하기
- Response가 명확히 존재하는 경우,
add()나addAll()를 쓰면 request 부분만 넘겨주면서 쉽게 캐싱할 수 있다. - Response.status가 200이 아닐 수 있거나 조금 더 복잡한 처리가 필요하다면
put()을 직접 써주면서 Response도 넘겨주면 된다.
3. Cache에서 삭제하기
cache.delete()
delete(request: Request | string, options?): Promise<boolean>Request나 URL을 받아서 지워준다.
Promise를 돌려주며, 지웠을 경우 true, 없어서 못 지웠을 경우 false로 resolve 된다.
4. 나머지
cache.keys()
keys(request?: Request | string, options?): Promise<Request[]>캐시의 key들, 즉 Request들을 모두 돌려준다.
request에 값을 줄 경우, 해당 request를 찾아서 돌려준다.
참고
- 타입은 ChatGPT를 참고하고 일부 간략화 및 수정해서 적었기 때문에 이상할 수 있습니다.
- CacheStorage (MDN)
- Cache (MDN)
