작업 상자 사전 캐싱

서비스 워커의 한 가지 기능은 서비스 워커가 설치될 때 캐시로 파일 세트를 저장하는 기능입니다. 이는 서비스 워커가 사용되기 전에 콘텐츠를 캐시하므로 '미리 캐싱'이라고도 합니다.

이렇게 하는 주된 이유는 개발자가 캐시를 제어할 수 있기 때문입니다. 즉, 파일이 캐시되는 시점과 기간을 결정하고 네트워크에 연결하지 않고도 브라우저에 파일을 제공할 수 있습니다. 따라서 오프라인에서 작동하는 웹 앱을 만드는 데 사용할 수 있습니다.

Workbox는 API를 단순화하고 애셋이 효율적으로 다운로드되도록 하여 사전 캐싱의 많은 작업을 처리합니다.

workbox-precaching 작동 방식

웹 앱이 처음 로드되면 workbox-precaching는 다운로드하려는 모든 애셋을 살펴보고 중복된 항목을 삭제한 후 관련 서비스 워커 이벤트를 연결하여 애셋을 다운로드하고 저장합니다. 버전 관리 정보 (예: 콘텐츠 해시)가 이미 포함된 URL은 추가 수정 없이 캐시 키로 사용됩니다. 버전 관리 정보가 포함되지 않은 URL에는 Workbox가 빌드 시 생성하는 콘텐츠 해시를 나타내는 추가 URL 쿼리 매개변수가 캐시 키에 추가됩니다.

workbox-precaching는 서비스 워커의 install 이벤트 중에 이 모든 작업을 실행합니다.

나중에 사용자가 웹 앱을 다시 방문하고 사전 캐시된 애셋이 다른 새 서비스 워커가 있는 경우 workbox-precaching는 새 목록을 확인하고 버전 관리에 따라 완전히 새로운 애셋과 업데이트가 필요한 기존 애셋을 결정합니다. 새 애셋 또는 업데이트 버전은 새 서비스 워커의 install 이벤트 중에 캐시에 추가됩니다.

이 새 서비스 워커는 activate 이벤트가 트리거될 때까지 요청에 응답하는 데 사용되지 않습니다. activate 이벤트에서 workbox-precaching는 현재 URL의 목록에 더 이상 없는 캐시된 애셋을 확인하고 캐시에서 삭제합니다.

workbox-precaching는 서비스 워커가 설치되고 활성화될 때마다 이러한 단계를 실행하여 사용자가 최신 애셋을 보유하도록 하고 변경된 파일만 다운로드합니다.

미리 캐시된 응답 제공

precacheAndRoute() 또는 addRoute()를 호출하면 미리 캐시된 URL의 요청과 일치하는 경로가 생성됩니다.

이 경로에 사용되는 응답 전략은 캐시 우선입니다. 예기치 않은 오류로 인해 캐시된 응답이 없는 경우를 제외하고 사전 캐시된 응답이 사용됩니다. 이 경우 네트워크 응답이 대신 사용됩니다.

precacheAndRoute() 또는 addRoute()를 호출하는 순서가 중요합니다. 일반적으로 registerRoute()에 추가 경로를 등록하기 전에 서비스 워커 파일의 초기에 호출하는 것이 좋습니다. 먼저 registerRoute()를 호출했고 해당 경로가 수신 요청과 일치하는 경우 workbox-precaching에서 사용하는 캐시 우선 전략 대신 추가 경로에 정의된 전략이 응답에 사용됩니다.

미리 캐시 목록 설명

workbox-precaching는 url 및 revision 속성이 있는 객체 배열을 예상합니다. 이 배열을 사전 캐시 매니페스트라고도 합니다.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

이 목록은 각기 고유한 '버전 관리' 정보가 포함된 URL 집합을 참조합니다.

