작업 상자 브로드캐스트 업데이트

캐시된 항목이 있는 요청에 응답할 때 속도가 빠르지만 사용자가 오래된 데이터를 보게 될 수 있다는 장단점이 있습니다.

workbox-broadcast-update 패키지는 캐시된 응답이 업데이트되었음을 Window 클라이언트에 알리는 표준 방법을 제공합니다. 이는 StaleWhileRevalidate 전략과 함께 가장 일반적으로 사용됩니다.

'재검증'을 통해 이 전략의 단계에서는 응답에서 응답을 네트워크를 사용하는 경우 이 모듈은 메시지 (도메인을 통해 postMessage()) 현재 서비스 워커의 범위 내에 있는 모든 Window 클라이언트에 적용됩니다.

Window 클라이언트는 업데이트를 리슨하고 업데이트가 제공된다는 메시지를 사용자에게 자동으로 표시하는 등의 적절한 조치를 취할 수 있습니다.

업데이트는 어떻게 결정되나요?

캐시된 파일과 새 파일의 특정 헤더 Response 객체가 비교되며, 헤더 중 하나라도 다른 값을 갖는 경우 업데이트로 간주됩니다

기본적으로 Content-Length, ETag, Last-Modified 헤더가 비교됩니다.

Workbox는 특히 대용량 응답의 경우 더 효율적으로 작동하기 위해 응답 본문의 바이트 단위 비교 대신 헤더 값을 사용합니다.

브로드캐스트 업데이트 사용

이 라이브러리는 StaleWhileRevalidate 캐싱 전략과 함께 사용하도록 설계되었습니다. 이 전략은 캐시된 응답을 즉시 반환하는 것을 포함하지만 캐시를 비동기식으로 업데이트하는 메커니즘도 제공하기 때문입니다.

업데이트를 브로드캐스트하려면 broadcastUpdate.BroadcastUpdatePlugin를 전략 옵션을 살펴보겠습니다.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [new BroadcastUpdatePlugin()],