HTML5 Notifications

Use on pview

HTML

<p>
#1 <button id="permit" href="#">Allow</button> permisions to be notified.
</p>
<p>
#2 <button id="notify" href="#">Send notification!</button>
</p>

<details>
<summary>Additional information</summary>
<ul>
  <li><tt>window.webkitNotifications.requestPermission()</tt> only fire in <em>button click event</em> w/ Chrome.</li>
  <li>revoke permission: pref→Advanced Setting→privacy, contents→notification→exception</li>
</ul>
</details>

CSS

em {
    font-weight: bold;
    font-style: normal;
}

button {
    padding: 6px 10px;
    -webkit-border-radius: 2px 2px;
    border: solid 1px rgb(153, 153, 153);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
    color: #333;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-shadow: 0px 1px 1px rgba(255,255,255,1);
    line-height: 1;
    font-size: 130%;
    font-weight: bold;
}

JavaScript

$(function() {
    $('#permit').bind("click", function(){
        if (window.webkitNotifications.checkPermission() != 0) {
            window.webkitNotifications.requestPermission();
        }
    });
    $('#notify').bind("click", function(){
        console.log("notify!");
        if (window.webkitNotifications.checkPermission() == 0) {
            window.webkitNotifications.createNotification('http://cdn2.iconfinder.com/data/icons/lullacons/large-alert.png',"Status for timer #efcfr","It has been one hour since timer been started.").show();
        } else {
            console.log("no permission");
        }
    });
});