위 예시의 두 번째 및 세 번째 객체의 경우 revision 속성이 null로 설정됩니다. 이는 버전 관리 정보가 URL 자체에 포함되어 있기 때문입니다. 이는 일반적으로 정적 애셋에 권장되는 방법입니다.

첫 번째 객체 (/index.html)는 파일 콘텐츠의 자동 생성 해시인 버전 속성을 명시적으로 설정합니다. JavaScript 및 CSS 리소스와 달리 HTML 파일은 일반적으로 URL에 버전 관리 정보를 포함할 수 없습니다. 그러지 않으면 페이지 콘텐츠가 변경될 때마다 웹에서 이러한 파일로 연결되는 링크가 끊어집니다.

버전 속성을 precacheAndRoute()에 전달하면 Workbox에서 파일이 변경된 시점을 파악하고 적절하게 업데이트할 수 있습니다.

참고: 이전 버전의 workbox-precaching에서는 미리 캐시 매니페스트에 url 및 revision 속성이 있는 객체 외에도 문자열 URL을 포함할 수 있었습니다. 버전 5에서는 지원 중단되었습니다. 이제 항상 객체를 전달해야 하며 Workbox가 캐시의 URL을 수정하지 못하도록 하려면 revision 속성을 null로 명시적으로 설정해야 합니다. 버전 5에서는 문자열을 전달해도 경고와 함께 계속 작동하지만 버전 6에서는 더 이상 지원되지 않습니다.

Workbox에는 이 목록을 생성하는 데 도움이 되는 도구가 포함되어 있습니다.

• workbox-build: gulp 작업 또는 npm 실행 스크립트로 사용할 수 있는 노드 패키지입니다.
• workbox-webpack-plugin: webpack 사용자는 이 플러그인을 사용할 수 있습니다.
• workbox-cli: CLI를 사용하여 애셋 목록을 생성하고 서비스 워커에 추가할 수도 있습니다.

경고: 이 미리 캐시 매니페스트를 생성하려면 Workbox의 빌드 도구 중 하나를 사용하는 것이 좋습니다. 수동으로 작성된 매니페스트에 버전 정보를 하드코딩하지 마세요. 버전 정보가 URL의 콘텐츠를 반영하지 않으면 미리 캐시된 URL이 최신 상태로 유지되지 않습니다.

미리 캐시된 파일의 수신 요청

workbox-precaching가 기본적으로 실행하는 작업 중 하나는 수신되는 네트워크 요청을 조작하여 미리 캐시된 파일을 일치시키는 것입니다. 이렇게 하면 웹의 일반적인 관행을 수용할 수 있습니다.

예를 들어 / 요청은 일반적으로 /index.html의 파일로 충족될 수 있습니다.

다음은 workbox-precaching가 기본적으로 실행하는 조작 목록과 이 동작을 변경하는 방법입니다.

URL 매개변수 무시

검색 매개변수가 있는 요청은 특정 값을 삭제하거나 모든 값을 삭제하도록 변경할 수 있습니다.

기본적으로 utm_로 시작하거나 fbclid와 정확하게 일치하는 검색 매개변수는 삭제됩니다. 즉, /about.html?utm_campaign=abcd 요청은 /about.html의 사전 캐시된 항목으로 처리됩니다.

ignoreURLParametersMatching를 사용하여 다른 검색 매개변수 집합을 무시할 수 있습니다.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

디렉터리 색인

/로 끝나는 요청은 기본적으로 끝에 index.html가 추가된 항목과 일치합니다. 즉, /에 대한 수신 요청은 미리 캐시된 항목 /index.html으로 자동으로 처리될 수 있습니다.

directoryIndex를 설정하여 이를 다른 것으로 변경하거나 완전히 사용 중지할 수 있습니다.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

깔끔한 URL

요청이 미리 캐시된 항목과 일치하지 않으면 '깨끗한' URL('예쁜' URL이라고도 함)을 지원하기 위해 끝에 .html를 추가합니다. 즉, /about와 같은 요청은 /about.html의 미리 캐시된 항목에서 처리됩니다.

