이 페이지는 Cloud Translation API를 통해 번역되었습니다.

작업 상자 빌드

workbox-build 모듈은 노드 기반 빌드 프로세스에 통합되며 전체 서비스 워커를 생성하거나 기존 서비스 워커 내에서 사용할 수 있는 미리 캐시할 애셋 목록을 생성할 수 있습니다.

대부분의 개발자가 사용하는 두 가지 모드는 generateSW 및 injectManifest입니다. 다음 질문에 대한 답변은 사용할 올바른 모드와 구성을 선택하는 데 도움이 될 수 있습니다.

사용할 모드

`generateSW`

generateSW 모드는 구성 옵션을 통해 맞춤설정된 서비스 워커 파일을 자동으로 만들고 디스크에 씁니다.

`generateSW` 사용 시점

파일을 미리 캐시하려고 합니다.
간단한 런타임 캐싱이 필요합니다.

`generateSW`를 사용하지 않는 경우

다른 Service Worker 기능 (예: 웹 푸시)을 사용하려 합니다.
스크립트를 추가로 가져오거나 맞춤 캐싱 전략에 로직을 추가하려고 합니다.

`injectManifest`

injectManifest 모드는 사전 캐시할 URL 목록을 생성하고 사전 캐시 매니페스트를 기존 서비스 워커 파일에 추가합니다. 그렇지 않으면 파일이 그대로 유지됩니다.

`injectManifest` 사용 시점

서비스 워커를 더 세부적으로 제어하려는 경우
파일을 미리 캐시하려고 합니다.
라우팅 및 전략을 맞춤설정해야 합니다.
서비스 워커를 다른 플랫폼 기능 (예: 웹 푸시)과 함께 사용하려는 경우

`injectManifest`를 사용하지 않는 경우

사이트에 서비스 워커를 추가하는 가장 쉬운 방법을 찾고 있습니다.

`generateSW` 모드

다음과 같이 가장 일반적인 구성 옵션을 사용하여 노드 기반 빌드 스크립트 내에서 generateSW 모드를 사용할 수 있습니다.

// Inside of build.js:
const {generateSW} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while generating a service worker:',
      warnings.join('\n')
    );
  }

  console.log(`Generated a service worker, which will precache ${count} files, totaling ${size} bytes.`);
});

이렇게 하면 구성에서 선택한 모든 파일과 제공된 런타임 캐싱 규칙에 대한 미리 캐싱 설정이 포함된 서비스 워커가 생성됩니다.

전체 구성 옵션은 참조 문서에서 확인할 수 있습니다.

`injectManifest` 모드

다음과 같이 가장 일반적인 구성 옵션을 사용하여 노드 기반 빌드 스크립트 내에서 injectManifest 모드를 사용할 수 있습니다.

// Inside of build.js:
const {injectManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while injecting the manifest:',
      warnings.join('\n')
    );
  }

  console.log(`Injected a manifest which will precache ${count} files, totaling ${size} bytes.`);
});

이렇게 하면 구성에서 선택한 파일을 기반으로 미리 캐시 매니페스트가 생성되고 기존 서비스 워커 파일에 삽입됩니다.

전체 구성 옵션은 참조 문서에서 확인할 수 있습니다.

추가 모드

generateSW 또는 injectManifest가 대부분의 개발자의 요구사항에 적합할 것으로 예상됩니다. 하지만 workbox-build에서 지원하는 다른 모드가 하나 있는데, 이 모드는 특정 사용 사례에 적합할 수 있습니다.

`getManifest` 모드

이는 개념적으로 injectManifest 모드와 유사하지만 매니페스트를 소스 서비스 워커 파일에 추가하는 대신 매니페스트 항목 배열과 항목 수 및 총 크기에 관한 정보를 반환합니다.

다음과 같이 가장 일반적인 구성 옵션을 사용하여 노드 기반 빌드 스크립트 내에서 injectManifest 모드를 사용할 수 있습니다.

// Inside of build.js:
const {getManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
}).then(({manifestEntries, count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while getting the manifest:',
      warnings.join('\n')
    );
  }

  // Do something with the manifestEntries, and potentially log count and size.
});

