드래프트 문서: http://dev.w3.org/2006/webapi/WebNotifications/publish
참조문서: http://www.html5rocks.com/tutorials/notifications/quick
일반 메신저의 알림창처럼 모니터 화면 우측 하단에 알림창이 뜨도록 하는 기능이다.
어설프게 브라우저에서 <div>를 위치 바꿔가면서 알림창 비슷하게 구현한 게 아니라,
진짜로 브라우저가 알림창을 띄워준다.
구글에 의해 제안되고 현재 크롬에서만 동작하는 기능.
다음은 트위터 타임라인의 최신글을 하나 가져와서 알림창으로 보여주는 예제이다.
setInterval이나 WebWorker를 이용하면 주기적인 polling을 통해서 스마트폰의 트위터앱처럼 push해줄 수도 있을 것 같다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// 트윗 가져오기
function readTweets()
{
// 알림창 설정체크
if (window.webkitNotifications.checkPermission()) {
window.webkitNotifications.requestPermission();
return;
}
// 트위터 사용자명
var username = document.getElementById("username").value;
if (username=='') {
alert('사용자명을 입력하세요.');
document.getElementById("username").focus();
return;
}
// Tweeter API를 이용해 타임라인 최신글 하나 가져오기
var script = document.createElement("script");
script.src = 'http://twitter.com/statuses/user_timeline/'+username+'.json?count=1&callback=fetchTweets';
document.body.appendChild(script);
}
// 가져온 트윗 출력 callback
function fetchTweets(data)
{
if (data.length>0) {
window.webkitNotifications.createNotification(data[0].user.profile_image_url, data[0].user.name, data[0].text).show();
}
}
</script>
</head>
<body>
<input type="text" id="username" />
<button onclick="readTweets();">트윗 가져오기</button>
</body>
</html>
<html>
<head>
<script type="text/javascript">
// 트윗 가져오기
function readTweets()
{
// 알림창 설정체크
if (window.webkitNotifications.checkPermission()) {
window.webkitNotifications.requestPermission();
return;
}
// 트위터 사용자명
var username = document.getElementById("username").value;
if (username=='') {
alert('사용자명을 입력하세요.');
document.getElementById("username").focus();
return;
}
// Tweeter API를 이용해 타임라인 최신글 하나 가져오기
var script = document.createElement("script");
script.src = 'http://twitter.com/statuses/user_timeline/'+username+'.json?count=1&callback=fetchTweets';
document.body.appendChild(script);
}
// 가져온 트윗 출력 callback
function fetchTweets(data)
{
if (data.length>0) {
window.webkitNotifications.createNotification(data[0].user.profile_image_url, data[0].user.name, data[0].text).show();
}
}
</script>
</head>
<body>
<input type="text" id="username" />
<button onclick="readTweets();">트윗 가져오기</button>
</body>
</html>
'HTML/CSS' 카테고리의 다른 글
| [HTML5] canvas의 마우스 이벤트 통과시키기 (0) | 2012.10.31 |
|---|---|
| [HTML5] canvas로 double buffering 하기 (2) | 2012.05.15 |
| [HTML5] Web Messaging (cross-domain messaging, channel messaging) (0) | 2010.12.31 |
| [HTML5] 저장가능한 그림판 (canvas, localStorage) (6) | 2010.12.30 |
| [HTML5] WebStorage (0) | 2010.12.29 |