cleanUrls를 설정하여 이 동작을 사용 중지할 수 있습니다.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

맞춤 조작

수신 요청에서 미리 캐시된 애셋에 대한 맞춤 일치를 정의하려면 urlManipulation 옵션을 사용하면 됩니다. 이 콜백은 가능한 일치 항목의 배열을 반환해야 합니다.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

고급 사용

PrecacheController 직접 사용

기본적으로 workbox-precaching는 install 및 activate 리스너를 자동으로 설정합니다. 서비스 워커에 익숙한 개발자의 경우 더 많은 제어가 필요한 경우 이 방법이 바람직하지 않을 수 있습니다.

기본 내보내기를 사용하는 대신 PrecacheController를 직접 사용하여 미리 캐시할 항목을 추가하고 이러한 애셋이 설치되는 시점과 정리가 실행되는 시점을 결정할 수 있습니다.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

사전 캐시된 애셋 직접 읽기

workbox-precaching가 자동으로 실행할 수 있는 라우팅 컨텍스트 외부에서 사전 캐시된 애셋을 직접 읽어야 하는 경우가 있습니다. 예를 들어 전체 응답을 구성할 때 가져와서 사용해야 하는 부분적인 HTML 템플릿을 미리 캐시할 수 있습니다.

일반적으로 Cache Storage API를 사용하여 미리 캐시된 Response 객체를 가져올 수 있지만 한 가지 문제가 있습니다. cache.match()를 호출할 때 사용해야 하는 URL 캐시 키에 workbox-precaching가 자동으로 생성하고 유지 관리하는 버전 관리 매개변수가 포함될 수 있습니다.

올바른 캐시 키를 가져오려면 getCacheKeyForURL()를 호출하여 원본 URL을 전달한 다음 결과를 사용하여 적절한 캐시에서 cache.match()를 실행하면 됩니다.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

또는 사전 캐시된 Response 객체만 필요한 경우 matchPrecache()를 호출하면 됩니다. 그러면 올바른 캐시 키가 자동으로 사용되고 올바른 캐시에서 검색됩니다.

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

참고: precacheAndRoute를 통해 기본 인스턴스를 사용하는 대신 자체 PrecacheController 인스턴스를 사용하는 경우 해당 인스턴스에서 직접 matchPrecache() 또는 getCacheKeyForURL() 메서드를 호출해야 합니다.

오래된 미리 캐시 삭제

대부분의 Workbox 출시 버전은 사전 캐시된 데이터를 저장하기 위해 동일한 형식을 유지하며, 이전 버전의 Workbox로 만든 사전 캐시는 일반적으로 최신 버전에서 있는 그대로 사용할 수 있습니다. 하지만 드물게 미리 캐시 저장소에 기존 사용자가 모든 항목을 다시 다운로드해야 하고 이전에 미리 캐시된 데이터가 더 이상 사용되지 않는 중대한 변경사항이 있을 수 있습니다. 이러한 변경사항은 Workbox v3와 v4 출시 사이에 발생했습니다.

이러한 오래된 데이터는 정상적인 작업을 방해하지는 않지만 전반적인 저장용량 할당량 사용량에 기여하며, 이를 명시적으로 삭제하면 사용자에게 더 친절할 수 있습니다. 서비스 워커에 cleanupOutdatedCaches()를 추가하거나 Workbox의 빌드 도구 중 하나를 사용하여 서비스 워커를 생성하는 경우 cleanupOutdatedCaches: true를 설정하면 됩니다.

하위 리소스 무결성 사용

일부 개발자는 네트워크에서 미리 캐시된 URL을 검색할 때 하위 리소스 무결성 시행에서 제공하는 추가 보장을 원할 수 있습니다.

