2015년 초 Google은 Android 및 데스크톱용 Chrome에 푸시 메시지 및 알림을 도입했습니다. 이는 웹에서 한 걸음 더 나아간 계기가 되었습니다. 사용자는 브라우저가 닫혀 있을 때도 웹 환경을 더욱 적극적으로 이용할 수 있었습니다.
이러한 메시지를 보내는 것은 좋지만, 메시지를 클릭하여 페이지를 열거나 완전히 닫는 것밖에 할 수 없습니다.
iOS 및 Android와 같은 모바일 플랫폼의 앱에 기본적으로 제공되는 알림을 살펴보면 각 알림을 통해 개발자는 사용자가 호출하고 상호작용할 수 있는 상황별 작업을 정의할 수 있습니다. 이제 Chrome 48에서는 데스크톱과 Android용 Chrome에 웹 알림이라는 유사한 기능이 추가되었습니다.
API에 추가하는 방법은 매우 간단합니다. ServiceWorker 등록에서 showNotification를 호출할 때 작업 배열을 만들어 NotificationOptions 객체에 추가하기만 하면 됩니다 (ServiceWorker에서 직접 또는 페이지에서 navigator.serviceWorker.ready를 통해).
현재 Chrome은 각 알림에서 두 가지 작업만 지원합니다.
더 많은 플랫폼을 지원할 수도 있고 더 적게 지원할 수도 있고 전혀 지원하지 않을 수도 있습니다. Notification.maxActions를 확인하여 플랫폼에서 무엇을 지원하는지 확인할 수 있습니다. 다음 예에서는 플랫폼이 두 가지 작업을 지원한다고 가정합니다.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
그러면 버튼 두 개가 있는 간단한 알림이 생성됩니다. (아직) 작업에 아이콘을 직접 추가할 수는 없지만 그림 이모티콘과 확장 유니코드 문자 집합을 사용하여 알림 버튼에 더 많은 컨텍스트를 추가할 수 있습니다.
예를 들면 다음과 같습니다.
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
알림을 만들고 😻처럼 보이도록 만들었으므로 사용자는 나중에 알림과 상호작용할 수도 있습니다. 현재 알림과의 상호작용 (Chrome 48부터)은 모두 서비스 워커에 등록된 notificationclick 이벤트를 통해 이루어지며 알림을 일반적인 클릭이나 작업 버튼 중 하나를 특정한 탭일 수 있습니다. 참고로 향후에는 notificationclose이벤트에도 응답할 수 있습니다.
사용자가 실행한 작업을 파악하려면 이벤트의 action 속성을 검사해야 합니다. 그러면 사용자가 작업을 완료할 수 있도록 새 페이지를 열거나 백그라운드에서 작업을 실행할 수 있습니다.
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
흥미로운 점은 작업이 새 창을 열 필요가 없고 사용자 인터페이스를 만들지 않고도 일반적인 애플리케이션 상호작용을 실행할 수 있다는 점입니다. 예를 들어 사용자는 소셜 미디어 게시물을 '좋아요' 또는 '삭제'하여 사용자의 로컬 데이터에서 작업을 수행한 다음 UI를 열지 않고 클라우드와 동기화할 수 있습니다 (단, UI를 업데이트할 수 있도록 열려 있는 창에 데이터 변경사항을 메시지를 보내는 것이 좋습니다). 사용자 상호작용이 필요한 작업의 경우 사용자가 응답할 수 있는 창을 엽니다.
플랫폼은 동일한 수의 작업을 지원하지 않거나 경우에 따라 알림 작업 버튼을 전혀 지원할 수 없으므로 사용자가 알림을 클릭하기만 하면 할 것으로 기대하는 작업에 적절한 대체를 항상 제공해야 합니다.
지금 바로 이를 실제로 확인하고 싶다면 피터 베벌루의 알림 테스트 Harness를 확인하고 알림 사양을 읽어보거나 업데이트가 진행될 때 사양 확인을 확인하세요.