Notification

Native Browser Notification

by samonela

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Ported from http://jsbin.com/notification/edit -->

HTML5 notifications
HTML5 notifications have now been implemented. Basically, you ask for permission and then you can create a notification.
<br/><br/>

<button id="authorize">Authorize notification</button>
<button id="show">Show notification</button>

<br/><br/>
https://hacks.mozilla.org/2013/04/hidpi-support-html5-notifications-parallel-js-asm-js-and-more-firefox-development-highlights/
<div id="html">
<span class="glyphicon glyphicon-heart"></span>
<span style="content: &#57349;"></span>♡
</div>

JavaScript

function authorizeNotification() {
    Notification.requestPermission(function(perm) {
        alert(perm);
    });
}

function showNotification() {
    //var html = '<html><head><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"></head><body><span class="glyphicon glyphicon-heart"></span>heart</body></html>';
    var html= '<html><head><style>.heart::before{content:"\e005";}</style></head><body>♡</body></html>';
    var icon = "data:text/html," + encodeURIComponent(html);
    //var html = document.getElementById("html").innerHTML;
   /* html = html.replace(/\s{2,}/g, '')   // <-- Replace all consecutive spaces, 2+
           .replace(/%/g, '%25')     // <-- Escape %
           .replace(/&/g, '%26')     // <-- Escape &
           .replace(/#/g, '%23')     // <-- Escape #
           .replace(/"/g, '%22')     // <-- Escape "
           .replace(/'/g, '%27');    // <-- Escape ' (to be 100% safe) // */
var dataURI = 'data:text/html;charset=UTF-8,' + html;
    var notification = new Notification("This is a title", {
        dir: "auto",
        lang: "",
        body: "This is a notification body",
        tag: "sometag",
        icon: dataURI//"https://www.gravatar.com/avatar/c916d92c098426d84778a7910cc32b39?s=32&d=identicon&r=PG"
    });

    // notification.onclose = …
    // notification.onshow = …
    // notification.onerror = …
}

document.querySelector("#authorize").onclick = authorizeNotification;
document.querySelector("#show").onclick = showNotification;