워크박스 라우팅

서비스 워커는 페이지에 대한 네트워크 요청을 가로챌 수 있습니다. 캐시된 콘텐츠, 네트워크의 콘텐츠 또는 서비스 워커에서 생성된 콘텐츠로 브라우저에 응답할 수 있습니다.

workbox-routing는 응답을 제공하는 다른 함수로 이러한 요청을 쉽게 '라우팅'할 수 있는 모듈입니다.

라우팅 수행 방법

네트워크 요청으로 인해 서비스 워커 가져오기 이벤트가 발생하면 workbox-routing는 제공된 경로와 핸들러를 사용하여 요청에 응답하려고 시도합니다.

위의 주요 내용은 다음과 같습니다.

• 요청 메서드는 중요합니다. 기본적으로 경로는 GET 요청에 등록됩니다. 다른 유형의 요청을 가로채려면 메서드를 지정해야 합니다.

• 경로 등록 순서가 중요합니다. 요청을 처리할 수 있는 여러 경로가 등록된 경우 먼저 등록된 경로가 요청에 응답하는 데 사용됩니다.

경로를 등록하는 데는 콜백, 정규 표현식, 경로 인스턴스를 사용하는 등 몇 가지 방법이 있습니다.

경로 일치 및 처리

작업 상자의 '경로'는 두 가지 기능일 뿐입니다. 경로가 요청과 일치하는지 확인하는 '일치' 함수와 요청을 처리하고 응답으로 응답해야 하는 '처리' 함수입니다.

Workbox에는 일치 및 처리를 자동으로 수행하는 몇 가지 도우미가 제공되지만, 다른 동작이 필요한 경우 맞춤 일치 및 핸들러 함수를 작성하는 것이 가장 좋습니다.

일치 콜백 함수에는 ExtendableEvent, Request, 진실한 값을 반환하여 일치시킬 수 있는 URL 객체가 전달됩니다. 간단한 예로 다음과 같이 특정 URL과 일치시킬 수 있습니다.

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

대부분의 사용 사례는 url 또는 request 검사 / 테스트를 통해 처리할 수 있습니다.

핸들러 콜백 함수에는 'match' 함수에서 반환된 값인 params 값과 함께 동일한 ExtendableEvent, Request, URL 객체가 제공됩니다.

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

핸들러는 Response로 확인되는 프로미스를 반환해야 합니다. 이 예시에서는 async 및 await를 사용합니다. 내부적으로 반환 Response 값은 프로미스로 래핑됩니다.

이러한 콜백은 다음과 같이 등록할 수 있습니다.

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

유일한 제한사항은 'match' 콜백은 동기식으로 진실한 값을 반환해야 하며 비동기 작업을 실행할 수 없다는 것입니다. 그 이유는 Router가 가져오기 이벤트에 동기식으로 응답하거나 다른 가져오기 이벤트로 넘어갈 수 있도록 허용해야 하기 때문입니다.

일반적으로 'handler' 콜백은 다음과 같이 workbox-strategies에서 제공하는 전략 중 하나를 사용합니다.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(matchCb, new StaleWhileRevalidate());

이 페이지에서는 workbox-routing에 중점을 두지만 작업 상자 전략 관련 전략에 대해 자세히 알아보기

정규 표현식 경로를 등록하는 방법

일반적인 방법은 'match' 콜백 대신 정규 표현식을 사용하는 것입니다. Workbox를 사용하면 다음과 같이 쉽게 구현할 수 있습니다.

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

동일한 출처의 요청인 경우 요청의 URL이 정규 표현식과 일치하면 이 정규 표현식이 일치합니다.

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

하지만 교차 출처 요청의 경우 정규 표현식은 URL의 시작 부분과 일치해야 합니다. 그 이유는 정규 표현식 new RegExp('/styles/.*\\.css')을 사용하여 서드 파티 CSS 파일과 일치시키려고 할 가능성이 낮기 때문입니다.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

이 동작을 원했다면 정규 표현식이 URL의 시작 부분과 일치하는지 확인하기만 하면 됩니다. https://cdn.third-party-site.com에 대한 요청을 일치시키려면 정규 표현식 new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css')를 사용하면 됩니다.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

로컬 및 서드 파티를 모두 일치시키려면 정규 표현식 시작 부분에 와일드 카드를 사용할 수 있지만, 웹 앱에서 예기치 않은 동작을 일으키지 않도록 주의해서 수행해야 합니다.

탐색 경로를 등록하는 방법

사이트가 단일 페이지 앱인 경우 NavigationRoute를 사용하여 모든 탐색 요청에 특정 응답을 반환할 수 있습니다.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

사용자가 브라우저에서 사이트로 이동할 때마다 페이지 요청이 탐색 요청이 되고 캐시된 페이지 /app-shell.html가 제공됩니다. (참고: workbox-precaching 또는 자체 설치 단계를 통해 페이지를 캐시해야 합니다.)

이 메서드는 기본적으로 모든 내비게이션 요청에 응답합니다. URL의 하위 집합으로 응답하도록 제한하려면 allowlist 및 denylist 옵션을 사용하여 이 경로와 일치하는 페이지를 제한하면 됩니다.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

한 가지 유의해야 할 점은 URL이 allowlist와 denylist에 모두 있는 경우 denylist가 우선한다는 것입니다.

기본 핸들러 설정

경로와 일치하지 않는 요청에 대해 '핸들러'를 제공하려면 기본 핸들러를 설정할 수 있습니다.

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

캐치 핸들러 설정

경로에서 오류가 발생하는 경우 catch 핸들러를 설정하여 단계적으로 캡처하고 성능이 저하될 수 있습니다.

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

GET이 아닌 요청에 대한 경로 정의

기본적으로 모든 경로는 GET 요청에 대한 경로로 간주됩니다.

POST 요청과 같은 다른 요청을 라우팅하려면 경로를 등록할 때 다음과 같이 메서드를 정의해야 합니다.

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

라우터 로깅

Workbox를 통해 처리 중인 URL을 보여주는 workbox-routing의 로그를 사용하여 요청 흐름을 파악할 수 있어야 합니다.

더 자세한 정보가 필요한 경우 로그 수준을 debug로 설정하여 라우터에서 처리하지 않은 요청의 로그를 볼 수 있습니다. 로그 수준 설정에 관한 자세한 내용은 디버깅 가이드를 참고하세요.

고급 사용법

작업 상자 라우터에 요청이 주어지는 시점을 더 세부적으로 관리하려면 라우터를 사용하여 요청에 응답하려고 할 때마다 자체 Router 인스턴스를 만들고 handleRequest() 메서드를 호출하면 됩니다.

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

Router를 직접 사용하는 경우 Route 클래스 또는 확장 클래스를 사용하여 경로를 등록해야 합니다.

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string|RegExp|RouteMatchCallback|Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)