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

Rachel Andrew

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

API 사용

API를 사용하려면 서비스 워커 install 이벤트에서 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 지원

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

애플리케이션 패널에서 강조 표시된 라우터 규칙

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

네트워크 패널에 표시된 라우터 ID입니다.