webkitNotificationsデモ

サポートの有無

  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);
      }
    });
  });

外部、内部のhtmlを表示する

通知(300x120のtest.htmlを表示する)
  $("#request-notification_1").click(function(e){
    e.preventDefault();
    var notity = window.webkitNotifications;
    var popup = notity.createHTMLNotification("./test.html");
    popup.show();
  });

指定したアイコン、タイトル、テキストを表示する

通知(アイコン、タイトル、テキスト表示する)
  $("#request-notification_2").click(function(e){
    var notity = window.webkitNotifications;
    /*
     *  iconは48x48にリサイズされる
     *  だけどテキストが短いと表示領域に48x47しか表示されない。
     */
    var popup = notity.createNotification("48x48.jpg","タイトルは長くても改行されるようだ","そしてテキストが表示されるわけです。");
    popup.show();
    var popup2 = notity.createNotification("48x48.jpg","タイトルは長くても改行されるようだ","そしてテキストが表示されるわけです。\
    どうやら合計の高さが120pxを超えたらはスクロールバーで対処するみたい。\
    かなりかっこ悪いけど。うめーうめーうめーうめーうめー");
    popup2.show();
  });

5秒後に消えるとか。

通知(5秒後に消える)
  $("#request-notification_3").click(function(e){
    var notity = window.webkitNotifications;
    var popup = notity.createNotification("48x48.jpg","勝手に消える通知","この通知は5秒後に消えます。");
    popup.show();
    setTimeout(function(){
      popup.cancel();
    },5000);
  });

通知が開く、エラー、閉じる時のイベント設定

通知(通知が開く、エラー(?)、閉じるした時にイベントを発生させる)

  $("#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("表示しました。
e.timeStamp:"+e.timeStamp); }; popup.onerror = function(e){ $("#popup_status").html("エラー発生。"); }; popup.onclose = function(e){ $("#popup_status").html("閉じました。
e.timeStamp:"+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){
      /*
       *  どうやら自身はevent.currentTargetらしい
       *  e.currentTarget.cancel();
       */
      $("head").append('<script type="text/javascript">var w=window.open("http://example.com/","new_win");</script>');
    };
    popup.show();
  });
Copyright geckotang All Rights Reserved.