Workbox Routing

참조 페이지 : htps : //에서 ゔぇぺぺrs. 오, ぇ. m / u b / 및 ls / rk box / mozue s / rk bo x-rochun g

Navigation Route 작성 방법

사이트가 SPA(단일 페이지 애플리케이션)인 경우 navigation requests에 대한 모든 응답에 NavigationRoute를 사용할 수 있습니다.

보충: navigation requests 에 대한 자세한 설명은 여기 . 어쩌면 "네비게이션 요청은 'document'를 목적지로하는 요청이다"라는 것입니다.

workbox.routing.registerNavigationRoute(
  // 事前に'/single-page-app.html'がプリキャッシュされているとします
  // 一致するキャッシューキーを取得します
  workbox.precaching.getCacheKeyForURL('single-page-app.html')
)

* 참고 : getCacheKeyForURL 는 url을 인수로 취하여 캐시 키( string 형식)를 반환합니다. url이 /index.html와 같이 버전 관리되지 않으면 캐시 키는 (search 매개 변수가있는) url 자체가됩니다.

사용자가 브라우저에서 사이트에 액세스할 때마다 페이지에 대한 요청은 navigation request 처리되고 캐시된 /single-page-app.html가 응답으로 서브됩니다. (주 : workbox-caching 또는 자신의 설치 단계를 통해 페이지를 미리 캐시하는 경우)

기본적으로 모든 navigation requests에 적용됩니다. 만약 URL의 서브 세트에만 적용을 제한 아는 경우는 whitelist 와 blacklist 로 라우팅과 매치한 페이지를 타겟으로 하는 것이 가능합니다.

workbox.routing.registerNavigationRoute(
  // 事前に'/single-pafe-app.html'がプリキャッシュされているとします
  // 一致するキャッシューキーを取得します
  workbox.precaching.getCacheKeyForURL('single-page-app.html', {
  whitelist: [
    new RegExp('/blog/')
  ],
  blacklist: [
    new RegExp('/blog/restricted/'),
  ]
  })
)

whitelist 와 blacklist 에 같은 URL 가 지정되고 있는 경우는 blacklist 의 지정이 생깁니다.

Default Handler 설정

루트와 일치하지 않는 요청에 대해 "핸들러"를 설정하려면 default handler를 사용할 수 있습니다.

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

Catch Handler 설정

요청이 발생했을 때 경로 설정이 오류가 발생하면 catch handler에서 응답 설정
수 있습니다.

workbox.routing.setCatchHandler(({event}) => {
  if (event.request.mode === 'navigate') {
    return caches.match('/error-page.html');
  }
  return Response.error();
})

GET 이외의 요청에 대한 경로 설정

기본적으로 모든 경로는 GET 요청을 가정합니다.
POST 와 같은 다른 요청의 경로를 설정하려면 요청을 등록할 때 메서드를 정의해야 합니다.

workbox.routing.registerRoute(
  matchCb,
  handlerCb,
  'POST'
)

workbox.routing.regiterRoute(
  new RegExp('/api/.*\.json'),
  handlerCb,
  'POST'
)

라우터 로그

workbox-routing 는 Workbox에서 처리되는 URL을 강조 표시하고 로그를 반환합니다.



로그를 자세히 보려면 ​​로그 수준을 debug로 설정합니다. 자세한 내용은 여기

보충:

workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);

응용편

handleRequest() 메소드를 사용하면 라우팅의 세밀한 설정이 가능합니다.

const router = new DefaultRouter();
self.addEventListener('fetch', (evebt => {}
  const responsePromise = router.handleRequest(event);
  if (responsePromise) {
  // 指定したリクエストを捌くルートが見つかったとき
   event.respondWith(responsePromise)
  } else {
    リクエストを捌くルートが見つからないとき
  }
))

Router

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