Workbox로 사전 캐싱

사전 캐싱은 서비스 워커에서 하게 되는 가장 일반적인 작업 중 하나이며, Workbox는 Workbox의 빌드 도구 중 어떤 것을 선택하든지에 관계없이 이 중요한 작업을 다양한 방식으로 수행할 수 있도록 유연성을 제공합니다. 이 가이드에서는 generateSW 및 injectManifest를 모두 사용하여 애셋을 사전 캐시하는 방법과 이러한 방법 중 프로젝트에 가장 적합한 메서드를 알아봅니다.

generateSW로 사전 캐싱

generateSW는 Workbox에서 애셋을 사전 캐시하는 가장 쉬운 방법입니다. generateSW에 관해 기억해야 할 중요한 점은 서비스 워커를 직접 작성하는 것이 아니라 Workbox에 서비스 워커를 생성하도록 요청하는 것입니다. 그러나 다양한 구성 옵션을 통해 동작에 영향을 줄 수 있습니다.

generateSW는 사용하는 빌드 도구에 따라 기본적으로 다른 작업을 실행합니다. workbox-webpack-plugin를 사용하면 구성 옵션을 지정할 필요가 없습니다. 기본적으로 플러그인은 Webpack이 종속 항목 그래프에 포함된 모든 항목을 사전 캐시하고 output.path에 의해 지정된 디렉터리에 service-worker.js라는 서비스 워커를 작성합니다.

반면 workbox-build 또는 workbox-cli를 사용하면 로컬 파일 시스템에서 읽은 HTML, CSS, JavaScript 애셋만 기본적으로 사전 캐시됩니다. 구성 측면에서 사전 캐싱이 작동하려면 generateSW 구성에서 swDest 및 globDirectory 옵션을 지정해야 합니다. 서비스 워커 동작에 영향을 미치는 추가 옵션도 구성해야 할 수 있으므로 관련 문서를 살펴보세요.

경고: 기본 설정으로 프로젝트에 너무 많은 애셋이 사전 캐시된 경우 glob 옵션 중 하나를 사용하여 generateSW 구성의 리소스를 제외하세요. workbox-webpack-plugin를 사용하는 경우 구성은 generateSW와 다르므로 플러그인의 GenerateSW 문서를 참고하여 원치 않는 애셋이 사전 캐시되지 않도록 하는 방법을 알아보세요.

injectManifest로 사전 캐싱

injectManifest를 사용하는 것이 generateSW를 사용하는 것만큼 쉬운 것은 아니지만, 사용 편의성이 떨어지고 유연성을 높이는 데 도움이 됩니다. 여기서 generateSW는 전체 서비스 워커 생성을 대신 처리하며, injectManifest는 개발자가 작성한 서비스 워커를 소스로 가져와 사전 캐시할 URL 목록을 삽입하고 나머지 서비스 워커는 그대로 둡니다.

injectManifest를 사용하면 사전 캐싱 로직을 연결해야 합니다. injectManifest는 입력 서비스 워커를 검사할 때 특수 self.__WB_MANIFEST 변수를 찾아 사전 캐시 매니페스트로 바꿉니다. 이 변수가 없으면 injectManifest에서 오류가 발생합니다.

참고: injectManifest에서 찾는 문자열을 self.__WB_MANIFEST이 아닌 다른 문자열로 변경해야 한다면 구성에서 injectionPoint 옵션을 지정하면 됩니다.

사전 캐시 매니페스트의 항목 목록은 추가 구성 옵션을 사용하여 조정할 수 있습니다.

주의: generateSW와 달리 injectManifest는 Workbox 런타임을 자동으로 번들로 묶지 않습니다. injectManifest를 사용하는 사용 사례에서 이를 관리하는 방법을 알아보려면 아래에서 나란히 비교한 내용을 확인하세요.

나란히 비교

아래의 각 탭을 클릭하여 generateSW 메서드와 injectManifest 메서드의 사용법을 비교해 보세요.

generateSW는 서비스 워커를 생성하므로 구성만 지정하면 됩니다. 다음은 workbox-build를 사용하는 예입니다.

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

그런 다음 노드를 사용하여 명령줄에서 서비스 워커를 빌드할 수 있습니다.

node build-sw.js

injectManifest에는 소스 서비스 워커가 필요하므로 최소 실행 가능한 예시에는 소스 서비스 워커 파일이 필요합니다. 사전 캐싱만 필요한 경우 입력 서비스 워커는 다음과 같을 수 있습니다.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

self.__WB_MANIFEST 문자열을 확인합니다. 이 자리표시자는 Workbox가 사전 캐시 매니페스트로 대체합니다. 다음은 이 사용 사례에 대한 유효한 구성입니다.

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

고급 라우팅, 맞춤 캐싱 전략 또는 generateSW에서 제공하는 옵션에 포함되지 않는 기타 항목과 같이 복잡한 요구사항이 있는 경우 injectManifest를 사용하는 것이 좋습니다.

주의: 위 예시에서는 빌드 단계 없이 ES 모듈을 기본적으로 지원하는 노드 환경에 있다고 가정합니다. 버전 16 이전의 노드 버전에서는 ES 모듈 지원을 사용 설정하기 위해 플래그를 설정하거나 module.exports을 사용하여 CommonJS 시맨틱을 사용해야 할 수 있습니다.

결론

Workbox에서 사전 캐싱을 사용하면 특히 번들러가 컴파일한 버전 관리 애셋이 우려되는 경우 직접 사전 캐싱을 관리해야 하는 경우보다 훨씬 간단합니다. 하지만 사전 캐싱이 서비스 워커에서 할 수 있는 유일한 작업은 아닙니다. 계속 진행하면서 런타임 캐싱과 같은 다른 기법을 배우게 됩니다.