푸시 알림을 사용하면 수신 채팅 메시지와 같이 중요하고 시의적절한 업데이트를 사용자에게 알림으로 제공하여 우수한 앱과 같은 환경을 제공할 수 있습니다. 알림 플랫폼은 브라우저에서 비교적 새로운 기능이며 점점 더 많은 사용 사례와 요구사항이 구체화됨에 따라 알림 API에 많은 기능이 추가되고 있습니다. Chrome 50 (2016년 3월 베타)도 예외가 아닙니다. 개발자가 알림을 더 세부적으로 제어할 수 있는 새로운 기능이 4개나 있습니다. 다음 작업을 할 수 있습니다.
- 알림 버튼에 아이콘 추가
- 일관된 환경을 만들기 위해 타임스탬프를 수정합니다.
- 알림 닫기 이벤트를 추적하여 알림을 동기화하고 분석을 제공합니다.
- 알림이 현재 표시된 알림을 대체할 때 재알림 환경을 관리합니다.
Chrome 50에는 푸시 알림용 페이로드도 추가되었습니다. Chrome에 구현된 Notifications API의 최신 정보를 확인하려면 사양 및 사양 문제 추적기를 따르세요.
맞춤 아이콘으로 눈길을 끄는 작업 버튼 만들기
최근 Chrome 49의 알림 작업 버튼에 관한 게시물에서 알림 버튼을 멋지게 만들기 위해 이미지를 첨부할 수는 없지만 유니코드 문자를 사용하여 그림 이모티콘 등을 인라인으로 표시할 수 있다고 언급했습니다. 이제 걱정하지 마세요. 최근 추가된 기능을 사용하면 작업 버튼에 이미지를 지정할 수 있습니다.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
작업 아이콘의 모양은 플랫폼마다 다릅니다. 예를 들어 Android에서는 Lollipop 이상에서는 아이콘에 어두운 회색 필터가 적용되고 Lollipop 미만에서는 흰색 필터가 적용되지만 데스크톱에서는 풀 컬러로 표시됩니다. (참고: 데스크톱에서의 향후 계획에 관한 논의가 있습니다.) 일부 플랫폼에서는 작업 아이콘을 표시할 수조차 없으므로 의도의 유일한 표시기가 아닌 작업에 맥락을 제공하기 위해 아이콘을 사용해야 합니다.
마지막으로 리소스를 다운로드해야 하므로 아이콘을 최대한 작게 유지하고 설치 이벤트에서 미리 캐시하는 것이 좋습니다. 이 글을 작성하는 시점에서는 Chrome의 알림 리소스 가져오기가 아직 서비스 워커를 통해 라우팅되지 않습니다.
알림 닫기 이벤트
알림에서 자주 요청되는 기능은 사용자가 알림을 닫은 시점을 알 수 있는 기능입니다. 최근 알림 사양 변경사항으로 notificationclose 이벤트가 추가되기 전에는 이를 실행할 방법이 없었습니다.
notificationclick 및 notificationclose 이벤트를 사용하면 사용자가 알림과 상호작용하는 방식을 파악할 수 있습니다. 오랫동안 열어두었다가 닫는가요? 아니면 바로 조치를 취하나요?
인기 있는 사용 사례 중 하나는 기기 간에 알림을 동기화하는 것입니다. 사용자가 데스크톱 기기에서 알림을 닫으면 휴대기기에서도 동일한 알림이 닫혀야 합니다. 아직 자동으로 이 작업을 실행할 수 있는 기능은 없습니다 (모든 푸시 메시지에는 알림이 표시되어야 함). 하지만 notificationclose를 사용하면 서버에서 사용자의 알림 상태를 추적하고 사용자가 기기를 사용할 때 이를 다른 기기와 동기화하여 이 작업을 처리할 수 있습니다.
notificationclose 이벤트를 사용하려면 서비스 워커 내에 등록합니다. 이 이벤트는 사용자가 알림을 직접 닫은 경우에만 실행됩니다. 예를 들어 사용자가 특정 알림을 닫거나 Android의 경우 트레이에 있는 모든 알림을 닫는 경우입니다.
requireInteraction 플래그가 false이거나 설정되지 않은 경우 사용자가 알림을 수동으로 닫지 않고 시스템에서 자동으로 닫으면 notificationclose 이벤트가 트리거되지 않습니다.
간단한 구현은 다음과 같습니다. 사용자가 알림을 닫으면 맞춤 로직을 실행할 수 있는 알림 객체에 액세스할 수 있습니다.
self.addEventListener('notificationclose', e => console.log(e.notification));
알림 생성기에서 이를 테스트할 수 있습니다. 알림을 닫으면 알림이 표시됩니다.
기존 알림을 대체할 때 사용자에게 불편을 주지 않기
벤 아저씨가 '큰 힘에는 큰 책임이 따른다'고 말했을 때는 피터 파커의 힘이 아니라 알림 시스템에 관해 이야기하고 있었던 것이 분명합니다. 알림 시스템은 사용자와 상호작용하는 강력한 매체입니다. 신뢰를 악용하는 경우 모든 알림이 사용 중지되고 완전히 잃을 수도 있습니다.
알림을 만들 때 소리 알림을 만들거나 진동하여 사용자의 주의를 끌도록 설정할 수 있습니다. 또한 새 알림 객체에서 '태그' 속성을 재사용하여 기존 알림을 대체할 수 있습니다.
Chrome 50 이전에는 알림을 만들거나 기존 알림을 대체할 때마다 진동 패턴이 실행되거나 소리 알림이 재생되어 사용자에게 불편을 줄 수 있었습니다. 이제 Chrome 50에서는 'renotify'라는 간단한 불리언 플래그를 통해 재알림 중에 발생하는 상황을 제어할 수 있습니다. 후속 알림에 동일한 '태그'를 사용할 때의 새로운 기본 동작은 무음 처리이며 개발자는 플래그를 'true'로 설정하여 사용자에게 '다시 알림'을 선택해야 합니다.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
알림 생성기에서 사용해 볼 수 있습니다.
사용자에게 표시되는 타임스탬프 관리
Android에서는 Chrome 알림의 생성 시간이 기본적으로 오른쪽 상단에 표시됩니다. 안타깝게도 이 시점이 시스템에서 실제로 알림을 생성한 시점이 아닐 수 있습니다. 예를 들어 기기가 오프라인 상태일 때 이벤트가 트리거되었거나 예정된 회의에 대한 알림이 표시되었을 수 있습니다. Chrome 50부터 Chrome에는 개발자가 알림에 표시할 시간을 제공할 수 있는 새로운 '타임스탬프' 속성이 추가되었습니다.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
타임스탬프는 현재 Android용 Chrome에서만 표시됩니다. 데스크톱에는 표시되지 않지만 모바일과 데스크톱 모두에서 알림 순서에 영향을 미칩니다.