소개
Notifications API를 사용하면 포커스가 있는 탭과 관계없이 수동적 (새 이메일, 트윗 또는 캘린더 일정)으로 또는 사용자 상호작용 시 특정 이벤트에 관한 알림을 사용자에게 표시할 수 있습니다. 초안 사양이 있지만 현재 표준에 포함되어 있지 않습니다.
다음의 간단한 단계에 따라 몇 분 내에 알림을 구현할 수 있습니다.
1단계: Notifications API 지원 확인
webkitNotifications가 지원되는지 확인합니다. webkitNotifications의 이름은 초안 사양의 일부이기 때문입니다. 최종 사양에는 대신 notifications() 함수가 있습니다.
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
2단계: 사용자가 웹사이트에 알림을 표시할 권한을 부여하도록 허용
앞서 언급한 모든 생성자는 사용자가 웹사이트에 알림을 표시할 권한을 수동으로 부여하지 않은 경우 보안 오류를 발생시킵니다.
예외를 처리하려면 try-catch 문을 사용할 수 있지만 동일한 목적으로 checkPermission 메서드를 사용할 수도 있습니다.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
웹 애플리케이션에 알림을 표시할 권한이 없는 경우 requestPermission 메서드가 정보 표시줄을 표시합니다.
그러나 requestPermission 메서드는 원치 않는 정보 표시줄을 방지하기 위해 마우스 또는 키보드 이벤트와 같은 사용자 작업으로 트리거된 이벤트 핸들러에서만 작동한다는 점을 매우 중요하게 기억해야 합니다. 이 경우 사용자 작업은 ID가 'show_button'인 버튼을 클릭하는 것입니다.
사용자가 특정 시점에 requestPermission를 트리거하는 버튼이나 링크를 명시적으로 클릭하지 않은 경우 위의 스니펫은 작동하지 않습니다.
3단계: 리스너 및 기타 작업 연결
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
이 시점에서 코드를 더 깔끔하게 유지하기 위해 자체 Notification 클래스를 만들어 이러한 모든 이벤트와 작업을 캡슐화하는 것이 좋습니다. 하지만 이는 이 튜토리얼의 범위를 벗어납니다.