workbox-cli 패키지에 포함된 Workbox 명령줄 인터페이스는 Windows, macOS, UNIX 호환 명령줄 환경에서 실행할 수 있는 Workbox라는 Node.js 프로그램으로 구성됩니다. 내부적으로 workbox-cli는 workbox-build 모듈을 래핑하고 유연한 구성을 사용하여 Workbox를 명령줄 빌드 프로세스에 쉽게 통합할 수 있는 방법을 제공합니다.
CLI 설치
노드로 CLI를 설치하려면 터미널에서 다음 명령어를 실행합니다.
npm install workbox-cli --global
CLI 모드
CLI에는 4가지 모드가 있습니다.
wizard: 프로젝트에 사용할 Workbox를 설정하기 위한 단계별 안내입니다.generateSW: 완전한 서비스 워커를 생성합니다.injectManifest: 프로젝트에 사전 캐시할 애셋을 삽입합니다.copyLibraries: Workbox 라이브러리를 디렉터리에 복사합니다.
wizard
작업 상자 마법사는 로컬 디렉터리 설정과 사전 캐시할 파일에 대한 일련의 질문을 합니다. 응답은 generateSW 모드에서 실행할 때 사용할 수 있는 구성 파일을 생성하는 데 사용됩니다.
대부분의 개발자는 워크박스 마법사를 한 번만 실행하면 되며 지원되는 빌드 구성 옵션을 사용하여 생성된 초기 구성 파일을 수동으로 맞춤설정할 수 있습니다.
마법사를 시작하려면 다음을 실행합니다.
npx workbox-cli wizard
generateSW
Workbox CLI를 사용하여 구성 파일 (예: 마법사에서 생성한 파일)을 사용하는 완전한 서비스 워커를 생성할 수 있습니다.
다음 명령어를 실행하기만 하면 됩니다.
npx workbox-cli generateSW path/to/config.js
Workbox의 기본 제공 사전 캐싱 및 런타임 캐싱 기능에 만족하고 서비스 워커의 동작을 맞춤설정할 필요가 없는 개발자는 generateSW 모드를 사용하는 것이 좋습니다.
generateSW 사용 시점
- 파일을 사전 캐시하려고 합니다.
- 간단한 런타임 캐싱 요구사항이 있습니다.
generateSW를 사용하면 안 되는 경우
- 다른 서비스 워커 기능 (예: 웹 푸시)을 사용하려고 합니다.
- 추가 스크립트를 가져오거나 커스텀 캐싱 전략을 위한 로직을 추가하려고 합니다.
injectManifest
최종 서비스 워커 파일을 더 세부적으로 제어하려는 개발자는 injectManifest 모드를 사용하면 됩니다. 이 모드는 기존 서비스 워커 파일 (config.js에 지정된 위치)이 있다고 가정합니다.
workbox injectManifest가 실행되면 소스 서비스 워커 파일에서 특정 문자열(기본적으로 precacheAndRoute(self.__WB_MANIFEST))을 찾습니다. 이는 빈 배열을 사전 캐시할 URL 목록으로 바꾸고 config.js의 구성 옵션에 따라 서비스 워커 파일을 대상 위치에 씁니다.
소스 서비스 워커의 나머지 코드는 그대로 유지됩니다.
이 모드에서 다음과 같이 Workbox를 사용할 수 있습니다.
npx workbox-cli injectManifest path/to/config.js
injectManifest 사용 시점
- 서비스 워커를 더 세부적으로 제어하려는 경우.
- 파일을 사전 캐시하려고 합니다.
- 라우팅 및 전략을 맞춤설정해야 합니다.
- 서비스 워커를 다른 플랫폼 기능 (예: 웹 푸시)과 함께 사용하려고 합니다.
injectManifest를 사용하면 안 되는 경우
- 사이트에 서비스 워커를 추가하는 가장 쉬운 방법이 좋습니다.
copyLibraries
이 모드는 injectManifest를 사용하고 CDN을 사용하는 대신 자체 원본에서 호스팅되는 Workbox 라이브러리 파일을 사용하려는 경우에 유용합니다.
파일을 쓸 경로를 사용하여 실행하기만 하면 됩니다.
npx workbox-cli copyLibraries third_party/workbox/
빌드 프로세스 통합
Workbox를 내 빌드 프로세스와 통합해야 하는 이유는 무엇인가요?
Workbox 프로젝트에는 웹 앱의 서비스 워커를 구동하기 위해 함께 작동하는 여러 라이브러리가 포함되어 있습니다. 이러한 라이브러리를 효과적으로 사용하려면 Workbox를 웹 앱의 빌드 프로세스에 통합해야 합니다. 이렇게 하면 서비스 워커가 모든 웹 앱의 중요한 콘텐츠를 효율적으로 사전 캐시하고 해당 콘텐츠를 최신 상태로 유지할 수 있습니다.
빌드 프로세스에 workbox-cli이(가) 적합한 선택일까요?
전적으로 npm 스크립트를 기반으로 하는 기존 빌드 프로세스가 있다면 workbox-cli를 선택하는 것이 좋습니다.
현재 빌드 도구로 webpack을 사용 중인 경우 workbox-webback-plugin을 사용하는 것이 더 좋습니다.
현재 Gulp, Grunt 또는 다른 Node.js 기반 빌드 도구를 사용 중인 경우 workbox-build를 빌드 스크립트에 통합하는 것이 좋습니다.
빌드 프로세스가 없는 경우 Workbox를 사용하여 애셋을 사전 캐시하기 전에 빌드 프로세스를 만들어야 합니다. workbox-cli를 수동으로 실행하려고 하면 오류가 발생하기 쉬우며 이를 잊어버리면 재방문자에게 오래된 콘텐츠가 제공될 수 있습니다.
설정 및 구성
로컬 프로젝트의 개발 종속 항목으로 workbox-cli를 설치한 후 기존 빌드 프로세스의 npm 스크립트 끝에 workbox 호출을 추가할 수 있습니다.
package.json에서 다음을 실행합니다.
{
"scripts": {
"build": "my-build-script && workbox <mode> <path/to/config.js>"
}
}
<mode>를 generateSW 또는 injectManifest (사용 사례에 따라)로 바꾸고 <path/to/config.js>을 구성 옵션의 경로로 바꿉니다. 구성이 workbox wizard에 의해 자동으로 만들어졌거나 수동으로 조정되었을 수 있습니다.
구성
generateSW에서 사용하는 옵션
전체 구성 옵션은 참조 문서에서 확인할 수 있습니다.
injectManifest에서 사용하는 옵션
전체 구성 옵션은 참조 문서에서 확인할 수 있습니다.