Workbox는 모든 프로젝트의 빌드 프로세스를 수용할 수 있을 만큼 유연합니다. 즉, Workbox를 사용하는 방법이 두 가지 이상이므로 프로젝트에 적합한 통합을 선택할 수 있습니다. Workbox와 통합하는 방법에 관계없이 다양한 도구에서 비슷한 API를 제공합니다.
generateSW
및 injectManifest
비교
Workbox 빌드 도구의 두 가지 핵심 메서드인 generateSW
또는 injectManifest
중 하나를 사용합니다. 어느 정도의 유연성이 필요한지에 따라 사용해야 하는 방법이 달라집니다. generateSW
는 유연성은 낮추면서 사용 편의성과 단순성을 우선시하므로 개발자가 구성 옵션 집합을 선언하고 완전한 기능을 갖춘 서비스 워커를 제공할 수 있습니다.
injectManifest
는 개발자가 직접 서비스 워커의 코드를 작성하게 되지만, injectManifest
는 Workbox의 사전 캐싱 메서드에서 사용할 수 있는 사전 캐시 매니페스트를 제공하기 때문에 약간의 단순성을 희생하는 대신 더 높은 유연성을 선호합니다.
generateSW
사용 시점
다음과 같은 경우 generateSW
를 사용해야 합니다.
- URL에 미리 알지 못할 수 있는 해시가 포함된 파일을 포함하여 빌드 프로세스와 관련된 파일을 사전 캐시하려고 합니다.
generateSW
의 옵션을 통해 구성할 수 있는 간단한 런타임 캐싱 요구사항이 있습니다.
generateSW
를 사용하면 안 되는 경우
반면 다음과 같은 경우에는 generateSW
를 사용하면 안 됩니다.
- 다른 서비스 워커 기능 (예: 웹 푸시)을 사용하려는 경우
- 추가 스크립트를 가져오거나 특정 Workbox 모듈을 사용하여 애플리케이션의 필요에 맞게 서비스 워커를 미세 조정하려면 유연성이 더 필요합니다.
injectManifest
사용 시점
다음과 같은 경우 injectManifest
를 사용해야 합니다.
- 파일을 사전 캐시하면서 자체 서비스 워커를 작성하려는 경우
generateSW
의 구성 옵션으로 표현할 수 없는 복잡한 캐싱 또는 라우팅 요구사항이 있습니다.- 서비스 워커에서 다른 API (예: 웹 푸시)를 사용하려고 합니다.
injectManifest
는 소스 서비스 워커 파일을 지정해야 한다는 점에서 generateSW
와 다릅니다. 이 워크플로에서는 injectManifest
가 사전 캐시 매니페스트로 대체할 수 있도록 소스 서비스 워커 파일에 특수 self.__WB_MANIFEST
문자열이 있어야 합니다.
injectManifest
를 사용하면 안 되는 경우
다음과 같은 경우 injectManifest
를 사용하면 안 됩니다.
- 서비스 워커에서는 사전 캐싱을 사용하고 싶지 않습니다.
- 서비스 워커 요구사항은
generateSW
및 구성 옵션이 제공할 수 있는 내용으로 다룰 수 있을 만큼 간단합니다. - 유연성보다 사용 편의성을 우선시합니다.
Workbox의 빌드 도구 사용
빌드 프로세스에서 Workbox를 사용하기 위해 프레임워크에 구애받지 않는 방법을 찾고 있는 경우 다음 세 가지 옵션이 있습니다.
workbox-cli
workbox-build
. 명령줄 도구.- 번들러 사용 (예:
workbox-webpack-plugin
)
이러한 각 빌드 도구는 generateSW
모드와 injectManifest
모드를 모두 유사한 옵션 모음과 함께 제공합니다. 이들은 모두 Workbox 기반 서비스 워커를 특정 프레임워크에 연결하고 싶지 않은 경우에 사용할 수 있는 좋은 방법입니다. 이러한 옵션 중 가장 적합한 옵션을 파악하기 위해 각 옵션을 간단히 살펴보겠습니다.
workbox-cli
Workbox의 진입 장벽을 최대한 낮추려면 CLI를 사용하세요.
npm install workbox-cli --save-dev
CLI를 사용하려면 npx workbox wizard
로 마법사를 실행합니다. 마법사가 몇 가지 질문을 하고, 이러한 질문에 대한 답변을 사용하여 필요에 맞게 맞춤설정할 수 있는 workbox-config.js
파일로 프로젝트를 설정합니다. 다음과 같이 표시됩니다.
// A config for `generateSW`
export default {
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
};
구성 파일이 생성되면 CLI가 자동으로 generateSW
또는 injectManifest
메서드를 실행할 수 있습니다. 자세한 내용과 사용 예는 CLI의 도움말 텍스트를 참조하세요.
workbox-build
workbox-cli
는 workbox-build
모듈을 둘러싸는 래퍼이며 workbox-build
를 직접 사용하는 방법도 있습니다. workbox-build
를 사용할 때는 workbox-config.js
파일을 사용하여 옵션을 지정하는 대신 generateSW
또는 injectManifest
메서드를 Node 스크립트의 일부로 직접 사용하여 유사한 옵션 집합을 전달합니다.
// build-sw.mjs
import {generateSW} from 'workbox-build';
generateSW({
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
});
위의 예에서 workbox-build
는 node build-sw.mjs
명령어가 실행되면 생성된 서비스 워커를 dist
디렉터리에 씁니다.
Bundler 사용
다양한 번들러에 자체 Workbox 플러그인이 있지만 Workbox팀에서 공식적으로 지원하는 유일한 번들러는 workbox-webpack-plugin
를 통한 webpack입니다. workbox-cli
및 workbox-build
와 마찬가지로 workbox-webpack-plugin
는 generateSW
또는 injectManifest
메서드를 실행합니다. 단, 플러그인은 이러한 메서드 이름을 GenerateSW
또는 InjectManifest
로 대문자로 표기합니다. 그 외의 경우 사용법은 workbox-build
와 비슷합니다.
// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';
export default {
// Other webpack config options omitted for brevity...
plugins: [
new GenerateSW({
swDest: './dist/sw.js'
})
]
};
GenerateSW
또는 InjectManifest
에 전달하는 옵션은 generateSW
또는 injectManifest
와 같지 않지만 상당히 겹치는 부분이 있습니다. 특히, webpack에서 프로덕션 애셋이 번들로 제공되는 위치를 이미 알고 있으므로 GenerateSW
의 globDirectory
옵션을 지정할 필요도 없고 지정할 수도 없습니다.
프레임워크 사용
이 시점에서 다룬 모든 내용은 프레임워크 기본 설정과 상관없이 Workbox 사용에 중점을 둡니다. 그러나 개발이 더 용이하다면 특정 프레임워크 내에서 Workbox를 사용할 수도 있습니다. 예를 들어 create-react-app
는 기본적으로 Workbox와 함께 배송됩니다. Workbox와의 다양한 프레임워크 통합은 후반부 도움말에서 다룹니다.
Workbox의 프레임워크별 통합으로 인해 Workbox를 원하는 방식으로 구성하는 기능이 제한될 수 있습니다. 이러한 경우에는 언제든지 여기에 설명된 방법으로 돌아갈 수 있습니다.
빌드 프로세스가 없으면 어떻게 하나요?
이 문서에서는 프로젝트에 빌드 프로세스가 있다고 가정하지만 실제로는 프로젝트에 빌드 프로세스가 없다고 가정합니다. 이 경우에 해당한다면 Workbox를 workbox-sw
모듈과 함께 사용할 수 있습니다. workbox-sw
를 사용하면 CDN 또는 로컬에서 Workbox 런타임을 로드하고 자체 서비스 워커를 구성할 수 있습니다.
결론
Workbox는 유연성이 탁월하므로 프레임워크나 도구 모음 기본 설정에 관계없이 거의 모든 프로젝트에서 사용할 수 있습니다. 이러한 모든 방법을 통해 몇 가지 메서드를 사용하여 사전 캐싱과 런타임 캐싱을 수행할 수 있으며, 필요할 때 고급 기능을 갖춘 서비스 워커를 더욱 유연하게 빌드할 수 있습니다.