전체 구성 옵션은 참조 문서에서 확인할 수 있습니다.

유형

BasePartial

속성

additionalManifestEntries

(string | ManifestEntry)[] 선택사항

빌드 구성의 일부로 생성된 항목 외에도 미리 캐시할 항목 목록입니다.
dontCacheBustURLsMatching

정규식 선택사항

이에 일치하는 애셋은 URL을 통해 고유하게 버전이 지정된 것으로 가정되며, 미리 캐시를 채울 때 실행되는 일반적인 HTTP 캐시 무효화는 적용되지 않습니다. 필수는 아니지만 기존 빌드 프로세스가 이미 각 파일 이름에 [hash] 값을 삽입하는 경우 이를 감지하는 RegExp를 제공하는 것이 좋습니다. 이렇게 하면 미리 캐시할 때 사용되는 대역폭이 줄어듭니다.
manifestTransforms

ManifestTransform[] 선택사항

생성된 매니페스트에 순차적으로 적용되는 하나 이상의 함수입니다. modifyURLPrefix 또는 dontCacheBustURLsMatching도 지정하면 해당 변환이 먼저 적용됩니다.
maximumFileSizeToCacheInBytes

번호 선택사항
기본값은 2097152입니다.

이 값은 미리 캐시할 파일의 최대 크기를 결정하는 데 사용할 수 있습니다. 이렇게 하면 패턴 중 하나와 실수로 일치했을 수 있는 매우 큰 파일을 실수로 미리 캐시하지 않습니다.
modifyURLPrefix

객체 선택사항

문자열 접두사를 대체 문자열 값에 매핑하는 객체입니다. 이를 사용하면 웹 호스팅 설정이 로컬 파일 시스템 설정과 일치하지 않는 경우 매니페스트 항목에서 경로 접두사를 삭제하거나 추가하는 등의 작업을 할 수 있습니다. 더 유연한 대안으로 manifestTransforms 옵션을 사용하고 제공하는 논리를 사용하여 매니페스트의 항목을 수정하는 함수를 제공할 수 있습니다.

사용 예:
```
// Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}
```

BuildResult

유형

Omit<GetManifestResult"manifestEntries"
> & 객체

속성

filePaths

문자열[]

GeneratePartial

속성

babelPresetEnvTargets

string[] 선택사항
기본값은 ["chrome >= 56"]입니다.

서비스 워커 번들을 트랜스파일할 때 babel-preset-env에 전달할 타겟입니다.
cacheId

문자열 선택사항

캐시 이름 앞에 추가할 선택적 ID입니다. 이는 주로 동일한 http://localhost:port 출처에서 여러 사이트가 제공될 수 있는 로컬 개발에 유용합니다.
cleanupOutdatedCaches

불리언 선택사항
기본값은 false입니다.

호환되지 않는 이전 버전에서 생성된 미리 캐시를 Workbox에서 식별하고 삭제해야 하는지 여부입니다.
clientsClaim

불리언 선택사항
기본값은 false입니다.

서비스 워커가 활성화되는 즉시 기존 클라이언트를 제어하기 시작해야 하는지 여부입니다.
directoryIndex

문자열 선택사항

/로 끝나는 URL의 탐색 요청이 미리 캐시된 URL과 일치하지 않으면 이 값이 URL에 추가되고 미리 캐시 일치 여부가 확인됩니다. 웹 서버에서 디렉터리 색인에 사용 중인 것으로 설정해야 합니다.
disableDevLogs

불리언 선택사항
기본값은 false입니다.
ignoreURLParametersMatching

RegExp[] 선택사항

이 배열의 RegExp 중 하나와 일치하는 검색 매개변수 이름은 미리 캐시된 일치를 찾기 전에 삭제됩니다. 이는 사용자가 트래픽 소스를 추적하는 데 사용되는 URL 매개변수와 같은 내용이 포함된 URL을 요청할 수 있는 경우에 유용합니다. 제공하지 않은 경우 기본값은 [/^utm_/, /^fbclid$/]입니다.
importScripts

