시작하며
알림(Notifications) API 는 유저에게 어떠한 이벤트를 통보해 주는 역할을 합니다. 새 메일, 새 트윗 혹은 일정 같은 직접 확인해야 하는 이벤트나 사용자가 간과하지 말고 주목했으면 하는 어떠한 상호작용을 통보해 주는 역할입니다. API에 대한 스펙 초안이 정의되어 있긴 하지만 아직은 표준화 되지 않았습니다.
하지만 아래 몇가지 간단한 예제를 통해 단 몇 분 만에 간단히 알림 API를 체험해 보실 수 있을 것입니다.
1단계 : 우선, 알림 API가 지원되는 여부를 확인해 보세요.
우리는 우선 webkitNotifications 이 브라우저에서 지원되는지 확인해 봐야 합니다. webkitNotifications 는 API스펙 초안의 한 부분이지만 향후에는 아마 notifications() 함수로 대처될 것이라 생각됩니다.
// 통보기능(Notifications API)지원여부 확인 // 'window'는 생략해도 됩니다. if (window.webkitNotifications) { console.log("알림 기능을 지원합니다!"); } else { console.log("해당 브라우저/OS는 아직 알림 API를 지원하지 않습니다.");
}
2단계 : 알림 만들기
알림에는 알려질 컨텐츠에 따라 정적 텍스트와 HTML의 두 개의 유형으로 나뉩니다. 만약 여러분의 어플리케이션이 이 두개의 타입을 모두 사용하여 클라이언트에 통보한다면 함수에서 옵션값으로 구분하여 사용 가능할 것입니다.
function createNotificationInstance(options) { if (options.notificationType == 'simple') { return window.webkitNotifications.createNotification( 'icon.png', '알림 제목', '알림 내용...'); } else if (options.notificationType == 'html') { return window.webkitNotifications.createHTMLNotification('http://someurl.com'); } }
3단계: 사용자가 웹 사이트에서 알림 기능을 허용하도록 합니다.
사용자가 수동으로 웹 사이트에 알림을 표시하는 권한을 주지 않은 경우, 위의 자바스크립트에서 언급한 생성자는 보안 오류가 발생합니다.
예외사항을 다루기 위해서는 try-catch문을 사용하면 되지만, 또한 checkPermission 이라는 함수도 비슷한 기능을 합니다.
document.querySelector('#show_button').addEventListener('click', function() { if (window.webkitNotifications.checkPermission() == 0) { // 0은 권한이 허용된 상태 // 허용된 상태라면 2단계로 넘어감 createNotificationInstance({ notificationType: 'html' }); } else { window.webkitNotifications.requestPermission(); } }, false);
웹 어플리케이션에 대해 권한이 허용되지 않은 경우, 위에서 requestPermission 는 사용자에게 아래와 같은 메시지를 나타낼 것입니다.
허나 원치 않는 허용 여부 메시지를 방지하기 위해 requestPermission 는 마우스 클릭이나 키보드 입력 같은 사용자의 액션에 대한 이벤트 핸들러 트리거에서만 작동한다는 것을 명심해야 합니다. (위의 document.querySelector 안에 addEventListener 를 넣은 것처럼) 위의 경우 사용자는 “show_button” 이라는 버튼을 클릭했을 때 알림 기능 허용 여부를 체크하게 됩니다. 물론, show_button을 클릭하지 않으면 requestPermission 는 작동하지 않습니다.
4단계 : 리스너 등록과 기타 액션 추가
document.querySelector('#show_button').addEventListener('click', function() { if (window.webkitNotifications.checkPermission() == 0) { // 0은 권한이 허용된 상태 // 허용된 상태라면 2단계로 넘어감 notification_test = createNotificationInstance({notificationType: 'html'}); notification_test.ondisplay = function() { ... do something ... }; notification_test.onclose = function() { ... do something else ... }; notification_test.show(); } else { window.webkitNotifications.requestPermission(); } }, false);
위의 경우, 이 튜토리얼의 주제와는 좀 벗어나지만 아마 코딩을 깔끔하게 하기 위해서 이벤트 리스너 안에 알림시 사용할 이벤트와 액션들을 다 넣어놓은 것 같습니다.
예제
참고 : 알림 권한을 초기화 하기 위해서도 이 버튼을 사용할 수 있습니다.
예제1 : 사용자에게 HTML 알림 보이기
예제2 : back-end 이벤트를 통한 간단한 알림 기능(새 트윗 알림)
아래에 어떤 트위터의 ID를 입력하면 최근 3개의 트윗을 알림받을 수 있습니다.(리트윗이나 트위터 API가 거부한 것은 제외) 그리고 1분 단위로 새 트윗을 체크합니다.
위의 예제를 만들기 위해 JSONP를 이용하여 트윗들을 가져오고 반복문을 통해 3개의 표시될 트윗을 생성합니다.
주의할 것은 스크린과 알림 크기에 따라 표시될 알림에는 제약이 있다는 것입니다. 평균적으로 5개 정도가 이상적인 알림 숫자입니다. 새로운 알림은 큐에 쌓여 대기 리스트에 올라가고, 현재 알림이 끝나면 표시되게 됩니다.
// jsonp 형식으로 트윗 가져오기 var script = document.createElement("script"); script.src = 'http://twitter.com/statuses/user_timeline/'+ username+'.json?' + 'count=3&callback=fetchTweets'; document.body.appendChild(script); function fetchTweets(data) { var tweet; var i = data.length; while (i--) { tweet = data[i]; if (window.webkitNotifications.checkPermission() == 0) { window.webkitNotifications.createNotification( tweet.user.profile_image_url, tweet.user.name, tweet.text).show(); // note the show() } else { // requestPermission을 호출할 수 없는 경우 console.log('알림 기능을 받기 위해서는 "이 페이지에 알림 기능 허용"을 먼저 클릭해주세요.'); return; } } }
트윗 알림은 콜백 함수에서 생성되야 합니다. 이해가 가시나요? 이를 이해하는 것은 매우 중요한데, 만약 유저가 알림 권한을 허용하지 않는다면 우리는 requestPermission()을 통해 유저에게 허용해 달라고 요청해야 합니다. 이 함수는 오로지 사용자에 의해서만 발생될 수 있습니다. 3단계에서 설명한 것을 참조해 보시기 바랍니다.
원문 : Using the Notifications API
번역 : [email protected]
