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

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

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

이 전략의 '재검증' 단계에서 이전에 캐시된 것과 다른 응답을 네트워크에서 검색할 때마다 이 모듈은 postMessage()를 통해 현재 서비스 워커의 범위 내에 있는 모든 창 클라이언트에 메시지를 전송합니다.

창 클라이언트는 업데이트를 수신 대기하고 업데이트가 있음을 알리는 메시지를 사용자에게 자동으로 표시하는 등 적절한 작업을 할 수 있습니다.

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

캐시된 객체와 새로운 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()],
  })
);

웹 앱에서 DOMContentLoaded 이벤트가 실행되기 전에 다음과 같이 이러한 이벤트를 수신 대기할 수 있습니다.

navigator.serviceWorker.addEventListener('message', async event => {
  // Optional: ensure the message came from workbox-broadcast-update
  if (event.data.meta === 'workbox-broadcast-update') {
    const {cacheName, updatedURL} = event.data.payload;

    // Do something with cacheName and updatedURL.
    // For example, get the cached content and update
    // the content on the page.
    const cache = await caches.open(cacheName);
    const updatedResponse = await cache.match(updatedURL);
    const updatedText = await updatedResponse.text();
  }
});

메시지 형식

웹 앱에서 message 이벤트 리스너가 호출되면 event.data 속성의 형식은 다음과 같습니다.

{
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  // The two payload values vary depending on the actual update:
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

확인할 헤더 맞춤설정

headersToCheck 속성을 설정하여 확인할 헤더를 맞춤설정할 수 있습니다.

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({
        headersToCheck: ['X-My-Custom-Header'],
      }),
    ],
  })
);

고급 사용법

대부분의 개발자는 위와 같이 특정 전략의 플러그인으로 workbox-broadcast-update를 사용하지만 서비스 워커 코드에서 기본 로직을 사용할 수도 있습니다.

import {BroadcastCacheUpdate} from 'workbox-broadcast-update';

const broadcastUpdate = new BroadcastCacheUpdate({
  headersToCheck: ['X-My-Custom-Header'],
});

const cacheName = 'api-cache';
const request = new Request('https://example.com/api');

const cache = await caches.open(cacheName);
const oldResponse = await cache.match(request);
const newResponse = await fetch(request);

broadcastUpdate.notifyIfUpdated({
  cacheName,
  oldResponse,
  newResponse,
  request,
);

workbox-broadcast-update.responsesAreSame(
  firstResponse: Response,
  secondResponse: Response,
  headersToCheck: string[],
)