작업 상자 사전 캐싱

서비스 워커의 한 가지 기능은 서비스 워커를 설치할 때 파일 집합을 캐시에 저장하는 기능입니다. 서비스 워커가 사용되기 전에 콘텐츠를 캐시하므로 이를 흔히 '사전 캐싱'이라고 부릅니다.

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

Workbox는 API를 간소화하고 애셋이 효율적으로 다운로드되도록 보장하여 사전 캐싱과 관련된 까다로운 작업을 크게 덜어줍니다.

작업 상자 사전 캐싱의 작동 방식

웹 앱이 처음 로드되면 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)는 파일 콘텐츠의 자동 생성 해시인 버전 속성을 명시적으로 설정합니다. 자바스크립트 및 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 지우기

요청이 사전 캐시와 일치하지 않으면 끝에 .html를 추가하여 '정상적인' URL('pretty' URL이라고도 함)을 지원합니다. 즉, /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) => {...}

  • event

    ExtendableEvent

  • returns

    Promise<CleanupResult>

• addToCacheList

  void

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

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

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

  • entries

    (문자열 | 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

    지도<string>

    키 매핑을 캐시할 URL입니다.

• 설치

  void

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

  참고: 이 메서드가 자동으로 event.waitUntil()를 호출하므로 이벤트 핸들러에서 직접 호출할 필요가 없습니다.

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

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

  • event

    ExtendableEvent

  • returns

    Promise<InstallResult>

• matchPrecache

  void

  이는 cache.match()의 삽입형 교체 역할을 하며 다음과 같은 차이점이 있습니다.

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

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

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

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

  • 요청

    string | 요청

    사전 캐시에서 조회할 키 (매개변수 수정 없이)입니다.

  • returns

    프로미스<응답>

• 사전 캐시

  void

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

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

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

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

  • entries

    (문자열 | PrecacheEntry)[]

PrecacheEntry

속성

• 무결성

  문자열 선택사항

• 수정 버전

  문자열 선택사항

• url

  문자열

PrecacheFallbackPlugin

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

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

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

속성

• 생성자

  void

  연결된 대체 URL을 사용하여 새 PrecacheFallbackPlugin을 구성합니다.

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

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

  • config

    객체

    • fallbackURL

      문자열

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

    • precacheController

      PrecacheController 선택사항

  • returns

    PrecacheFallbackPlugin

PrecacheRoute

workbox-routing.Route의 서브클래스로, workbox-precaching.PrecacheController 인스턴스를 가져와서 들어오는 요청을 일치시키고 사전 캐시에서 응답 가져오기를 처리하는 데 사용합니다.

속성

• 생성자

  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

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

PrecacheRouteOptions

속성

• cleanURLs

  부울 선택사항

• directoryIndex

  문자열 선택사항

• ignoreURLParametersMatching

  RegExp[] 선택사항

• urlManipulation

  urlManipulation 선택사항

PrecacheStrategy

workbox-strategies.Strategy 구현은 특히 workbox-precaching.PrecacheController와 함께 사용하여 사전 캐시된 애셋을 캐시하고 가져오도록 설계되었습니다.

참고: 이 클래스의 인스턴스는 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

    프로미스<응답>

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    프로미스<응답>

• _handleFetch

  void

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

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

  • 요청

    요청

  • handler

    StrategyHandler

  • returns

    프로미스<응답>

• _handleInstall

  void

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

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

  • 요청

    요청

  • handler

    StrategyHandler

  • returns

    프로미스<응답>

• 핸들

  void

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

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

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

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

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

  • 옵션

    FetchEvent | HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    프로미스<응답>

• 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>]

    응답이 결정되는 시점과 핸들러가 모든 작업을 완료한 시점을 결정하는 데 사용할 수 있는 [응답, 완료] 프로미스의 튜플입니다.

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입니다.

반환 값

• string | undefined

  URL에 해당하는 캐시 키

matchPrecache()

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

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

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

매개변수

• 요청

  string | 요청

  사전 캐시에서 조회할 키 (매개변수 수정 없이)입니다.

반환 값

• Promise<Response | undefined>

precache()

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

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

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

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

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

매개변수

• entries

  (문자열 | PrecacheEntry)[]

precacheAndRoute()

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

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

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

매개변수

• entries

  (문자열 | PrecacheEntry)[]

  사전 캐시할 항목의 배열입니다.

• 옵션

  PrecacheRouteOptions 선택사항