워크박스 라우팅

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

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

라우팅 수행 방법

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

위에서 알아야 할 주요 사항은 다음과 같습니다.

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

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

경로를 등록하는 방법에는 콜백, 일반 표현식 또는 경로 인스턴스를 사용할 수 있습니다

경로의 일치 및 처리

'경로' 두 가지 기능인 '일치' 함수 경로가 요청 및 '처리 중'과 일치해야 하는지 확인 함수 요청을 처리하고 응답으로 응답해야 합니다.

Workbox는 이 작업에 대한 일치 및 처리를 수행하는 몇 가지 도우미가 하지만 다른 행동을 원한다면 핸들러 함수를 사용하는 것이 가장 좋습니다.

가 match 콜백 함수 에는 ExtendableEvent님, Request 및 URL 객체 참 값을 반환하여 매칭을 수행합니다. 간단한 예로, 다음과 같습니다.

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

대부분의 사용 사례는 url 또는 request입니다.

가 핸들러 콜백 함수 는 ExtendableEvent님, Request 및 URL 객체를 'match'에 의해 반환되는 값인 params 값 함수를 사용하세요.

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);

유일한 제한사항은 콜백은 동기식으로 true를 반환해야 합니다. 비동기 작업을 수행할 수 없습니다. 이렇게 하는 이유는 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') 정규 표현식을 사용하면 그럴 가능성이 낮습니다. 제3자 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이denylist allowlist 및 denylist

기본 핸들러 설정

'핸들러' 경로가 일치하지 않는 요청의 경우 기본 핸들러를 설정할 수 있습니다.

import {setDefaultHandler} from 'workbox-routing';

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

Catch 핸들러 설정

경로에서 오류가 발생하는 경우 다음을 캡처하고 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-routing - 처리 중인 URL을 강조 표시합니다. Workbox를 통해 전송합니다.

더 자세한 정보가 필요한 경우 로그 수준을 debug로 설정하면 됩니다. 라우터에서 처리하지 않는 요청에 대한 로그를 봅니다. 자세한 내용은 디버깅 가이드에서 로그 수준을 설정합니다

고급 사용

Workbox Router가 제공되는 시기를 더 세밀하게 제어하려는 경우 자체 포드를 만들 수 있는 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,
)