Workbox로 사전 캐싱

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

generateSW로 사전 캐싱

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

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

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

injectManifest로 사전 캐싱

injectManifest를 사용하는 것이 generateSW를 사용하는 것만큼 쉽지는 않지만 사용 편의성을 포기하여 유연성을 높입니다. generateSW가 전체 서비스 워커 생성을 자동으로 처리하는 반면, injectManifest는 개발자가 작성하는 서비스 워커를 소스로 가져와 사전 캐시할 URL 목록을 삽입하고 나머지 서비스 워커는 그대로 둡니다.

injectManifest를 사용하면 사전 캐싱 로직을 연결해야 합니다. injectManifest는 입력 서비스 워커를 검사할 때 특수한 self.__WB_MANIFEST 변수를 찾아 사전 캐시 매니페스트로 바꿉니다. 이 변수가 없으면 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를 사용하는 것이 좋습니다.

결론

Workbox에서 사전 캐싱은 자체적으로 사전 캐싱을 관리해야 하는 경우보다 훨씬 간단합니다. 특히 번들러에 의해 컴파일된 버전이 지정된 애셋과 관련된 경우 더욱 그렇습니다. 그러나 사전 캐싱이 서비스 워커에서 하는 유일한 일은 아닙니다. 계속 진행하면서 런타임 캐싱과 같은 다른 기법을 배우게 됩니다.