'탐색 미리 로드로 서비스 워커 속도 향상'에서는 탐색 미리 로드의 정의와 서비스 워커가 탐색 요청을 명시적으로 처리하지 않는 웹 앱에 미치는 이점을 잘 설명합니다.
이 모듈은 무엇을 하나요?
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);
브라우저 지원은 어떻게 되나요?
현재 탐색 미리 로드를 지원하는 브라우저는 Google Chrome뿐입니다.
enable()는 런타임 시 브라우저 지원을 확인하고 현재 브라우저에서 지원하는 경우에만 탐색 미리 로드를 사용 설정하려고 시도합니다. 따라서 서비스 워커에서 무조건 enable()를 호출해도 됩니다.
이러한 브라우저는 탐색 지연 시간 감소의 이점을 누리지 못한다는 점에 유의해야 하며, 탐색 요청을 처리하지 않고 탐색 미리 로드를 사용하지 않는 서비스 워커를 제공할 때의 성능 영향을 신중하게 측정하는 것이 좋습니다.
메서드
disable()
workbox-navigation-preload.disable()
브라우저에서 탐색 미리 로드를 지원하는 경우 이로 인해 사용 중지됩니다.
enable()
workbox-navigation-preload.enable(
headerValue?: string,
)
브라우저가 탐색 미리 로드를 지원하는 경우 사용 설정됩니다.
매개변수
-
headerValue
문자열 선택사항
isSupported()
workbox-navigation-preload.isSupported()
반환 값
-
부울
현재 브라우저에서 탐색 미리 로드를 사용 설정할 수 있는지 여부입니다.