캐싱 전략은 앱이 네트워크 요청을 할 때 PWA가 작동하는 방식과 네트워크 오류를 처리하는 방식을 결정합니다. Workbox는 PWA 생성에 일반적으로 사용되는 라이브러리입니다. workbox-strategies는 다음과 같은 캐싱 전략을 제공합니다.

부실 재검증

서비스 워커는 먼저 캐시된 자산을 제공하고 나중에 캐시를 최신 버전으로 업데이트합니다. 캐시 적중 시 가능한 한 빨리 요청에 응답합니다. 캐시 누락 시 요청은 네트워크 요청으로 대체됩니다. 그런 다음 네트워크 요청의 응답을 사용하여 캐시를 업데이트합니다. 이 전략은 응답을 받는 것이 최신 결과보다 우선 순위가 높은 상황에서 유용합니다.

먼저 캐시

서비스 작업자는 캐시된 자산을 제공하고 캐시를 사용할 수 없는 경우에만 네트워크를 쿼리합니다. 캐시 적중 시 백그라운드에서 캐시를 업데이트하지 않습니다. 네트워크는 전혀 사용되지 않습니다. 캐시 누락 시 요청이 네트워크를 통해 전송되고 응답이 캐시됩니다. 다음 요청은 캐시에서 제공됩니다. 이 전략은 자주 변경되지 않는 정적 자산에 대한 요청에 유용합니다.

캐싱 전략이 정의되지 않은 경우 Workbox는 Cache First를 기본값으로 사용합니다.

네트워크 우선

서비스 워커는 기본적으로 네트워크를 통해 응답을 가져오려고 시도합니다. 네트워크 요청이 실패하면 캐시에서 응답을 제공합니다. 네트워크를 통한 성공적인 응답 시 향후 사용을 위해 응답을 캐시합니다. 이 전략은 자주 업데이트되는 요청에 유용할 수 있습니다.

네트워크만

서비스 작업자는 항상 네트워크에 응답을 쿼리합니다. 이는 네트워크를 엄격하게 쿼리해야 하는 경우에 유용할 수 있습니다.

캐시만

서비스 작업자는 항상 캐시에 응답을 쿼리합니다. 요청하기 전에 리소스를 미리 캐시해야 합니다. 이 전략은 실제로 덜 사용됩니다.

사용 예

service-worker.ts에서 가져오기 이벤트에 대한 사용자 정의 전략을 추가하십시오.
참고: URL 출처 또는 경로에 따라 필터링하여 다양한 가져오기 요청에 대한 사용자 지정 이벤트를 정의할 수도 있습니다.

import { StaleWhileRevalidate } from "workbox-strategies";

...

//! Stale-While-Revalidate for all fetch events
self.addEventListener("fetch", (event) => {
    const { request } = event;

    event.respondWith(new StaleWhileRevalidate().handle({ event, request }));
});

또한 Workbox를 사용하여 사용자 지정 전략을 정의할 수 있습니다. 이러한 모든 전략을 사용하면 캐시 이름, 캐시 만료 및 추가 워크박스 플러그인 배열을 구성할 수도 있습니다.

해피 해킹!