서비스 워커 캐시 API의 상당히 사소한 업데이트에 관한 이 게시물을 작성해 달라는 요청을 받았습니다. 이 주제에 대해 별도의 도움말을 작성할 필요는 없다고 생각했지만, 결국에 가위바위보로 결정된 긴 논쟁 끝에 제가 졌으므로 이렇게 도움말을 작성하게 되었습니다.
Chrome의 서비스 워커 캐시 API 구현 업데이트에 대해 알아볼 준비가 되셨나요?
고객님의 음성이 들리지 않습니다. Chrome의 서비스 워커 캐시 API 구현 업데이트에 관해 알아보실 준비가 되셨나요?
(의자에 뛰어올라 'YEAHHH!'라고 외쳤다면 계속 읽어도 됩니다. 동시에 라소를 휘두르는 척하는 것은 선택사항이지만 권장됩니다.)
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를 지원하므로 나머지 서비스 워커 구현과 함께 제공됩니다.
하지만 그뿐만이 아닙니다. 더 많은 캐시 개선사항이 준비되어 있습니다.
Chrome 47에 cache.matchAll이 도입됨
이렇게 하면 여러 검색 결과를 가져올 수 있습니다.
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
위의 코드는 mysite-static-v1에서 /와 일치하는 모든 항목을 가져옵니다. 캐시를 사용하면 URL별로 여러 항목을 보유할 수 있습니다(예: Vary 헤더가 다른 경우).
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- 캐시된 응답에서 vary 헤더를 무시합니다.
Firefox에서는 이미 이 기능을 지원하고 있습니다. 이제 어떻게 해야 하는지 알고 계시죠? 벤 켈리님이 Firefox에 이 모든 기능을 제공해 주셔서 감사하다고 전해 주세요.
캐시 쿼리 옵션의 Chrome 구현을 따르려면 crbug.com/426309를 확인하세요.
다음 시간에는 '캐시 API에 구현된 내용'에 관한 흥미로운 내용을 다루겠습니다.