Service Worker Static Routing API를 사용해 특정 경로에 대해 서비스 워커를 우회

Rachel Andrew

Chrome 123부터 Service Worker Static Routing API를 사용할 수 있습니다. 이 API를 사용하면 특정 리소스 경로를 가져오는 방법을 선언적으로 지정할 수 있습니다. 즉, 브라우저는 캐시 또는 네트워크에서 직접 응답을 가져오는 것만을 위해 서비스 워커를 실행할 필요가 없습니다. 이 API는 Chrome 116부터 오리진 트라이얼을 진행 중이며 이 게시물에서는 Chrome 123에서 출시되는 API를 자세히 설명합니다.

API 사용

서비스 워커 install 이벤트에서 API 호출 event.addRoutes를 사용합니다. 이 메서드에 다음 속성이 있는 경로 목록을 전달합니다.

condition

규칙이 적용되는 시점을 지정합니다. 다음 속성을 허용합니다.

• urlPattern: URLPattern 생성자에 전달할 수 있는 URLPattern 인스턴스 또는 유효한 URLPattern을 나타내는 문자열입니다.
• requestMethod: 요청 메서드가 포함된 문자열입니다.
• requestMode: 요청 모드가 포함된 문자열입니다.
• requestDestination: 요청 대상이 포함된 문자열입니다.
• runningStatus: "running" 또는 "not-running"의 문자열입니다. 서비스 워커의 실행 상태를 나타냅니다.

source

condition와 일치하는 리소스가 로드되는 방식을 지정합니다. 다음 문자열 중 하나입니다.

• "network"
• "cache"
• "fetch-event"
• "race-network-and-fetch-handler"

다음 예에서 '/articles'로 시작하는 URL은 현재 실행 중인 경우 서비스 워커로 라우팅됩니다. urlPattern 및 runningStatus와 같이 여러 조건이 있는 경우 모든 조건이 충족되어야 경로가 사용됩니다.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

다음 예에서는 양식에 대한 게시물이 네트워크로 직접 전송되고 서비스 워커를 우회합니다.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});

다음 예에서는 "pictures"라는 캐시 저장소가 파일 확장자가 .png 또는 .jpg인 파일을 가져오는 데 사용됩니다.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
      or: [
        {urlPattern: "*.png"},
        {urlPattern: "*.jpg"}
      ]
    },
    source: {
      cacheName: "pictures"
    }
  });
});

오리진 트라이얼의 변경사항

원래 출처 무료 체험판은 InstallEvent.addRoutes() 대신 InstallEvent.registerRouter()를 사용했으므로 registerRouter() 메서드는 한 번만 호출할 수 있었습니다. 이번 변경사항은 원본 체험판에 대한 커뮤니티 의견을 바탕으로 이루어졌습니다.

또한 이 새로운 API는 Chrome 121에서 도입된 URLPattern 변경사항을 활용하고, 요청 메서드, 모드, 대상을 지정하는 기능을 추가하며, 소스 옵션을 추가합니다.

Chrome DevTools 지원

등록된 라우터 규칙은 애플리케이션 패널의 서비스 워커 탭에 표시됩니다.

Network 패널에서 요청이 등록된 규칙과 일치하면 크기 열에 표시됩니다. 크기 열 위로 포인터를 가져가면 등록된 라우터 ID가 표시됩니다. 해당 규칙이 애플리케이션 탭에 표시됩니다.