window.webkitNotifications

JavaScript

chromeで動く

http://dev.shokai.org/test/webkit-notification/


$(function(){
    $('input#notify').click(function(){
        switch(window.webkitNotifications.checkPermission()){
        case 1:
            window.webkitNotifications.requestPermission();
        case 0:
            var notif = window.webkitNotifications.createNotification('shokai.jpg', "title", $('input#message').val());
            notif.ondisplay = function(){
                setTimeout(function(){
                    if(notif.cancel) notif.cancel();
                }, 3000);
            };
            notif.show();
        }
    });
});

firefoxでも拡張いれればgrowlできる http://code.google.com/p/ff-html5notifications/

参考：http://gecko.hp2.jp/2010/04/27/%e3%80%90javascript%e3%80%91webkit%e3%81%ae%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e9%80%9a%e7%9f%a5%e3%81%ae%e3%83%87%e3%83%a2/


requestPermissionはクリックなどのユーザ操作イベントの後でないと動かない、つまりsetIntervalから呼び出してもダメなので、chatなどの新着の表示は

  1. 先にボタンやチェックボックスをクリックさせてpermissionを得る
  2. 新着が来た時にcreateNotificationしてshowする

の順にやらなければならない。

body.clickでも動いたので、実質ユーザが画面をロードして何か操作したらすぐに許可をブラウザ上部に表示させる事ができる

$('body').click(function(){
  if(window.webkitNotifications.checkPermission() == 1){
    window.webkitNotifications.requestPermission();
  }
});