백그라운드 가져오기 소개

Jake Archibald

2015년에 Google은 서비스 워커가 사용자가 연결될 때까지 작업을 지연할 수 있는 백그라운드 동기화를 도입했습니다. 즉, 사용자는 메시지를 입력하고 전송을 누른 후 사이트를 떠나도 지금 또는 연결이 되면 메시지가 전송된다는 것을 알 수 있습니다.

유용한 기능이지만 서비스 워커가 가져오기 기간 동안 활성 상태여야 합니다. 메시지 전송과 같은 짧은 작업에는 문제가 없지만 작업이 너무 오래 걸리면 브라우저에서 서비스 워커를 종료합니다. 그렇지 않으면 사용자의 개인 정보 보호 및 배터리에 위험이 됩니다.

영화, 팟캐스트, 게임 레벨과 같이 시간이 오래 걸릴 수 있는 항목을 다운로드해야 하는 경우를 생각해 보세요. 이때 백그라운드 가져오기가 사용됩니다.

백그라운드 가져오기는 Chrome 74부터 기본적으로 사용할 수 있습니다.

다음은 백그라운드 가져오기를 사용하는 경우와 그렇지 않은 경우를 보여주는 2분짜리 간단한 데모입니다.

작동 방식

백그라운드 가져오기는 다음과 같이 작동합니다.

1. 브라우저에 백그라운드에서 가져오기 그룹을 실행하도록 지시합니다.
2. 브라우저가 이러한 항목을 가져와 사용자에게 진행 상황을 표시합니다.
3. 가져오기가 완료되거나 실패하면 브라우저가 서비스 워커를 열고 이벤트가 발생하여 어떤 일이 일어났는지 알려줍니다. 여기에서 응답을 어떻게 처리할지 결정합니다.

사용자가 1단계 후 사이트 페이지를 닫아도 괜찮습니다. 다운로드는 계속됩니다. 가져오기는 매우 눈에 띄고 쉽게 중단할 수 있으므로 너무 긴 백그라운드 동기화 작업의 개인 정보 보호 문제가 없습니다. 서비스 워커는 지속적으로 실행되지 않으므로 백그라운드에서 비트코인을 채굴하는 등 시스템을 악용할 수 있다는 우려가 없습니다.

일부 플랫폼 (예: Android)에서는 브라우저가 가져오기를 운영체제에 전달할 수 있으므로 1단계 후에 브라우저가 닫힐 수 있습니다.

사용자가 오프라인 상태에서 다운로드를 시작하거나 다운로드 중에 오프라인 상태가 되면 백그라운드 가져오기가 일시중지되고 나중에 다시 시작됩니다.

API

기능 감지

새 기능과 마찬가지로 브라우저에서 지원하는지 감지해야 합니다. 백그라운드 가져오기의 경우 다음과 같이 간단합니다.

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

백그라운드 가져오기 시작

기본 API는 서비스 워커 등록에서 중단되므로 먼저 서비스 워커를 등록해야 합니다. 그런 다음 아래를 실행합니다.

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,
  });
});

backgroundFetch.fetch는 세 가지 인수를 사용합니다.

backgroundFetch.fetch는 BackgroundFetchRegistration로 확인되는 프로미스를 반환합니다. 자세한 내용은 나중에 다루겠습니다. 사용자가 다운로드를 선택 해제했거나 제공된 매개변수 중 하나가 유효하지 않으면 프로미스가 거부됩니다.

단일 백그라운드 가져오기에 대한 요청을 많이 제공하면 사용자에게 논리적으로 단일한 항목을 결합할 수 있습니다. 예를 들어 영화는 수천 개의 리소스로 분할될 수 있으며 (MPEG-DASH의 경우 일반적임) 이미지와 같은 추가 리소스가 함께 제공될 수 있습니다. 게임의 레벨은 여러 JavaScript, 이미지, 오디오 리소스에 걸쳐 있을 수 있습니다. 하지만 사용자에게는 '영화' 또는 '레벨'일 뿐입니다.

기존 백그라운드 가져오기 가져오기

다음과 같이 기존 백그라운드 가져오기를 가져올 수 있습니다.

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

원하는 백그라운드 가져오기의 id를 전달하여 해당 ID의 활성 백그라운드 가져오기가 없으면 get는 undefined를 반환합니다.

백그라운드 가져오기는 등록된 순간부터 성공하거나 실패하거나 중단될 때까지 '활성'으로 간주됩니다.

getIds를 사용하여 활성 상태인 모든 백그라운드 가져오기의 목록을 가져올 수 있습니다.

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

백그라운드 가져오기 등록

BackgroundFetchRegistration (위 예시에서는 bgFetch)에는 다음이 있습니다.

진행 상황 추적

progress 이벤트를 통해 이를 수행할 수 있습니다. downloadTotal는 제공한 값 또는 값을 제공하지 않은 경우 0입니다.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

요청 및 응답 가져오기

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record는 BackgroundFetchRecord이며 다음과 같습니다.

서비스 워커 이벤트

이벤트 객체에는 다음이 있습니다.

성공/실패에 반응

이미 progress 이벤트를 확인했지만 이는 사용자가 사이트 페이지를 열고 있는 동안에만 유용합니다. 백그라운드 가져오기의 주요 이점은 사용자가 페이지를 벗어나거나 브라우저를 닫은 후에도 계속 작동한다는 것입니다.

백그라운드 가져오기가 성공적으로 완료되면 서비스 워커가 backgroundfetchsuccess 이벤트를 수신하고 event.registration는 백그라운드 가져오기 등록이 됩니다.

이 이벤트 후에는 가져온 요청과 응답에 더 이상 액세스할 수 없으므로 이를 유지하려면 캐시 API와 같은 위치로 이동하세요.

대부분의 서비스 워커 이벤트와 마찬가지로 서비스 워커가 이벤트가 완료된 시점을 알 수 있도록 event.waitUntil를 사용합니다.

예를 들어 서비스 워커에서 다음과 같이 작성합니다.

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

실패는 중요하지 않을 수 있는 단일 404로 인해 발생했을 수 있으므로 위의 예와 같이 일부 응답을 캐시에 복사하는 것이 여전히 유용할 수 있습니다.

클릭에 반응

다운로드 진행률과 결과를 표시하는 UI를 클릭할 수 있습니다. 서비스 워커의 backgroundfetchclick 이벤트를 사용하면 이에 대응할 수 있습니다. 위와 같이 event.registration은 백그라운드 가져오기 등록이 됩니다.

이 이벤트로 할 수 있는 일반적인 작업은 창을 여는 것입니다.

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

추가 리소스

• 설명
• 사양
• chromestatus.com 항목

수정: 이전 버전의 이 도움말에서 백그라운드 가져오기를 '웹 표준'으로 잘못 언급했습니다. 이 API는 현재 표준 트랙에 있지 않으며 사양은 WICG에서 초안 커뮤니티 그룹 보고서로 확인할 수 있습니다.