Workbox 사용 방법

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를 프레임워크에 구애받지 않는 방법을 찾고 있다면 다음 세 가지 옵션이 있습니다.

1. workbox-cli
2. workbox-build 명령줄 도구입니다
3. 번들러 사용 (예: 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 메서드를 노드 스크립트의 일부로 직접 사용하여 비슷한 옵션 집합을 전달합니다.

// 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-sw 모듈과 함께 Workbox를 계속 사용할 수 있습니다. workbox-sw를 사용하면 CDN에서 또는 로컬로 Workbox 런타임을 로드하고 자체 서비스 워커를 구성할 수 있습니다.

결론

Workbox는 유연성 덕분에 프레임워크나 도구 모음 환경설정과 상관없이 거의 모든 프로젝트에서 사용할 수 있습니다. 이러한 모든 방법을 통해 몇 가지 방법을 사용하여 사전 캐싱과 런타임 캐싱을 수행할 수 있으며, 필요한 경우 고급 기능을 사용하여 서비스 워커를 유연하게 구축할 수 있습니다.