Budget API 소개

Push Messaging API를 사용하면 브라우저가 닫혀 있을 때도 사용자에게 알림을 보낼 수 있습니다. 많은 개발자가 브라우저를 열지 않고도 이 메시지를 사용하여 콘텐츠를 업데이트하고 동기화할 수 있기를 바랍니다. 하지만 API에는 한 가지 중요한 제한사항이 있습니다. 바로 수신된 푸시 메시지 하나마다 항상 알림을 표시해야 한다는 것입니다.

푸시 메시지를 보내 사용자 기기의 데이터를 동기화하거나 이전에 표시한 알림을 숨길 수 있으면 사용자와 개발자에게 매우 유용할 수 있지만, 사용자가 알지 못하는 사이에 웹 앱이 백그라운드에서 작동하도록 허용하는 것은 악용될 수 있습니다.

Budget API는 개발자가 사용자에게 알리지 않고 자동 푸시 또는 백그라운드 가져오기 실행과 같은 제한된 백그라운드 작업을 실행할 수 있도록 설계된 새로운 API입니다. Chrome 60 이상에서는 이 API를 사용할 수 있으며 Chrome팀은 개발자로부터 의견을 받고자 합니다.

개발자가 백그라운드에서 사용자 리소스를 소비할 수 있도록 웹 플랫폼에는 새로운 예산 API를 사용한 예산 개념을 도입합니다. 각 사이트에는 사용자 참여 발생 시간을 기반으로 자동 푸시와 같은 백그라운드 작업에 사용할 수 있는 충분한 양의 리소스가 제공되며, 각 작업으로 인해 예산이 소진됩니다. 예산이 소진되면 사용자 가시성이 없으면 더 이상 백그라운드 작업을 실행할 수 없습니다. 사용자 에이전트는 휴리스틱에 따라 웹 앱에 할당되는 예산을 결정합니다. 예를 들어 예산 허용은 사용자 참여와 연결될 수 있습니다. 각 브라우저는 자체적인 휴리스틱을 결정할 수 있습니다.

요약 예산 API를 사용하면 예산을 예약하고, 예산을 사용하고, 잔여 예산 목록을 가져오고, 백그라운드 작업 비용을 파악할 수 있습니다.

예산 예약

Chrome 60 이상에서는 플래그 없이 navigator.budget.reserve() 메서드를 사용할 수 있습니다.

reserve() 메서드를 사용하면 특정 작업의 예산을 요청할 수 있으며, 예산을 예약할 수 있는지를 나타내는 부울이 반환됩니다. 예산이 예약된 경우 사용자에게 백그라운드 작업을 알릴 필요가 없습니다.

푸시 알림의 예에서는 'silent-push' 작업을 위한 예산을 예약해 볼 수 있으며, reserve()이 true로 확인되면 작업이 허용됩니다. 그렇지 않으면 false가 반환되며 알림을 표시해야 합니다.

self.addEventListener('push', event => {
 const promiseChain = navigator.budget.reserve('silent-push')
   .then((reserved) => {
     if (reserved) {
       // No need to show a notification.
       return;
     }

     // Not enough budget is available, must show a notification.
     return registration.showNotification(...);
   });
 event.waitUntil(promiseChain);
});

Chrome 60에서는 'silent-push'가 사용 가능한 유일한 작업 유형이지만 사양에서 작업 유형의 전체 목록을 확인할 수 있습니다. 사용 후에는 테스트 또는 디버깅 목적으로 예산을 쉽게 늘릴 방법은 없지만 일시적인 해결 방법으로 Chrome에서 새 프로필을 만들 수 있습니다. 안타깝게도 이 경우에는 시크릿 모드를 사용할 수 없습니다. 예산 API가 시크릿 모드에서 예산을 0으로 반환하기 때문입니다. 하지만 테스트 중에 오류가 발생하는 버그가 있습니다.

향후 특정 시점에 예약할 작업을 실행하려는 경우에만 reserve()를 호출해야 합니다. 위 예에서 예약을 호출했지만 여전히 알림을 표시했다면 예산이 계속 사용됩니다.

