백그라운드 가져오기 소개

Jake Archibald
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는 다음 세 가지 인수를 사용합니다.

매개변수
id string
는 이 백그라운드 가져오기를 고유하게 식별합니다.

ID가 기존 배경과 일치하면 backgroundFetch.fetch에서 거부합니다. 가져올 수 있습니다

requests Array<Request|string>
가져올 항목 문자열은 URL로 취급되며 new Request(theString)를 통한 Request

리소스가 다음을 통해 허용하는 한 다른 출처에서 항목을 가져올 수 있습니다. CORS를 사용합니다.

참고: Chrome은 현재 CORS 프리플라이트가 필요합니다

options 다음을 포함할 수 있는 객체:
options.title string
진행률과 함께 표시할 브라우저의 제목입니다.
options.icons Array<IconDefinition>
`src`, `size`, `type`이 있는 객체의 배열입니다.
options.downloadTotal number
gzip을 압축 해제한 후 응답 본문의 전체 크기입니다.

이는 선택사항이지만 제공하는 것이 좋습니다. 그것은 사용자에게 다운로드 크기를 확인하고 진행 정보를 제공할 수 있습니다. 정보를 제공하지 않으면 이렇게 하면 브라우저가 사용자에게 크기를 알 수 없다고 알려주므로 사용자는 다운로드가 중단될 가능성이 높습니다.

백그라운드 가져오기 다운로드 수가 여기에 지정된 수를 초과하면 취소됩니다. 그것은 다운로드 크기가 downloadTotal보다 작으면 아무런 문제가 없습니다. 따라서 전체 다운로드 수를 확실히 알 수 있으므로 신중을 기하는 것이 가장 좋습니다.

backgroundFetch.fetchBackgroundFetchRegistration로 확인되는 프로미스를 반환합니다. CANNOT TRANSLATE 나중에 자세히 다루겠습니다 사용자가 다운로드를 선택 해제한 경우 프로미스가 거부됩니다. 제공된 매개변수 중 개가 잘못되었습니다.

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

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

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

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

원하는 백그라운드 가져오기의 id를 전달하면 됩니다. 없는 경우 getundefined를 반환합니다. 활성 백그라운드 가져오기를 실행할 수 있습니다.

백그라운드 가져오기가 '활성' 상태로 간주됨 등록 순간부터 성공할 때까지 또는 취소됩니다.

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

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

백그라운드 가져오기 등록

BackgroundFetchRegistration (위 예에서 bgFetch)에는 다음이 포함됩니다.

속성
id string
백그라운드 가져오기의 ID입니다.
uploadTotal number
서버로 전송되는 바이트 수입니다.
uploaded number
성공적으로 전송된 바이트 수입니다.
downloadTotal number
백그라운드 가져오기가 등록될 때 제공된 값 있습니다.
downloaded number
성공적으로 수신된 바이트 수입니다.

이 값은 감소할 수 있습니다. 예를 들어 연결이 끊어져서 다운로드를 할 수 없는 경우 다시 시작할 수 있으며, 이 경우 브라우저가 해당 리소스에 대한 가져오기를 처음부터 다시 시작합니다.

result

다음 중 하나입니다.

  • "": 백그라운드 가져오기가 활성 상태이므로 아직 결과가 없습니다.
  • "success" - 백그라운드 가져오기에 성공했습니다.
  • "failure" - 백그라운드 가져오기에 실패했습니다. 이 값은 브라우저에서 재시도/재개할 수 없으므로 백그라운드 가져오기가 완전히 실패합니다.
failureReason

다음 중 하나입니다.

  • "" - 백그라운드 가져오기에 실패하지 않았습니다.
  • "aborted" – 사용자가 백그라운드 가져오기를 취소했습니다. abort()이 호출되었습니다.
  • "bad-status" - 응답 중 하나가 '양호하지 않음' 상태입니다. 예: 404입니다.
  • "fetch-error" - 가져오기 중 하나가 다른 이유로 실패했습니다. CORS, MIX, 잘못된 부분 응답 또는 가져오기에 대한 일반적인 네트워크 실패가 원인일 수 있습니다. 다시 시도할 수 없습니다.
  • "quota-exceeded" - 백그라운드에서 저장용량 한도에 도달했습니다. 가져올 수 있습니다
  • "download-total-exceeded" - 제공된 `downloadTotal` 은 다음과 같습니다. 초과되었습니다.
recordsAvailable boolean
기본 요청/응답에 액세스할 수 있나요?

false가 되면 matchmatchAll를 사용할 수 없습니다.

메서드
abort() Promise<boolean>를 반환합니다.
백그라운드 가져오기를 취소합니다.

가져오기가 성공적으로 취소되면 반환된 프로미스가 true로 확인됩니다.

matchAll(request, opts) 반환 Promise<Array<BackgroundFetchRecord>>
요청 가져오기 확인할 수 있습니다

여기서 인수는 캐시 API를 참고하세요. 인수 없이 호출하면 모든 레코드에 대해 프로미스가 반환됩니다.

자세한 내용은 아래를 참조하세요.

match(request, opts) 위와 같이 Promise<BackgroundFetchRecord>
을 반환하지만 있습니다.
이벤트
progress uploaded, downloaded, result 또는 failureReason 변경.

진행 상황 추적

이 작업은 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);
});

recordBackgroundFetchRecord이며 다음과 같이 표시됩니다.

속성
request Request
제공된 요청입니다.
responseReady Promise<Response>
가져온 응답입니다.

응답이 아직 수신되지 않았을 수 있으므로 프로미스 뒤에 있는 응답을 반환합니다. 약속 가져오기가 실패하면 거부됩니다.

서비스 워커 이벤트

이벤트
backgroundfetchsuccess 모든 항목을 성공적으로 가져왔습니다.
backgroundfetchfailure 하나 이상의 가져오기가 실패했습니다.
backgroundfetchabort 하나 이상의 가져오기가 실패했습니다.

이는 관련 데이터를 정리하려는 경우에만 매우 유용합니다.

backgroundfetchclick 사용자가 다운로드 진행률 UI를 클릭했습니다.

이벤트 객체에는 다음이 포함됩니다.

속성
registration BackgroundFetchRegistration
메서드
updateUI({ title, icons }) 처음에 설정한 제목/아이콘을 변경할 수 있습니다. 이는 선택사항이지만 필요한 경우 더 많은 컨텍스트를 제공할 수 있습니다 진행 중에 *한 번* 만 할 수 있습니다. backgroundfetchsuccessbackgroundfetchfailure 이벤트

성공/실패에 대응

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

추가 리소스

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