integrity라는 선택적 속성을 미리 캐시 매니페스트의 모든 항목에 추가할 수 있습니다. 제공된 경우 캐시를 채우는 데 사용되는 Request를 구성할 때 integrity 값으로 사용됩니다. 불일치가 있으면 미리 캐시 프로세스가 실패합니다.

어떤 미리 캐시 매니페스트 항목에 integrity 속성이 있어야 하는지 결정하고 사용할 적절한 값을 파악하는 것은 Workbox의 빌드 도구의 범위에 해당하지 않습니다. 대신 이 기능을 선택하려는 개발자는 Workbox에서 생성하는 미리 캐시 매니페스트를 수정하여 적절한 정보를 직접 추가해야 합니다. Workbox의 빌드 도구 구성에 있는 manifestTransform 옵션은 다음과 같은 경우에 유용합니다.

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

유형

CleanupResult

속성

• deletedCacheRequests

  문자열[]

InstallResult

속성

• notUpdatedURLs

  문자열[]

• updatedURLs

  문자열[]

PrecacheController

애셋의 효율적인 사전 캐싱을 실행합니다.

속성

• 생성자

  void

  새 PrecacheController를 만듭니다.

  constructor 함수는 다음과 같습니다.

  (options?: PrecacheControllerOptions) => {...}

  • 옵션

    PrecacheControllerOptions 선택사항

  • returns

    PrecacheController

• 전략

  전략

• 실행

  void

  현재 미리 캐시 매니페스트에 더 이상 없는 애셋을 삭제합니다. 서비스 워커 활성화 이벤트에서 이 메서드를 호출합니다.

  참고: 이 메서드는 event.waitUntil()를 자동으로 호출하므로 이벤트 핸들러에서 직접 호출하지 않아도 됩니다.

  activate 함수는 다음과 같습니다.

  (event: ExtendableEvent) => {...}

  • 이벤트

    ExtendableEvent

  • returns

    Promise<CleanupResult>

• addToCacheList

  void

  이 메서드는 사전 캐시 목록에 항목을 추가하여 중복 항목을 삭제하고 정보의 유효성을 확인합니다.

  addToCacheList 함수는 다음과 같습니다.

  (entries: (string | PrecacheEntry)[]) => {...}

  • entries

    (string | PrecacheEntry)[]

    미리 캐시할 항목의 배열입니다.

• createHandlerBoundToURL

  void

  사전 캐시에서 url를 조회하고 (버전 정보를 고려함) 상응하는 Response를 반환하는 함수를 반환합니다.

  createHandlerBoundToURL 함수는 다음과 같습니다.

  (url: string) => {...}

  • URL

    문자열

    Response를 조회하는 데 사용되는 미리 캐시된 URL입니다.

  • returns

    RouteHandlerCallback

