작업 상자 탐색-미리 로드

'탐색 미리 로드를 사용하여 서비스 워커 속도 향상'에서는 탐색 미리 로드가 무엇인지, 그리고 서비스 워커가 탐색 요청을 명시적으로 처리하지 않는 웹 앱에 어떤 이점을 제공하는지 설명합니다.

이 모듈은 어떤 역할을 하나요?

workbox-navigation-preload는 런타임 시 현재 브라우저가 탐색 미리 로드를 지원하는지 확인하며, 지원되는 경우 자동으로 activate 이벤트 핸들러를 만들어 사용 설정합니다.

모든 Workbox에서 네트워크 요청을 처리하는 workbox-core 내부의 공유 코드도 미리 로드 응답을 자동으로 활용하도록 업데이트되었습니다(사용 가능한 경우). 즉, 사용 설정되면 모든 기본 제공 전략에서 탐색 미리 로드를 자동으로 활용할 수 있습니다.

누가 내비게이션 미리 로드를 사용 설정해야 하나요?

이미 사전 캐시된 HTML (앱 셸 대체로 구성될 수 있음)으로 응답하여 탐색을 처리하고 있는 개발자는 탐색 미리 로드를 사용 설정할 필요가 없습니다. 이 기능은 HTML을 사전 캐시할 수 없지만 Workbox를 사용하여 사이트의 다른 애셋 캐싱을 처리하려는 개발자의 탐색 지연 시간을 줄이기 위한 것입니다.

예를 들어 앱 셸 패턴을 따르고 사전 캐시된 HTML을 사용하도록 이미 설정된 탐색 경로가 있는 경우 탐색 미리 로드를 사용 설정하는 것은 낭비입니다. 미리 캐시된 HTML이 무조건 사용되므로 미리 로드 요청과 연결된 네트워크 응답은 사용되지 않습니다.

기본 사용법

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

브라우저 지원 스토리란 무엇인가요?

현재 Chrome이 탐색 미리 로드를 지원하는 유일한 브라우저입니다. enable()는 런타임 시 브라우저 지원 여부를 확인하고 현재 브라우저에서 지원하는 경우에만 탐색 미리 로드를 사용 설정하려고 합니다. 따라서 서비스 워커에서 무조건 enable()를 호출하는 것이 안전합니다.

이러한 브라우저는 탐색 지연 시간 감소의 이점을 누릴 수 없다는 점을 알고 있어야 합니다. 탐색 요청을 처리하지 않고 탐색 미리 로드를 사용하지 않는 서비스 워커를 제공할 경우 성능에 미치는 영향을 신중하게 측정하는 것이 좋습니다.

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()