string[] 선택사항

생성된 서비스 워커 파일 내에서 importScripts()에 전달해야 하는 JavaScript 파일 목록입니다. 이는 Workbox에서 최상위 서비스 워커 파일을 만들도록 하면서 푸시 이벤트 리스너와 같은 추가 코드를 포함하려는 경우에 유용합니다.
inlineWorkboxRuntime

불리언 선택사항
기본값은 false입니다.

Workbox 라이브러리의 런타임 코드를 최상위 서비스 워커에 포함해야 하는지 아니면 서비스 워커와 함께 배포해야 하는 별도의 파일로 분할해야 하는지 여부입니다. 런타임을 별도로 유지하면 최상위 서비스 워커가 변경될 때마다 사용자가 Workbox 코드를 다시 다운로드하지 않아도 됩니다.
모드

문자열 선택사항
기본값은 'production'입니다.

'프로덕션'으로 설정하면 디버깅 정보를 제외한 최적화된 서비스 워커 번들이 생성됩니다. 여기에서 명시적으로 구성하지 않으면 process.env.NODE_ENV 값이 사용되고, 이 값이 없으면 'production'로 대체됩니다.
navigateFallback

문자열 선택사항
기본값은 null입니다.

지정된 경우 미리 캐시되지 않은 URL의 모든 탐색 요청은 제공된 URL의 HTML로 처리됩니다. 미리 캐시 매니페스트에 나열된 HTML 문서의 URL을 전달해야 합니다. 이는 모든 탐색에서 공통 앱 셸 HTML을 사용하도록 하는 단일 페이지 앱 시나리오에서 사용하기 위한 것입니다.
navigateFallbackAllowlist

RegExp[] 선택사항

구성된 navigateFallback 동작이 적용되는 URL을 제한하는 정규 표현식 배열입니다(선택사항). 이는 사이트 URL의 하위 집합만 단일 페이지 앱의 일부로 취급해야 하는 경우에 유용합니다. navigateFallbackDenylist와 navigateFallbackAllowlist가 모두 구성된 경우 차단 목록이 우선 적용됩니다.

참고: 이러한 RegExp는 탐색 중에 모든 대상 URL에 대해 평가될 수 있습니다. 복잡한 정규식을 사용하지 마세요. 사용자가 사이트를 탐색할 때 지연이 발생할 수 있습니다.
navigateFallbackDenylist

RegExp[] 선택사항

구성된 navigateFallback 동작이 적용되는 URL을 제한하는 정규 표현식 배열입니다(선택사항). 이는 사이트 URL의 하위 집합만 단일 페이지 앱의 일부로 취급해야 하는 경우에 유용합니다. navigateFallbackDenylist와 navigateFallbackAllowlist가 모두 구성된 경우 차단 목록이 우선 적용됩니다.

참고: 이러한 RegExp는 탐색 중에 모든 대상 URL에 대해 평가될 수 있습니다. 복잡한 정규식을 사용하지 마세요. 사용자가 사이트를 탐색할 때 지연이 발생할 수 있습니다.
navigationPreload

불리언 선택사항
기본값은 false입니다.

생성된 서비스 워커에서 탐색 미리 로드를 사용 설정할지 여부입니다. true로 설정된 경우 runtimeCaching를 사용하여 탐색 요청과 일치하는 적절한 응답 전략을 설정하고 미리 로드된 응답을 활용해야 합니다.
offlineGoogleAnalytics

불리언 | GoogleAnalyticsInitializeOptions 선택사항
기본값은 false입니다.

오프라인 Google 애널리틱스 지원을 포함할지 여부를 제어합니다. true인 경우 workbox-google-analytics의 initialize() 호출이 생성된 서비스 워커에 추가됩니다. Object로 설정하면 이 객체가 initialize() 호출에 전달되므로 동작을 맞춤설정할 수 있습니다.
runtimeCaching

RuntimeCaching[] 선택사항

Workbox의 빌드 도구를 사용하여 서비스 워커를 생성할 때 하나 이상의 런타임 캐싱 구성을 지정할 수 있습니다. 그런 다음 정의한 일치 및 핸들러 구성을 사용하여 workbox-routing.registerRoute 호출로 변환됩니다.

