사전 캐싱은 서비스 워커에서 하게 되는 가장 일반적인 작업 중 하나이며, 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
옵션을 지정해야 합니다. 서비스 워커 동작에 영향을 미치는 추가 옵션도 구성해야 할 수 있으므로 관련 문서를 살펴보세요.
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에서 사전 캐싱을 사용하면 특히 번들러가 컴파일한 버전 관리 애셋이 우려되는 경우 직접 사전 캐싱을 관리해야 하는 경우보다 훨씬 간단합니다. 하지만 사전 캐싱이 서비스 워커에서 할 수 있는 유일한 작업은 아닙니다. 계속 진행하면서 런타임 캐싱과 같은 다른 기법을 배우게 됩니다.