Background Fetch API

웹 애플리케이션에서 사용자가 대용량 파일을 다운로드해야 하는 경우, 다운로드가 완료되려면 사용자가 페이지에 계속 연결되어 있어야 한다는 문제가 종종 발생합니다. 연결이 끊어지면 탭을 닫거나 다운로드가 중지되는 페이지에서 다른 곳으로 이동합니다.

Background Synchronization API (en-US)는 서비스 워커가 사용자가 연결될 때까지 처리를 연기하는 방법을 제공하지만, 대용량 파일 다운로드와 같이 오래 실행되는 작업에는 사용할 수 없습니다. 백그라운드 동기화를 사용하려면 가져오기(fetch)가 완료될 때까지 서비스 워커가 활성 상태를 유지해야 하며, 배터리 수명을 절약하고 백그라운드에서 원치 않는 작업이 발생하는 것을 방지하기 위해 브라우저는 어느 시점에서 작업을 종료합니다.

Background Fetch API는 이 문제를 해결합니다. 웹 개발자가 사용자가 비디오 파일을 다운로드하기 위해 버튼을 클릭할 때와 같이 백그라운드에서 일부 가져오기(fetch)를 수행하도록 브라우저에 지시하는 방법을 만듭니다. 그러면 브라우저는 사용자가 볼 수 있는 방식으로 가져오기(fetch)를 수행하여 사용자에게 진행 상황을 표시하고 다운로드를 취소하는 방법을 제공합니다. 다운로드가 완료되면 브라우저는 서비스 워커를 열고, 이 시점에서 애플리케이션은 필요한 경우 응답을 통해 무언가를 수행할 수 있습니다.

Background Fetch API는 사용자가 오프라인 상태에서 프로세스를 시작하면 가져오기(fetch)를 수행할 수 있도록 합니다. 연결되면 프로세스가 시작됩니다. 사용자가 오프라인 상태가 되면 사용자가 다시 켜질 때까지 프로세스가 일시 중지됩니다.

BackgroundFetchManager (en-US)

키는 백그라운드 가져오기(fetch)의 ID이며, 값은 BackgroundFetchRegistration (en-US) 객체인 맵입니다.

BackgroundFetchRegistration (en-US)

백그라운드 가져오기를 나타냅니다.

BackgroundFetchRecord (en-US)

개별 가져오기 요청 및 응답을 나타냅니다.

BackgroundFetchEvent (en-US)

onbackgroundfetchabort 및 onbackgroundfetchclick에 전달된 이벤트 유형입니다.

BackgroundFetchUpdateUIEvent (en-US)

onbackgroundfetchsuccess 및 onbackgroundfetchfail에 전달된 이벤트 유형입니다.

백그라운드 가져오기를 사용하기 전에 브라우저 지원 여부를 확인하세요

if (!("BackgroundFetchManager" in self)) {
  // 대체 다운로드 제공
}

백그라운드 불러오기를 사용하려면 등록된 서비스 워커가 필요합니다. 그런 다음 backgroundFetch.fetch()를 호출하여 불러오기를 수행합니다. 그러면 BackgroundFetchRegistration (en-US)으로 해결되는 프로미스가 반환됩니다.

백그라운드 가져오기는 여러 파일을 가져올 수 있습니다. 이 예제에서는 MP3와 JPEG를 요청합니다. 이렇게 하면 사용자가 하나의 항목으로 간주하는 파일 패키지(예: 팟캐스트와 아트웍)를 한 번에 다운로드할 수 있습니다.

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

백그라운드 가져오기를 구현하는 데모 애플리케이션은 여기에서 찾을 수 있습니다.

• Background Fetch 소개
• Background Fetch - HTTP 203