2015년에는 사용자가 연결할 때까지 서비스 워커가 작업을 연기할 수 있는 백그라운드 동기화가 도입되었습니다. 즉, 사용자가 메시지를 입력하고 보내기를 누른 후 메시지가 지금 또는 인터넷에 연결되었을 때 메시지가 전송된다는 것을 알 수 있도록 사이트에서 나갈 수 있습니다.
이는 유용한 기능이지만 가져오기 동안 서비스 워커가 활성 상태여야 합니다. 메시지 전송과 같은 짧은 작업에는 문제가 되지 않지만 작업이 너무 오래 걸리면 브라우저가 서비스 워커를 종료하며, 그러지 않으면 사용자의 개인 정보 보호와 배터리에 위험을 초래합니다.
영화나 팟캐스트, 게임 레벨과 같이 시간이 오래 걸릴 수 있는 콘텐츠를 다운로드해야 한다면 어떻게 해야 할까요? 백그라운드 가져오기를 사용하면 됩니다.
백그라운드 가져오기는 Chrome 74부터 기본적으로 사용할 수 있습니다.
다음은 백그라운드 가져오기 사용과 비교한 일반적인 사용 방법을 보여주는 간단한 데모입니다(2분 소요).
데모를 직접 사용해 보고 코드를 탐색합니다.
사용 방법
백그라운드 가져오기는 다음과 같이 작동합니다.
- 백그라운드에서 가져오기 그룹을 수행하도록 브라우저에 지시합니다.
- 브라우저가 이러한 항목을 가져와서 사용자에게 진행 상황을 표시합니다.
- 가져오기가 완료되거나 실패하면 브라우저에서 서비스 워커를 열고 이벤트를 실행하여 상황을 알려줍니다. 필요한 경우 응답에서 무엇을 할지 결정합니다.
사용자가 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가 기존 백그라운드 가져오기와 일치하면 |
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으로 압축 해제된 후) 이는 선택사항이지만 입력하는 것이 좋습니다. 사용자에게 다운로드 크기를 알리고 진행률 정보를 제공하는 데 사용됩니다. 이 값을 제공하지 않으면 브라우저에서 사용자에게 알 수 없는 크기를 알려 주므로 사용자가 다운로드를 취소할 가능성이 큽니다. 백그라운드 가져오기 다운로드가 여기에 지정된 수를 초과하면 취소됩니다. 다운로드 크기가 |
backgroundFetch.fetch
는 BackgroundFetchRegistration
로 확인되는 프로미스를 반환합니다. 이에 대한 자세한 내용은
나중에 다루겠습니다. 사용자가 다운로드를 선택 해제했거나 제공된 매개변수 중 하나가 잘못된 경우 프로미스가 거부됩니다.
단일 백그라운드 가져오기에 관한 요청을 많이 제공하면 논리적으로 사용자에게 단일한 항목을 결합할 수 있습니다. 예를 들어 영화를 수천 개의 리소스 (일반적으로 MPEG-DASH)로 분할할 수 있으며 이미지와 같은 추가 리소스가 함께 제공됩니다. 게임의 한 레벨은 여러 자바스크립트, 이미지, 오디오 리소스에 걸쳐 분산될 수 있습니다. 그러나 사용자에게는 '영화' 또는 '레벨'일 뿐입니다.
기존 백그라운드 가져오기 가져오기
다음과 같이 기존 백그라운드 가져오기를 가져올 수 있습니다.
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
)에는 다음이 포함됩니다.
속성 | |
---|---|
id |
string 백그라운드 가져오기의 ID입니다. |
uploadTotal |
number 서버로 전송될 바이트 수입니다. |
uploaded |
number 성공적으로 전송된 바이트 수입니다. |
downloadTotal |
number 백그라운드 가져오기가 등록될 때 제공되는 값 또는 0입니다. |
downloaded |
number 성공적으로 수신된 바이트 수입니다. 이 값은 감소할 수 있습니다. 연결이 끊어져 다운로드를 재개할 수 없는 경우를 예로 들 수 있고, 이 경우 브라우저는 리소스 가져오기를 처음부터 다시 시작합니다. |
result |
다음 필드 중 하나는 사용해야 합니다.
|
failureReason |
다음 필드 중 하나는 사용해야 합니다.
|
recordsAvailable |
boolean 기본 요청/응답에 액세스할 수 있나요? false이면 |
방법 | |
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);
});
record
는 BackgroundFetchRecord
이며 다음과 같이 표시됩니다.
속성 | |
---|---|
request |
Request 제공된 요청입니다. |
responseReady |
Promise<Response> 가져온 응답입니다. 응답이 아직 수신되지 않았을 수 있으므로 약속보다 뒤처집니다. 가져오기에 실패하면 프로미스가 거부됩니다. |
서비스 워커 이벤트
이벤트 | |
---|---|
backgroundfetchsuccess |
모든 항목을 성공적으로 가져왔습니다. |
backgroundfetchfailure |
한 개 이상의 가져오기에 실패했습니다. |
backgroundfetchabort |
한 개 이상의 가져오기에 실패했습니다.
이는 관련 데이터 정리를 수행하려는 경우에만 매우 유용합니다. |
backgroundfetchclick |
사용자가 다운로드 진행률 UI를 클릭함 |
이벤트 객체에는 다음이 포함됩니다.
속성 | |
---|---|
registration |
BackgroundFetchRegistration |
방법 | |
updateUI({ title, icons }) |
처음에 설정한 제목/아이콘을 변경할 수 있습니다. 이는 선택사항이지만 필요한 경우 더 많은 컨텍스트를 제공할 수 있습니다. backgroundfetchsuccess 및 backgroundfetchfailure 이벤트 중에 *한 번만* 이 작업을 실행할 수 있습니다. |
성공/실패에 대응
progress
이벤트는 이미 확인했지만 이는 사용자가 사이트에 페이지를 열어 둔 경우에만 유용합니다. 백그라운드 가져오기의 주요 이점은 사용자가 페이지를 떠나거나 브라우저를 닫은 후에도 계속 작동한다는 것입니다.
백그라운드 가져오기가 성공적으로 완료되면 서비스 워커가 backgroundfetchsuccess
이벤트를 수신하고 event.registration
가 백그라운드 가져오기 등록이 됩니다.
이 이벤트 이후에는 가져온 요청과 응답에 더 이상 액세스할 수 없으므로 유지하려는 경우 cache 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에서 커뮤니티 그룹 초안 보고서로 확인할 수 있습니다.