웹 애플리케이션의 일부 애셋은 자주 사용되지 않거나 매우 크거나, 사용자 기기 (예: 반응형 이미지) 또는 언어에 따라 다를 수 있습니다. 이러한 경우에는 프리캐싱이 피해야 할 패턴이 될 수 있으며 대신 런타임 캐싱을 사용해야 합니다.
Workbox에서는 workbox-routing 모듈을 사용하여 애셋의 런타임 캐싱을 처리하여 경로를 일치시키고 workbox-strategies 모듈로 애셋의 캐싱 전략을 처리할 수 있습니다.
캐싱 전략
기본 제공되는 캐싱 전략 중 하나를 사용하여 대부분의 애셋 경로를 처리할 수 있습니다. 이 문서의 앞부분에서 자세히 다루었으나 요약하면 다음과 같습니다.
- 재검증하는 동안 비활성은 요청에 캐시된 응답을 사용할 수 있는 경우 이를 사용하고 네트워크의 응답으로 백그라운드에서 캐시를 업데이트합니다. 따라서 자산이 캐시되지 않으면 네트워크 응답을 기다렸다가 이를 사용합니다. 이 방법을 사용하는 캐시 항목을 정기적으로 업데이트하므로 상당히 안전한 전략입니다. 단점은 항상 백그라운드에서 네트워크의 애셋을 요청한다는 것입니다.
- 네트워크 우선에서는 먼저 네트워크로부터 응답을 받습니다. 응답이 수신되면 브라우저에 응답을 전달하고 캐시에 저장합니다. 네트워크 요청이 실패하면 마지막으로 캐시된 응답이 사용되어 자산에 대한 오프라인 액세스가 활성화됩니다.
- Cache First는 먼저 캐시에 응답이 있는지 확인하고 가능한 경우 응답을 사용합니다. 요청이 캐시에 없으면 네트워크가 사용되고 유효한 응답이 브라우저에 전달되기 전에 캐시에 추가됩니다.
- 네트워크만: 네트워크에서 응답을 강제로 보냅니다.
- 캐시 전용은 캐시에서 응답을 가져오도록 강제합니다.
workbox-routing에서 제공하는 메서드를 사용하여 이러한 전략을 일부 요청에 적용할 수 있습니다.
경로 일치와 함께 캐싱 전략 적용
workbox-routing는 경로를 일치시키고 캐싱 전략으로 경로를 처리하기 위해 registerRoute 메서드를 노출합니다. registerRoute는 두 인수를 허용하는 Route 객체를 허용합니다.
일치 콜백은 Request 객체, 요청 URL 문자열, 가져오기 이벤트, 요청이 동일한 출처 요청인지 여부를 나타내는 불리언 값을 포함하는 컨텍스트 객체를 제공하므로 경로 일치를 사용하는 것이 좋습니다.
그러면 핸들러가 일치하는 경로를 처리합니다. 다음 예에서는 수신되는 동일 출처 이미지 요청과 일치하는 새 경로가 생성되어 캐시를 먼저 적용하고 네트워크 전략으로 대체합니다.
// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
// A new route that matches same-origin image requests and handles
// them with the cache-first, falling back to network strategy:
const imageRoute = new Route(({ request, sameOrigin }) => {
return sameOrigin && request.destination === 'image'
}, new CacheFirst());
// Register the new route
registerRoute(imageRoute);
여러 캐시 사용
Workbox를 사용하면 번들 전략에서 사용할 수 있는 cacheName 옵션을 사용하여 캐시된 응답을 별도의 Cache 인스턴스로 버케팅할 수 있습니다.
다음 예에서 이미지는 비활성 및 재검증 전략을 사용하는 반면, CSS 및 JavaScript 애셋은 캐시 우선 네트워크 전략으로 대체하는 전략을 사용합니다. 각 애셋의 경로는 cacheName 속성을 추가하여 응답을 별도의 캐시에 배치합니다.
// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
// Handle images:
const imageRoute = new Route(({ request }) => {
return request.destination === 'image'
}, new StaleWhileRevalidate({
cacheName: 'images'
}));
// Handle scripts:
const scriptsRoute = new Route(({ request }) => {
return request.destination === 'script';
}, new CacheFirst({
cacheName: 'scripts'
}));
// Handle styles:
const stylesRoute = new Route(({ request }) => {
return request.destination === 'style';
}, new CacheFirst({
cacheName: 'styles'
}));
// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
registerRoute(stylesRoute);