reserve()만으로는 사용 설정되지 않는 일반적인 사용 사례는 백엔드에서 자동 푸시를 예약하는 기능입니다. 예산 API에는 이러한 사용 사례를 지원하는 API가 있지만 아직 Chrome에서 작업 중이며 현재는 플래그 또는 오리진 트라이얼을 통해서만 사용할 수 있습니다.

예산 API 및 오리진 트라이얼

웹 앱에서는 예산 사용량을 계획하는 데 사용할 수 있는 getBudget() 메서드와 getCost() 두 가지 메서드가 있습니다.

Chrome 60에서는 오리진 트라이얼에 가입하면 이 두 가지 방법을 모두 사용할 수 있지만, 테스트 목적으로는 실험용 웹 플랫폼 기능 플래그 (Chrome에서 chrome://flags/#enable-experimental-web-platform-features 열기)를 사용 설정하여 로컬에서 사용할 수 있습니다.

이러한 API의 사용 방법을 살펴보겠습니다.

예산 확인하기

getBudget() 메서드로 사용 가능한 예산을 찾을 수 있습니다. Chrome과 같은 일부 브라우저는 시간이 지남에 따라 예산이 '감소'됩니다. 따라서 이를 완전히 파악할 수 있도록 향후 다양한 시기에 예산이 얼마인지 나타내는 BudgetStates 배열이 반환됩니다.

다음과 같은 방법으로 예산 항목을 나열할 수 있습니다.

navigator.budget.getBudget()
.then((budgets) => {
  budgets.forEach((element) => {
    console.log(\`At '${new Date(element.time).toString()}' \` +
      \`your budget will be '${element.budgetAt}'.\`);
  });
});

첫 번째 항목은 현재 예산이고 추가 값은 향후 여러 시점에서의 예산을 보여줍니다.

At 'Mon Jun 05 2017 12:47:20' you will have a budget of '3'.
At 'Fri Jun 09 2017 10:42:57' you will have a budget of '2'.
At 'Fri Jun 09 2017 12:31:09' you will have a budget of '1'.

향후 예산 허용량을 포함할 때의 이점 중 하나는 개발자가 이 정보를 백엔드와 공유하여 서버 측 동작을 조정할 수 있다는 것입니다(즉, 클라이언트에 자동 푸시를 위한 예산이 있을 때만 푸시 메시지를 보내 업데이트를 트리거함).

작업 비용 확인

작업 비용을 확인하기 위해 getCost()를 호출하면 해당 작업에 reserve()를 호출하는 경우 소비될 최대 예산 금액을 나타내는 숫자가 반환됩니다.

예를 들어 다음 코드를 사용하여 푸시 메시지를 받을 때 알림을 표시하지 않는 경우의 비용 (즉, 자동 푸시의 비용)을 확인할 수 있습니다.

navigator.budget.getCost('silent-push')
.then((cost) => {
  console.log('Cost of silent push is:', cost);
})
.catch((err) => {
  console.error('Unable to get cost:', err);
});

이 가이드 작성 시점을 기준으로 Chrome 60에서는 다음을 인쇄합니다.

Cost of silent push is: 2

reserve()getCost() 메서드에서 강조해야 할 한 가지는 실제 작업 비용이 getCost()에서 반환된 비용보다 작을 수 있다는 점입니다. 현재 예산이 표시된 비용보다 적으면 계속 작업을 예약할 수 있습니다. 사양의 구체적인 세부정보는 다음과 같습니다.

이는 Chrome의 최신 API이며, 웹에서는 백그라운드 가져오기와 같이 백그라운드 작업을 실행하는 기능이 필요한 새로운 API를 계속 지원하므로 예산 API를 사용하여 사용자에게 알리지 않고 실행할 수 있는 작업 수를 관리할 수 있습니다.

API를 사용할 때 GitHub 저장소에 관한 의견을 제공하거나 crbug.com에서 Chrome 버그를 제출하세요.