안드로이드나 iOS와 같은 모바일 환경에서는 notification이라는 기능을 이용하여 스마트폰 이용자에게 새로운 정보, 어떠한 작업의 완료 등과 같은 정보를 알릴 수 있다 [그림 1].
[그림 1] 안드로이드와 iOS의 알림 (notification) 기능
그동안 모바일 환경에서 매우 유용하게 이용되고 있는 notification 기능을 데스크톱 브라우저 환경에서 이용하기 위해서는 자바스크립트를 이용하여 직접 notification 기능을 구현하는 수 밖에 없었다. 그러나, 최근에 크롬, 파이어폭스, 사파리에 Web Notification API라는 것이 추가되면서 자바스크립트를 이용하여 간편하게 notification 기능을 구현할 수 있게 되었다.
아래의 [코드 1]은 자바스크립트 환경에서 Web Notification API를 이용하여 notification 기능을 구현하는 코드이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button onclick="calculate()">calculate</button> <script type="text/javascript"> window.onload = function () { if (window.Notification) { Notification.requestPermission(); } } function calculate() { setTimeout(function () { notify(); }, 5000); } function notify() { if (Notification.permission !== 'granted') { alert('notification is disabled'); } else { var notification = new Notification('Notification title', { icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png', body: 'Notification text', }); notification.onclick = function () { window.open('http://google.com'); }; } } </script> </body> </html> | cs |
[코드 1] Web Notification API를 이용한 notification 기능 구현
[코드 1]에 작성된 내용에 대한 설명은 아래와 같다.
9번째 줄: HTML 문서에 버튼을 하나 생성하고, 버튼을 클릭하면 calculate() 함수가 호출된다.
12 ~ 16번째 줄: HTML 문서가 생성될 때, notification 기능에 대한 허용 여부를 확인한다.
19 ~ 21번째 줄: notify() 함수를 호출하여 브라우저에 알림을 출력한다. [코드 1]에서는 의도적으로 5초 후에 알림을 출력하도록 했다.
Web Notification API에서는 Notification 객체에 제목, 아이콘, 내용을 입력하여 생성하면 자동으로 브라우저에 알림이 출력된다. 또한, Notification 객체에 이벤트 핸들러를 등록하여 알림 메시지에 다양한 기능을 추가할 수 있다. [코드 1]의 34 ~ 36번째 줄에서는 알림 메시지가 클릭되면, 구글 홈페이지로 이동하도록 이벤트 핸들러를 등록하였다.
Web Notification API를 이용하여 알림 기능을 구현할 때 주의할 점은 반드시 웹 서버 환경에서 실행해야 한다는 것이다. 아래의 [그림 2]와 같이 브라우저에서는 알림 기능에 대한 권한을 주소에 따라 관리한다.
[그림 2] 브라우저의 알림 기능 관리
단순히 브라우저를 통해 HTML 문서를 열면, 권한을 부여할 주소 자체가 존재하지 않기 때문에 Web Notification API가 정상적으로 동작하지 않는다. 따라서, 웹 서버 환경을 구축하여 로컬과 같은 특정 주소를 통해 HTML 문서를 호출해야 Web Notification API가 정상적으로 작동하는 것을 확인할 수 있다.
아래의 [실행 결과 1]은 [코드 1]을 크롬 환경에서 실행한 것이다.
[실행 결과 1] Web Notification API를 이용한 알림 기능
[실행 결과 1]에서는 버튼을 클릭한 후, 예제의 HTML 문서에서 벗어나 다른 페이지를 보고 있다. 그리고 5초가 지나면, 어떤 페이지를 보고 있는가에 상관 없이 우측 하단에 Stackoverflow 아이콘을 포함하는 알림이 출력되는 것을 볼 수 있다.
'웹 프로그래밍' 카테고리의 다른 글
| [JavaScript] - 네임스페이스 (Namespace) (1) | 2016.09.11 |
|---|---|
| Java 환경에서 트위터 API를 이용한 SNS 분석 (0) | 2016.09.09 |
| [JavaScript] - 자바스크립트와 객체지향 프로그래밍 (0) | 2016.09.04 |
| [JavaScript] - 전역 변수의 문제점과 해결 방법 (1) | 2016.09.04 |
| [JavaScript] - 코드 블로킹 (Code Blocking) 방지 (0) | 2016.09.04 |
