작업 상자 백그라운드 동기화

웹 서버로 데이터를 보낼 때 요청이 실패하는 경우가 있습니다. 그것은 사용자의 연결이 끊어졌거나 서버가 다운되면 어떤 경우든 요청을 전송하여 나중에 다시 실행할 수 있습니다.

새로운 BackgroundSync API 이 문제에 대한 이상적인 솔루션입니다. 서비스 워커가 네트워크 요청이 실패하면 sync 이벤트를 수신하도록 등록할 수 있습니다. 브라우저에서 연결이 재개되었다고 생각하면 전송됩니다. 사용자가 동기화를 중단한 후에도 동기화 이벤트가 전달될 수 훨씬 더 효과적이므로 실패한 요청 재시도

Workbox 백그라운드 동기화는 BackgroundSync API에 추가하고 이 API의 사용을 다른 Workbox 모듈과 통합합니다. 그것은 또한 아직 구현 기능이 구현되지 않은 브라우저를 위한 대체 전략을 BackgroundSync의 도움을 받을 수 있습니다.

BackgroundSync API를 지원하는 브라우저에서 자동으로 재생할 수 없습니다. 사용자를 대신하여 브라우저에서 관리하는 간격입니다. 재생 시도 사이에 지수 백오프를 사용할 가능성이 높습니다. 브라우저에 기본적으로 BackgroundSync API를 지원하지 않는 경우 Workbox Background Sync에서 서비스 워커가 시작될 때마다 자동으로 재생을 시도합니다.

기본 사용법

백그라운드 동기화를 사용하는 가장 쉬운 방법은 Plugin 실패한 요청을 자동으로 큐에 추가하고 향후 sync일 때 다시 시도 이벤트가 실행됩니다.

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
  'POST'
);

BackgroundSyncPlugin는 fetchDidFail 플러그인 콜백 fetchDidFail는 예외가 발생한 경우에만 호출됩니다. 지양합니다 즉, 요청이 있을 경우 요청이 재시도되지 않습니다. 수신된 응답을 4xx 또는 5xx 오류 상태. 5xx 등의 결과로 이어지는 모든 요청을 재시도하려면 방법은 fetchDidSucceed 플러그인 추가 전략을 세울 수 있습니다.

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

고급 사용

Workbox 백그라운드 동기화는 Queue 클래스도 제공합니다. 이 클래스는 실패한 요청을 인스턴스화하고 추가할 수 있습니다 실패한 요청은 (IndexedDB) 브라우저에서 연결이 복원되었다고 판단될 때 재시도됩니다 (즉, 가 동기화 이벤트를 수신할 때).

큐 만들기

Workbox 백그라운드 동기화 대기열을 생성하려면 대기열 이름 (고유한 이름이어야 함) origin의 구성원입니다.

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

대기열 이름은 register()간 전 세계 SyncManager 그것은 또한 객체 저장소 이름: IndexedDB 데이터베이스를 생성합니다.

큐에 요청 추가

큐 인스턴스를 만들고 나면 실패한 요청을 인스턴스에 추가할 수 있습니다. .pushRequest() 메서드를 호출하여 실패한 요청을 추가합니다. 예를 들어 다음 코드는 실패한 모든 요청을 포착하여 큐에 추가합니다.

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', event => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

큐에 추가되면 서비스 워커는 sync 이벤트를 수신합니다. 이 이벤트는 브라우저가 연결이 복구되었다고 생각하는 경우). 브라우저에서 서비스 워커가 서비스 워커가 중지될 때마다 BackgroundSync API는 큐를 시작됩니다 이를 위해서는 서비스 워커를 제어하는 페이지가 그다지 효과적이지 않을 것입니다.

Workbox 백그라운드 동기화 테스트

안타깝게도 BackgroundSync 테스트는 다소 직관적이지 않고 어렵습니다. 여러 가지 이유로 인해

구현을 테스트하는 가장 좋은 방법은 다음을 실행하는 것입니다.

  1. 페이지를 로드하고 서비스 워커를 등록합니다.
  2. 컴퓨터의 네트워크를 끄거나 웹 서버를 끕니다.
    • Chrome DevTools를 오프라인에서 사용하지 마세요. 오프라인 체크박스를 선택하면 DevTools는 페이지의 요청에만 영향을 미칩니다. 서비스 워커 요청 진행될 것입니다
  3. Workbox 백그라운드 동기화를 사용하여 대기열에 추가해야 하는 네트워크 요청을 실행합니다.
    • 요청이 큐에 추가되었는지 확인하려면 Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
  4. 이제 네트워크 또는 웹 서버를 켭니다.

  5. 다음으로 이동하여 조기 sync 이벤트를 강제 실행합니다. Chrome DevTools > Application > Service Workers: workbox-background-sync:<your queue name>, 여기서 <your queue name>는 다음과 같아야 함 클릭한 다음 '동기화' 버튼을 클릭합니다.