【javascript】webkitのデスクトップ通知APIのデモ

not さっそく試行錯誤したデモを作ってみました。 http://gecko.hp2.jp/chrome_notify/ サポートの有無

  if(window.webkitNotifications){
    $("#webkit").html("webkitNotificationsをサポートしている");
  }else{
    $("#webkit").html("webkitNotificationsをサポートしていない");
  }
 

通知の許可をさせるにはクリックなどユーザーの動作が必要っぽい。

$("#request-permission").click(function(e) {
    e.preventDefault();
    window.webkitNotifications.requestPermission(function(){
      if(cb){
        cb(window.webkitNotifications.checkPermission() == 0);
      }
    });
  });
 
単純に表示させるだけ。 iconは48×48にリサイズされる が、テキストが短いと表示領域に48×47しか表示されない(気がする)。 テキストが長く120pxを越えるとスクロールバーが出る。
  $("#request-notification_2").click(function(e){
    var notity = window.webkitNotifications;
    var popup = notity.createNotification("48x48.jpg","タイトルは長くても改行されるようだ","そしてテキストが表示されるわけです。");
    popup.show();
  });
 
外部のHTMLを表示する。 300×120を越えるとスクロールバーが出る。 javascriptは使えるようですが、alertは使えなかった。
  $("#request-notification_1").click(function(e){
    e.preventDefault();
    var notity = window.webkitNotifications;
    var popup = notity.createHTMLNotification("./test.html");
    popup.show();
  });
 
タイマーで消したりも出来る
  $("#request-notification_3").click(function(e){
    var notity = window.webkitNotifications;
    var popup = notity.createNotification("48x48.jpg","勝手に消える通知","この通知は5秒後に消えます。");
    popup.show();
    setTimeout(function(){
      popup.cancel();
    },5000);
  });
 
開く、エラー、閉じる際にイベントを起こすことも出来る。 帰ってくるeventで有用そうなものは event.timeStamp : イベント実行時のタイムスタンプ event.clipBord : undefinedだったけどchrome拡張用?  event.currentTarget : 表示したポップアップ って感じです。
  $("#request-notification_4").click(function(e){
    var notity = window.webkitNotifications;
    var popup = notity.createNotification("48x48.jpg","勝手に消える通知","通知が開く、エラー(?)、閉じるした時にイベントを発生させる");
    console.log(popup);
    popup.ondisplay = function(e){
      $("#popup_status").html("表示しました。
<b>e.timeStamp:</b>"+e.timeStamp);
    };
    popup.onerror = function(e){
      $("#popup_status").html("エラー発生。");
    };
    popup.onclose = function(e){
      $("#popup_status").html("閉じました。
<b>e.timeStamp:</b>"+e.timeStamp);
    };
    function hoge(){ alert("hoge");};
    popup.show();
  });
 
通知を閉じるときにポップアップも開ける(ブロック解除済みが前提ですが。)
  $("#request-notification_5").click(function(e){
    e.preventDefault();
    var notity = window.webkitNotifications;
    var popup = notity.createNotification("48x48.jpg","勝手に消える通知","headにスクリプト要素を追加してウィンドウを開く(ポップアップ許可しないとダメ)");
    popup.onclose = function(e){
      $("head").append('<script type="text/javascript">var w=window.open("http://example.com/","new_win");</script>');
    };
    popup.show();
  });
 
 
一応社内の(自分用の)タスクを通知するシステムには組み込んでみましたが、なかなか使えそう。 悪い使い方もなんか出来そう。 社内のchrome5使いに見せたらchrome5落ちたが落ちたので使えないのかな?なぞ。


Tags: , ,

 
 
 

One Response to “【javascript】webkitのデスクトップ通知APIのデモ”

  1. Gravatar of 【javascript】webkitの通知はスクリーンセーバーの上にも。:</gecko>:げことじ。:日常からWEBまで: 【javascript】webkitの通知はスクリーンセーバーの上にも。:</gecko>:げことじ。:日常からWEBまで:
    7. 5月 2010 at 13:44

    [...] 【javascript】 webkitのデスクトップ通知APIのデモで気づいたことを追記。 [...]

コメントをどうぞ