모든 옵션은 workbox-build.RuntimeCaching 문서를 참고하세요. 아래 예는 두 개의 런타임 경로가 정의된 일반적인 구성을 보여줍니다.
skipWaiting

불리언 선택사항
기본값은 false입니다.

생성된 서비스 워커에 skipWaiting()에 대한 무조건 호출을 추가할지 여부입니다. false인 경우 대신 message 리스너가 추가되어 클라이언트 페이지가 대기 중인 서비스 워커에서 postMessage({type: 'SKIP_WAITING'})를 호출하여 skipWaiting()를 트리거할 수 있습니다.
sourcemap

불리언 선택사항
기본값은 true입니다.

생성된 서비스 워커 파일의 소스맵을 만들지 여부입니다.

GenerateSWOptions

유형

BasePartial & GlobPartial & GeneratePartial & RequiredSWDestPartial & OptionalGlobDirectoryPartial

GetManifestOptions

유형

BasePartial 및 GlobPartial 및 RequiredGlobDirectoryPartial

GetManifestResult

속성

개수

숫자
manifestEntries

ManifestEntry[]
크기

숫자
경고

문자열[]

GlobPartial

속성

globFollow

불리언 선택사항
기본값은 true입니다.

미리 캐시 매니페스트를 생성할 때 심볼릭 링크를 따를지 여부를 결정합니다. 자세한 내용은 glob 문서에서 follow의 정의를 참고하세요.
globIgnores

string[] 선택사항
기본값은 ["**\/node_modules\/**\/*"]입니다.

미리 캐시 매니페스트를 생성할 때 항상 제외할 파일과 일치하는 패턴 집합입니다. 자세한 내용은 glob 문서에서 ignore의 정의를 참고하세요.
globPatterns

string[] 선택사항
기본값은 ["**\/*.{js,wasm,css,html}"]입니다.

이러한 패턴과 일치하는 파일은 미리 캐시 매니페스트에 포함됩니다. 자세한 내용은 glob 프라이머를 참고하세요.
globStrict

불리언 선택사항
기본값은 true입니다.

이 값이 true이면 미리 캐시 매니페스트를 생성할 때 디렉터리를 읽는 중에 오류가 발생하면 빌드가 실패합니다. false인 경우 문제가 있는 디렉터리가 건너뜁니다. 자세한 내용은 glob 문서에서 strict의 정의를 참고하세요.
templatedURLs

객체 선택사항

URL이 서버 측 로직을 기반으로 렌더링되는 경우 콘텐츠가 여러 파일이나 다른 고유 문자열 값에 종속될 수 있습니다. 이 객체의 키는 서버에서 렌더링된 URL입니다. 값이 문자열 배열인 경우 glob 패턴으로 해석되며 패턴과 일치하는 모든 파일의 콘텐츠가 URL의 고유 버전을 만드는 데 사용됩니다. 단일 문자열과 함께 사용하면 지정된 URL에 대해 생성한 고유한 버전 관리 정보로 해석됩니다.

InjectManifestOptions

유형

BasePartial & GlobPartial & InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

속성

injectionPoint

문자열 선택사항
기본값은 "self.__WB_MANIFEST"입니다.

swSrc 파일 내에서 찾을 문자열입니다. 찾으면 생성된 미리 캐시 매니페스트로 대체됩니다.
swSrc

문자열

빌드 프로세스 중에 읽히는 서비스 워커 파일의 경로 및 파일 이름(현재 작업 디렉터리를 기준으로)입니다.

ManifestEntry

속성

무결성

문자열 선택사항
수정 버전

문자열
URL

문자열

ManifestTransform()

workbox-build.ManifestTransform(
  manifestEntries: (ManifestEntry & object)[],
  compilation?: unknown,
)

유형

함수

매개변수

manifestEntries

(ManifestEntry & object)[]
- 크기
  
  숫자
컴파일

알 수 없음 선택사항

반환 값

Promise<ManifestTransformResult> | ManifestTransformResult

