Workbox 사용 방법

Workbox는 모든 프로젝트의 빌드 프로세스를 수용할 수 있을 만큼 유연합니다. 즉, Workbox를 사용하는 방법이 두 가지 이상이므로 프로젝트에 적합한 통합을 선택할 수 있습니다. Workbox와 통합하는 방법에 관계없이 다양한 도구에서 비슷한 API를 제공합니다.

generateSWinjectManifest 비교

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-cliworkbox-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-buildnode build-sw.mjs 명령어가 실행되면 생성된 서비스 워커를 dist 디렉터리에 씁니다.

Bundler 사용

다양한 번들러에 자체 Workbox 플러그인이 있지만 Workbox팀에서 공식적으로 지원하는 유일한 번들러는 workbox-webpack-plugin를 통한 webpack입니다. workbox-cliworkbox-build와 마찬가지로 workbox-webpack-plugingenerateSW 또는 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에서 프로덕션 애셋이 번들로 제공되는 위치를 이미 알고 있으므로 GenerateSWglobDirectory 옵션을 지정할 필요도 없고 지정할 수도 없습니다.

프레임워크 사용

이 시점에서 다룬 모든 내용은 프레임워크 기본 설정과 상관없이 Workbox 사용에 중점을 둡니다. 그러나 개발이 더 용이하다면 특정 프레임워크 내에서 Workbox를 사용할 수도 있습니다. 예를 들어 create-react-app는 기본적으로 Workbox와 함께 배송됩니다. Workbox와의 다양한 프레임워크 통합은 후반부 도움말에서 다룹니다.

Workbox의 프레임워크별 통합으로 인해 Workbox를 원하는 방식으로 구성하는 기능이 제한될 수 있습니다. 이러한 경우에는 언제든지 여기에 설명된 방법으로 돌아갈 수 있습니다.

빌드 프로세스가 없으면 어떻게 하나요?

이 문서에서는 프로젝트에 빌드 프로세스가 있다고 가정하지만 실제로는 프로젝트에 빌드 프로세스가 없다고 가정합니다. 이 경우에 해당한다면 Workbox를 workbox-sw 모듈과 함께 사용할 수 있습니다. workbox-sw를 사용하면 CDN 또는 로컬에서 Workbox 런타임을 로드하고 자체 서비스 워커를 구성할 수 있습니다.

결론

Workbox는 유연성이 탁월하므로 프레임워크나 도구 모음 기본 설정에 관계없이 거의 모든 프로젝트에서 사용할 수 있습니다. 이러한 모든 방법을 통해 몇 가지 메서드를 사용하여 사전 캐싱과 런타임 캐싱을 수행할 수 있으며, 필요할 때 고급 기능을 갖춘 서비스 워커를 더욱 유연하게 빌드할 수 있습니다.