PPush 알림을 사용하면 앱 같은 뛰어난 환경을 사용자에게 제공하여 채팅 메시지 수신과 같은 중요하고 시기적절한 업데이트를 알릴 수 있습니다. 알림 플랫폼은 브라우저에서 비교적 새로운 기능이며 사용 사례와 요구사항이 늘어남에 따라 알림 API가 많이 추가되고 있습니다. Chrome 50 (2016년 3월 베타 버전)도 예외는 아니며 개발자가 알림을 더 효과적으로 제어할 수 있는 4가지 이상의 새로운 기능을 제공합니다. 다음과 같은 기능을 사용할 수 있습니다.
- 알림 버튼에 아이콘을 추가하거나
- 일관된 환경을 만들 수 있도록 타임스탬프를 수정합니다.
- 알림 닫기 이벤트를 추적하여 알림을 동기화하고 분석 정보를 제공합니다.
- 알림이 현재 표시된 알림을 대체할 때 다시 알림 환경을 관리합니다.
Chrome 50에는 푸시 알림 페이로드도 추가되었습니다. Chrome에서 구현된 Notifications API에 대한 최신 정보를 확인하려면 spec 및 사양 Issue Tracker를 따르세요.
맞춤 아이콘으로 매력적인 작업 버튼 만들기
최근 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 이벤트를 사용하면 사용자가 알림과 상호작용하는 방식을 파악할 수 있습니다. 오랫동안 열어 놓은 후 적극적으로 닫는지 아니면 즉시 조치를 취하나요?
일반적인 사용 사례 중 하나는 기기 간 알림을 동기화하는 것입니다. 사용자가 데스크톱 기기에서 알림을 닫으면 휴대기기의 동일한 알림도 닫아야 합니다. Google에서는 아직 이 작업을 자동으로 수행할 수 있는 기능이 없지만 (모든 푸시 메시지에는 알림이 표시되어야 합니다) notificationclose를 사용하면 서버에서 사용자의 알림 상태를 추적하고 사용자가 이를 사용할 때 다른 기기와 동기화하여 이를 처리할 수 있습니다.
Notificationclose 이벤트를 사용하려면, 서비스 워커 내에 등록하세요. 그러면 사용자가 알림을 닫았을 때 (예: Android에서) 사용자가 특정 알림을 닫거나 트레이의 모든 알림을 닫을 때만 이벤트가 실행됩니다.
requiredInteraction 플래그가 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에는 개발자가 알림에 표시해야 하는 시간을 제공할 수 있는 새로운 'timestamp' 속성이 추가되었습니다.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
타임스탬프는 현재 Android용 Chrome에서만 표시됩니다. 데스크톱에는 표시되지 않지만 모바일과 데스크톱의 알림 순서에 영향을 미칩니다.