ManifestTransformResult

속성

매니페스트

(ManifestEntry & object)[]
- 크기
  
  숫자
경고

string[] 선택사항

OptionalGlobDirectoryPartial

속성

globDirectory

문자열 선택사항

globPatterns와 일치시키려는 로컬 디렉터리입니다. 경로는 현재 디렉터리를 기준으로 합니다.

RequiredGlobDirectoryPartial

속성

globDirectory

문자열

globPatterns와 일치시키려는 로컬 디렉터리입니다. 경로는 현재 디렉터리를 기준으로 합니다.

RequiredSWDestPartial

속성

swDest

문자열

빌드 프로세스에 의해 생성될 서비스 워커 파일의 경로 및 파일 이름으로, 현재 작업 디렉터리를 기준으로 합니다. '.js'로 끝나야 합니다.

RuntimeCaching

속성

handler

RouteHandler | StrategyName

런타임 경로가 응답을 생성하는 방식을 결정합니다. 내장된 workbox-strategies 중 하나를 사용하려면 'NetworkFirst'와 같은 이름을 제공합니다. 또는 커스텀 응답 로직이 있는 workbox-core.RouteHandler 콜백 함수일 수도 있습니다.
method

HTTPMethod 선택사항
기본값은 'GET'입니다.

일치시킬 HTTP 메서드입니다. 'POST', 'PUT' 또는 다른 유형의 요청을 명시적으로 일치시켜야 하는 경우가 아니라면 일반적으로 'GET'의 기본값으로 충분합니다.
옵션

객체 선택사항
- backgroundSync
  
  객체 선택사항
  
  이렇게 구성하면 handler에 구성된 workbox-strategies에 workbox-background-sync.BackgroundSyncPlugin 인스턴스가 추가됩니다.
  - 이름
    
    문자열
  - 옵션
    
    QueueOptions 선택사항
- broadcastUpdate
  
  객체 선택사항
  
  이렇게 구성하면 handler에 구성된 workbox-strategies에 workbox-broadcast-update.BroadcastUpdatePlugin 인스턴스가 추가됩니다.
  - channelName
    
    문자열 선택사항
  - 옵션
    
    BroadcastCacheUpdateOptions
- cacheName
  
  문자열 선택사항
  
  제공되면 handler에 구성된 workbox-strategies의 cacheName 속성을 설정합니다.
- cacheableResponse
  
  CacheableResponseOptions 선택사항
  
  이렇게 구성하면 handler에 구성된 workbox-strategies에 workbox-cacheable-response.CacheableResponsePlugin 인스턴스가 추가됩니다.
- 만료
  
  ExpirationPluginOptions 선택사항
  
  이렇게 구성하면 handler에 구성된 workbox-strategies에 workbox-expiration.ExpirationPlugin 인스턴스가 추가됩니다.
- fetchOptions
  
  RequestInit 선택사항
  
  이렇게 구성하면 fetchOptions 값이 handler에 구성된 workbox-strategies에 전달됩니다.
- matchOptions
  
  CacheQueryOptions 선택사항
  
  이렇게 구성하면 matchOptions 값이 handler에 구성된 workbox-strategies에 전달됩니다.
- networkTimeoutSeconds
  
  번호 선택사항
  
  제공되면 handler에 구성된 workbox-strategies의 networkTimeoutSeconds 속성을 설정합니다. 'NetworkFirst' 및 'NetworkOnly'만 networkTimeoutSeconds를 지원합니다.
- 플러그인
  
  WorkboxPlugin[] 선택사항
  
  이렇게 구성하면 '바로가기' 옵션이 없는 Workbox 플러그인 (예: workbox-expiration.ExpirationPlugin의 expiration)을 하나 이상 사용할 수 있습니다. 여기에 제공된 플러그인은 handler에 구성된 workbox-strategies에 추가됩니다.
- precacheFallback
  
  객체 선택사항
  
  이렇게 구성하면 handler에 구성된 workbox-strategies에 workbox-precaching.PrecacheFallbackPlugin 인스턴스가 추가됩니다.
  - fallbackURL
    
    문자열
