저는 서비스 워커 캐시 API의 사소한 업데이트에 대해 이 게시물을 작성하라는 요청을 받았습니다. 그것이 가위 바위 게임이라고 할 만한 근거는 아니었다고 생각했지만, 오랜 논쟁 끝에 가위바위보 게임이 끝나게 되었는데, 당장 패배하게 되었습니다.
Chrome의 서비스 워커 캐시 API 구현에 대한 업데이트를 받을 준비가 되셨나요?
음성을 감지할 수 없습니다. Chrome의 서비스 워커 캐시 API 구현에 관한 업데이트를 들을 준비가 되셨나요?
(의자에 올라서서 “야호!”라고 외친 경우에만 읽을 수 있습니다. 동시에 올가미를 휘두르는 척하는 것은 선택 사항이지만 권장됩니다.)
cache.addAll은 Chrome 46에 도입되었습니다.
물론입니다. 맞습니다 캐시! 전부 추가하지는 마세요. Chrome 46
알겠습니다. 비꼬는 건 제쳐두고도 괜찮습니다. cache.addAll이 캐시 '필수' 폴리필의 마지막 남은 부분이며 더 이상 필요하지 않다는 의미이기 때문입니다.
cache.addAll의 작동 방식은 다음과 같습니다.
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll는 URL 및 요청의 배열을 가져와 가져와서 캐시에 추가합니다. 트랜잭션 방식입니다. 가져오기나 쓰기 중 하나라도 실패하면 전체 작업이 실패하고 캐시가 이전 상태로 돌아갑니다. 이는 단일 실패가 전반적인 실패여야 하는 위와 같은 설치 작업에 특히 유용합니다.
위의 예는 서비스 워커 내에 있지만 페이지에서도 caches API에 완전히 액세스할 수 있습니다.
Firefox는 이미 개발자 버전에서 이 API를 지원하므로, 나머지 서비스 워커 구현과 함께 제공될 예정입니다.
하지만 그게 전부가 아닙니다. 파이프라인에 캐시 개선 사항이 더 많이 있습니다...
cache.matchAll은 Chrome 47에 도입됩니다
이렇게 하면 일치 항목을 여러 개 가져올 수 있습니다.
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
위 함수는 mysite-static-v1에서 /와 일치하는 모든 항목을 가져옵니다. 캐시를 사용하면 독립적으로 캐시 가능한 경우(예: Vary 헤더가 다른 경우) URL당 여러 개의 항목을 보유할 수 있습니다.
Firefox는 이미 개발자 버전에서 이를 지원하므로 나머지 서비스 워커 구현과 함께 제공될 예정입니다.
Chrome에 캐시 쿼리 옵션 제공 예정
다음은 꽤 일반적인 가져오기 핸들러입니다.
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
/를 캐시하고 / 요청을 받으면 캐시에서 제공됩니다. 그러나 /?utm_source=blahblahwhatever에 관한 요청을 받으면 캐시에서 이 요청이 발생하지 않습니다. 다음을 일치시키는 동안 URL 검색 문자열을 무시하여 이 문제를 해결할 수 있습니다.
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
이제 /?utm_source=blahblahwhatever이(가) /의 항목과 일치합니다. 전체 옵션은 다음과 같습니다.
ignoreSearch- 요청 인수와 캐시된 요청 모두에서 URL의 검색 부분을 무시합니다.ignoreMethod- 요청 인수의 메서드를 무시하므로 POST 요청이 캐시의 GET 항목과 일치할 수 있습니다.ignoreVary- 캐시된 응답의 다양성 헤더 무시
Firefox는 이미 이 기능을 지원합니다. 아시다시피 Ben Kelly에게 이 모든 기능을 Firefox에서 활용할 수 있게 된 건 훌륭하다고 말해주세요.
캐시 쿼리 옵션의 Chrome 구현을 따르려면 crbug.com/426309를 확인하세요.
다음번 '캐시 API에 구현한 내용'에 대한 흥미로운 장에서 다시 뵙겠습니다.