2015년 초에 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를 업데이트할 수 있도록 열려 있는 창에 데이터 변경사항을 메시지로 전송하는 것이 좋습니다. 사용자 상호작용이 필요한 작업의 경우 사용자가 답장할 수 있는 창을 열면 됩니다.
플랫폼에서 동일한 수의 작업을 지원하지 않거나 경우에 따라 알림 작업 버튼을 전혀 지원하지 않을 수 있으므로 항상 사용자가 알림을 클릭할 때 취할 것으로 예상되는 작업에 적절한 대체 작업을 제공해야 합니다.
지금 바로 이 기능을 사용해 보려면 피터 비버루의 알림 테스트 하네를 확인하고 알림 사양을 읽어 보거나 사양이 업데이트될 때마다 확인하세요.