• getCacheKeyForURL

  void

  지정된 URL을 저장하는 데 사용된 캐시 키를 반환합니다. `/index.html'과 같이 버전이 지정되지 않은 URL인 경우 검색 매개변수가 추가된 원래 URL이 캐시 키가 됩니다.

  getCacheKeyForURL 함수는 다음과 같습니다.

  (url: string) => {...}

  • URL

    문자열

    캐시 키를 조회하려는 URL입니다.

  • returns

    문자열

    원본 URL의 캐시 키에 해당하는 버전이 지정된 URL 또는 해당 URL이 사전 캐시되지 않은 경우 정의되지 않습니다.

• getCachedURLs

  void

  현재 서비스 워커에 의해 미리 캐시된 모든 URL 목록을 반환합니다.

  getCachedURLs 함수는 다음과 같습니다.

  () => {...}

  • returns

    문자열[]

    미리 캐시된 URL입니다.

• getIntegrityForCacheKey

  void

  getIntegrityForCacheKey 함수는 다음과 같습니다.

  (cacheKey: string) => {...}

  • cacheKey

    문자열

  • returns

    문자열

    캐시 키와 연결된 하위 리소스 무결성 또는 설정되지 않은 경우 정의되지 않음

• getURLsToCacheKeys

  void

  URL의 버전 정보를 고려하여 사전 캐시된 URL과 상응하는 캐시 키의 매핑을 반환합니다.

  getURLsToCacheKeys 함수는 다음과 같습니다.

  () => {...}

  • returns

    Map<stringstring>

    키 매핑을 캐시하는 URL입니다.

• 설치

  void

  새 애셋과 업데이트된 애셋을 미리 캐시합니다. 서비스 워커 설치 이벤트에서 이 메서드를 호출합니다.

  참고: 이 메서드는 event.waitUntil()를 자동으로 호출하므로 이벤트 핸들러에서 직접 호출하지 않아도 됩니다.

  install 함수는 다음과 같습니다.

  (event: ExtendableEvent) => {...}

  • 이벤트

    ExtendableEvent

  • returns

    Promise<InstallResult>

• matchPrecache

  void

  이는 cache.match()의 드롭인 대체 항목으로 다음과 같은 차이점이 있습니다.

  • 미리 캐시의 이름을 알고 해당 캐시만 체크인합니다.
  • 버전 관리 매개변수 없이 '원본' URL을 전달할 수 있으며, 현재 활성 상태인 해당 URL의 올바른 캐시 키를 자동으로 조회합니다.

  예: matchPrecache('index.html')는 실제 캐시 키가 '/index.html?__WB_REVISION__=1234abcd'이더라도 현재 활성 상태인 서비스 워커에 대해 올바른 사전 캐시된 응답을 찾습니다.

  matchPrecache 함수는 다음과 같습니다.

  (request: string | Request) => {...}

  • 요청

    문자열 | 요청

    미리 캐시에서 조회할 키 (버전 관리 매개변수 없음)입니다.

  • returns

    Promise<Response>

• precache

  void

  서비스 작업자가 설치될 때 사전 캐시 목록에 항목을 추가하고 중복 항목을 삭제하며 캐시에 파일을 저장합니다."

  이 메서드는 여러 번 호출될 수 있습니다.

  precache 함수는 다음과 같습니다.

  (entries: (string | PrecacheEntry)[]) => {...}

  • entries

    (string | PrecacheEntry)[]

PrecacheEntry

속성

• 무결성

  문자열 선택사항

• 수정 버전

  문자열 선택사항

• URL

  문자열

PrecacheFallbackPlugin

PrecacheFallbackPlugin를 사용하면 지정된 전략에서 응답을 생성할 수 없는 경우에 사용할 '오프라인 대체' 응답을 지정할 수 있습니다.

handlerDidError 플러그인 콜백을 가로채고 예상된 버전 매개변수를 자동으로 고려하여 미리 캐시된 응답을 반환하여 이를 실행합니다.

PrecacheController 인스턴스를 생성자에 명시적으로 전달하지 않으면 기본 인스턴스가 사용됩니다. 일반적으로 대부분의 개발자는 기본값을 사용하게 됩니다.

속성

• 생성자

  void

  연결된 fallbackURL로 새 PrecacheFallbackPlugin을 생성합니다.

  constructor 함수는 다음과 같습니다.

  (config: object) => {...}

  • config

    객체

    • fallbackURL

      문자열

      연결된 전략에서 응답을 생성할 수 없는 경우 대체로 사용할 사전 캐시된 URL입니다.

    • precacheController

      PrecacheController 선택사항

  • returns

    PrecacheFallbackPlugin

PrecacheRoute

workbox-precaching.PrecacheController 인스턴스를 사용하여 수신 요청을 일치시키고 미리 캐시에서 응답 가져오기를 처리하는 workbox-routing.Route의 서브클래스입니다.

속성

• 생성자

  void

  constructor 함수는 다음과 같습니다.

  (precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}

  • precacheController

    PrecacheController

    요청을 일치시키고 가져오기 이벤트에 응답하는 데 모두 사용되는 PrecacheController 인스턴스입니다.

  • 옵션

    PrecacheRouteOptions 선택사항

  • returns

    PrecacheRoute

• catchHandler

  RouteHandlerObject 선택사항

• handler

  RouteHandlerObject

• 일치

  RouteMatchCallback

• method

  HTTPMethod

• setCatchHandler

  void

  setCatchHandler 함수는 다음과 같습니다.

  (handler: RouteHandler) => {...}

  • handler

    RouteHandler

    응답으로 확인되는 Promise를 반환하는 콜백 함수

PrecacheRouteOptions

속성

• cleanURLs

  불리언 선택사항

• directoryIndex

  문자열 선택사항

• ignoreURLParametersMatching

  RegExp[] 선택사항

• urlManipulation

  urlManipulation 선택사항

PrecacheStrategy

사전 캐시된 애셋을 캐시하고 가져오기 위해 workbox-precaching.PrecacheController와 함께 작동하도록 설계된 workbox-strategies.Strategy 구현입니다.

참고: 이 클래스의 인스턴스는 PrecacheController를 만들 때 자동으로 생성됩니다. 일반적으로 직접 만들 필요는 없습니다.

속성

• 생성자

  void

  constructor 함수는 다음과 같습니다.

  (options?: PrecacheStrategyOptions) => {...}

  • 옵션

    PrecacheStrategyOptions 선택사항

  • returns

    PrecacheStrategy

• cacheName

  문자열

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[]

• copyRedirectedCacheableResponsesPlugin

  WorkboxPlugin

• defaultPrecacheCacheabilityPlugin

  WorkboxPlugin

• _awaitComplete

  void

  _awaitComplete 함수는 다음과 같습니다.

  (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • 요청

    요청

  • 이벤트

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  _getResponse 함수는 다음과 같습니다.

  (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

  • handler

    StrategyHandler

  • 요청

    요청

  • 이벤트

    ExtendableEvent

  • returns

    Promise<Response>

• _handleFetch

  void

  _handleFetch 함수는 다음과 같습니다.

  (request: Request, handler: StrategyHandler) => {...}

  • 요청

    요청

  • handler

    StrategyHandler

  • returns

    Promise<Response>

• _handleInstall

  void

  _handleInstall 함수는 다음과 같습니다.

  (request: Request, handler: StrategyHandler) => {...}

  • 요청

    요청

  • handler

    StrategyHandler

  • returns

    Promise<Response>

• 핸들

  void

  요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.

  전략 인스턴스가 Workbox workbox-routing.Route에 등록되면 경로가 일치할 때 이 메서드가 자동으로 호출됩니다.

  또는 이 메서드를 event.respondWith()에 전달하여 독립형 FetchEvent 리스너에서 사용할 수 있습니다.

  handle 함수는 다음과 같습니다.

  (options: FetchEvent | HandlerCallbackOptions) => {...}

  • 옵션

    FetchEvent | HandlerCallbackOptions

    FetchEvent 또는 아래에 나열된 속성이 있는 객체

  • returns

    Promise<Response>

• handleAll

  void

  workbox-strategies.Strategy~handle와 유사하지만 Response로 확인되는 Promise를 반환하는 대신 [response, done] 프로미스의 튜플을 반환합니다. 여기서 앞의 프로미스(response)는 handle()가 반환하는 것과 동일하고 뒤의 프로미스는 전략 실행의 일환으로 event.waitUntil()에 추가된 프로미스가 완료되면 확인되는 프로미스입니다.

  done 약속을 기다려 전략에서 실행하는 추가 작업 (일반적으로 응답 캐싱)이 성공적으로 완료되도록 할 수 있습니다.

  handleAll 함수는 다음과 같습니다.

  (options: FetchEvent | HandlerCallbackOptions) => {...}

  • 옵션

    FetchEvent | HandlerCallbackOptions

    FetchEvent 또는 아래에 나열된 속성이 있는 객체

  • returns

    [Promise<Response>, Promise<void>]

    응답이 해결되는 시점과 핸들러가 모든 작업을 완료한 시점을 확인하는 데 사용할 수 있는 [response, done] 약속의 튜플입니다.

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

유형

함수

매개변수

• { url }

  객체

  • URL

    URL

반환 값

• URL[]

메서드

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

미리 캐싱 전략에 플러그인을 추가합니다.

매개변수

• 플러그인

  WorkboxPlugin[]

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

미리 캐시된 애셋으로 [네트워크 요청]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests에 응답하는 fetch 리스너를 서비스 워커에 추가합니다.

미리 캐시되지 않은 애셋에 대한 요청은 FetchEvent에 응답되지 않으므로 이벤트가 다른 fetch 이벤트 리스너로 전달될 수 있습니다.

매개변수

• 옵션

  PrecacheRouteOptions 선택사항

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

이전 버전의 Workbox에서 만든 호환되지 않는 미리 캐시를 정리하는 activate 이벤트 리스너를 추가합니다.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

기본 PrecacheController 인스턴스에서 PrecacheController#createHandlerBoundToURL를 호출하는 도우미 함수입니다.

자체 PrecacheController를 만드는 경우 이 함수를 사용하는 대신 해당 인스턴스에서 PrecacheController#createHandlerBoundToURL를 호출하세요.

매개변수

• URL

  문자열

  Response를 조회하는 데 사용되는 미리 캐시된 URL입니다.

반환 값

• RouteHandlerCallback

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

URL을 가져와서 미리 캐시에서 항목을 조회하는 데 사용할 수 있는 상응하는 URL을 반환합니다.

상대 URL이 제공되면 서비스 워커 파일의 위치가 기준으로 사용됩니다.

버전 정보가 없는 사전 캐시된 항목의 경우 캐시 키는 원본 URL과 동일합니다.

버전 정보가 있는 사전 캐시된 항목의 경우 캐시 키는 버전 정보를 추적하는 데 사용되는 쿼리 매개변수가 추가된 원래 URL입니다.

매개변수

• URL

  문자열

  캐시 키를 조회할 URL입니다.

반환 값

• 문자열 | undefined

  해당 URL에 해당하는 캐시 키입니다.

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

기본 PrecacheController 인스턴스에서 PrecacheController#matchPrecache를 호출하는 도우미 함수입니다.

자체 PrecacheController를 만드는 경우 이 함수를 사용하는 대신 해당 인스턴스에서 PrecacheController#matchPrecache를 호출하세요.

매개변수

• 요청

  문자열 | 요청

  미리 캐시에서 조회할 키 (버전 관리 매개변수 없음)입니다.

반환 값

• Promise<Response | undefined>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

서비스 작업자가 설치될 때 사전 캐시 목록에 항목을 추가하고 중복 항목을 삭제하며 캐시에 파일을 저장합니다."

이 메서드는 여러 번 호출될 수 있습니다.

참고: 이 방법은 캐시된 파일을 제공하지 않습니다. 파일만 미리 캐시합니다. 네트워크 요청에 응답하려면 workbox-precaching.addRoute를 호출합니다.

미리 캐시할 파일 배열이 하나만 있는 경우 workbox-precaching.precacheAndRoute를 호출하면 됩니다.

매개변수

• entries

  (string | PrecacheEntry)[]

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

이 메서드는 미리 캐시 목록에 항목을 추가하고 가져오기 이벤트에 응답하는 경로를 추가합니다.

단일 호출로 workbox-precaching.precache 및 workbox-precaching.addRoute를 호출하는 편의 메서드입니다.

매개변수

• entries

  (string | PrecacheEntry)[]

  미리 캐시할 항목의 배열입니다.

• 옵션

  PrecacheRouteOptions 선택사항