- rangeRequests
  
  불리언 선택사항
  
  이 기능을 사용 설정하면 handler에 구성된 workbox-strategies에 workbox-range-requests.RangeRequestsPlugin 인스턴스가 추가됩니다.
urlPattern

문자열 | 정규 표현식 | RouteMatchCallback

이 일치 기준은 구성된 핸들러가 미리 캐시된 URL 중 하나와 일치하지 않는 요청에 대한 응답을 생성할지 결정합니다. RuntimeCaching 경로가 여러 개 정의된 경우 urlPattern가 일치하는 첫 번째 경로가 응답하는 경로입니다.

이 값은 workbox-routing.registerRoute에 전달된 첫 번째 매개변수에 직접 매핑됩니다. 최대한의 유연성을 위해 workbox-core.RouteMatchCallback 함수를 사용하는 것이 좋습니다.

StrategyName

열거형

'CacheFirst'

'CacheOnly'

'NetworkFirst'

'NetworkOnly'

'StaleWhileRevalidate'

WebpackGenerateSWOptions

유형

BasePartial 및 WebpackPartial 및 GeneratePartial 및 WebpackGenerateSWPartial

WebpackGenerateSWPartial

속성

importScriptsViaChunks

string[] 선택사항

webpack 청크의 이름 1개 이상 이러한 청크의 콘텐츠는 importScripts() 호출을 통해 생성된 서비스 워커에 포함됩니다.
swDest

문자열 선택사항
기본값은 'service-worker.js'입니다.

이 플러그인에서 만든 서비스 워커 파일의 애셋 이름입니다.

WebpackInjectManifestOptions

유형

BasePartial 및 WebpackPartial 및 InjectPartial 및 WebpackInjectManifestPartial

WebpackInjectManifestPartial

속성

compileSrc

불리언 선택사항
기본값은 true입니다.

true (기본값)인 경우 swSrc 파일이 webpack에 의해 컴파일됩니다. false인 경우 컴파일이 발생하지 않으며 webpackCompilationPlugins를 사용할 수 없습니다. 매니페스트를 JSON 파일과 같이 특정 위치에 삽입하려면 false로 설정합니다.
swDest

문자열 선택사항

이 플러그인에서 생성할 서비스 워커 파일의 애셋 이름입니다. 생략하면 이름이 swSrc 이름을 기반으로 합니다.
webpackCompilationPlugins

any[] 선택사항

swSrc 입력 파일을 컴파일할 때 사용되는 선택적 webpack 플러그인입니다. compileSrc이 true인 경우에만 유효합니다.

WebpackPartial

속성

덩어리

string[] 선택사항

사전 캐시 매니페스트에 포함되어야 하는 해당 출력 파일이 있는 청크 이름 1개 이상
제외

(string | RegExp | function)[] 선택사항

미리 캐시 매니페스트에서 애셋을 제외하는 데 사용되는 하나 이상의 지정자입니다. 이는 webpack의 표준 exclude 옵션과 동일한 규칙에 따라 해석됩니다. 제공하지 않은 경우 기본값은 [/\.map$/, /^manifest.*\.js$]입니다.
excludeChunks

string[] 선택사항

해당 출력 파일을 미리 캐시 매니페스트에서 제외해야 하는 청크 이름 1개 이상
include

(string | RegExp | function)[] 선택사항

미리 캐시 매니페스트에 애셋을 포함하는 데 사용되는 하나 이상의 지정자입니다. 이는 webpack의 표준 include 옵션과 동일한 규칙에 따라 해석됩니다.
모드

문자열 선택사항

'프로덕션'으로 설정하면 디버깅 정보를 제외한 최적화된 서비스 워커 번들이 생성됩니다. 여기에서 명시적으로 구성하지 않으면 현재 webpack 컴파일에 구성된 mode 값이 사용됩니다.

메서드

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
)

이렇게 하면 Workbox에서 사용하는 일련의 런타임 라이브러리가 로컬 디렉터리에 복사되며, 이 디렉터리는 서비스 워커 파일과 함께 배포되어야 합니다.

