푸시 메시지 API를 사용하면 브라우저가 닫혀 있어도 사용자에게 알림을 보낼 수 있습니다. 많은 개발자가 이 메시지를 사용하여 브라우저가 열려 있지 않아도 콘텐츠를 업데이트하고 동기화하고 싶어 하지만 API에는 하나의 중요한 제한사항이 있습니다. 수신된 모든 푸시 메시지에 항상 알림을 표시해야 합니다.
푸시 메시지를 보내 사용자 기기의 데이터를 동기화하거나 이전에 표시한 알림을 숨길 수 있으면 사용자와 개발자에게 매우 유용할 수 있지만, 웹 앱이 사용자 모르게 백그라운드에서 작업하도록 허용하면 악용될 수 있습니다.
Budget API는 개발자가 자동 푸시 또는 백그라운드 가져오기 수행과 같이 사용자에게 알리지 않고 제한된 백그라운드 작업을 수행할 수 있도록 하기 위해 설계된 새로운 API입니다. Chrome 60 이상에서는 이 API를 사용할 수 있으며 Chrome팀은 개발자의 의견을 기다리고 있습니다.
개발자가 백그라운드에서 사용자의 리소스를 사용할 수 있도록 웹 플랫폼에서는 새로운 예산 API를 사용하는 예산의 개념을 도입합니다. 각 사이트는 사용자 참여도에 따라 리소스를 부여받으며, 이 리소스는 백그라운드 작업(예: 무음 푸시)에 사용할 수 있습니다. 각 작업은 예산을 소진합니다. 예산이 소진되면 사용자에게 표시되지 않으면 더 이상 백그라운드 작업을 실행할 수 없습니다. 사용자 에이전트는 휴리스틱에 기반하여 웹 앱에 할당된 예산을 결정해야 합니다. 예를 들어 예산 허용이 사용자 참여와 연결될 수 있습니다. 각 브라우저는 자체 휴리스틱을 결정할 수 있습니다.
요약 Budget 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()만으로 사용 설정되지 않는 일반적인 사용 사례는 백엔드에서 자동 푸시를 예약하는 기능입니다. Budget API에는 이 사용 사례를 사용 설정하는 API가 있지만 아직 Chrome에서 개발 중이며 현재 플래그 또는 오리진 트라이얼을 통해서만 사용할 수 있습니다.
Budget 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 버그를 신고해 주세요.