이러한 로컬 사본을 배포하는 대신 공식 CDN URL에서 Workbox를 사용할 수 있습니다.

이 메서드는 Workbox의 CDN 사본을 사용하지 않으려는 workbox-build.injectManifest를 사용하는 개발자를 위해 노출됩니다. workbox-build.generateSW를 사용하는 개발자는 이 메서드를 명시적으로 호출할 필요가 없습니다.

매개변수

destDirectory

문자열

새 라이브러리 디렉터리가 생성될 상위 디렉터리의 경로입니다.

반환 값

Promise<string>

새로 생성된 디렉터리의 이름입니다.

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
)

이 메서드는 제공된 옵션에 따라 '미리 캐시 매니페스트'라고 하는 미리 캐시할 URL 목록을 만듭니다.

또한 사용해야 하는 runtimeCaching 규칙과 같이 서비스 워커의 동작을 구성하는 추가 옵션을 사용합니다.

미리 캐시된 매니페스트와 추가 구성을 기반으로 사용 가능한 서비스 워커 파일을 swDest의 디스크에 씁니다.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
});

매개변수

config

GenerateSWOptions

반환 값

Promise<BuildResult>

getManifest()

workbox-build.getManifest(
  config: GetManifestOptions,
)

이 메서드는 제공된 옵션에 따라 '미리 캐시 매니페스트'라고 하는 미리 캐시할 URL 목록과 항목 수 및 크기에 관한 세부정보를 반환합니다.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, manifestEntries, size, warnings} = await getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
});

매개변수

config

GetManifestOptions

반환 값

Promise<GetManifestResult>

getModuleURL()

workbox-build.getModuleURL(
  moduleName: string,
  buildType: BuildType,
)

매개변수

moduleName

문자열
buildType

BuildType

반환 값

문자열

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
)

이 메서드는 제공된 옵션에 따라 '미리 캐시 매니페스트'라고 하는 미리 캐시할 URL 목록을 만듭니다.

매니페스트가 swSrc 파일에 삽입되고 자리표시자 문자열 injectionPoint은 매니페스트가 파일의 어디에 있어야 하는지 결정합니다.

매니페스트가 삽입된 최종 서비스 워커 파일은 swDest의 디스크에 쓰여집니다.

이 메서드는 swSrc 파일을 컴파일하거나 번들로 묶지 않습니다. 매니페스트 삽입만 처리합니다.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
});

매개변수

config

InjectManifestOptions

반환 값

Promise<BuildResult>

작업 상자 빌드

사용할 모드

generateSW

generateSW 사용 시점

generateSW를 사용하지 않는 경우

injectManifest

injectManifest 사용 시점

injectManifest를 사용하지 않는 경우

generateSW 모드

injectManifest 모드

추가 모드

getManifest 모드

유형

BasePartial

속성

BuildResult

유형

속성

GeneratePartial

속성

GenerateSWOptions

유형

GetManifestOptions

유형

GetManifestResult

속성

GlobPartial

속성

InjectManifestOptions

유형

InjectPartial

속성

ManifestEntry

속성

ManifestTransform()

유형

매개변수

반환 값

ManifestTransformResult

속성

OptionalGlobDirectoryPartial

속성

RequiredGlobDirectoryPartial

속성

RequiredSWDestPartial

속성

RuntimeCaching

속성

StrategyName

열거형

WebpackGenerateSWOptions

유형

WebpackGenerateSWPartial

속성

WebpackInjectManifestOptions

유형

WebpackInjectManifestPartial

속성

WebpackPartial

속성

메서드

copyWorkboxLibraries()

매개변수

반환 값

generateSW()

매개변수

반환 값

getManifest()

매개변수

반환 값

getModuleURL()

매개변수

반환 값

injectManifest()

매개변수

반환 값

`generateSW`

`generateSW` 사용 시점

`generateSW`를 사용하지 않는 경우

`injectManifest`

`injectManifest` 사용 시점

`injectManifest`를 사용하지 않는 경우

`generateSW` 모드

`injectManifest` 모드

`getManifest` 모드