notification-polyfill
Version:
Polyfills the Notification API in browsers
167 lines (138 loc) • 4.13 kB
HTML
<html>
<head>
<title>notification.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/adorn/adorn.css" />
<script src="notification.js"></script>
<script src="/adorn/adorn.js"></script>
</head>
<body>
<header><h1><img src="favicon.ico" width=64 height=64 style="vertical-align:middle;margin-right:20px;">notification.js</h1></header>
<blockquote>
<p>This is polyfill/shim for the <a href="http://www.w3.org/TR/notifications/">
(w3c, draft) Notifications API</a>.</p>
<p>Its not a striaght forward shim, instead where a browser lacks all forms of native Notifications this shim'll adopt alternative techniques to bring a user back to a page.</p>
</blockquote>
<h2>features</h2>
<p>This shim
is all about capturing your attention and bringing you back to the page. It employs various "eye catching" techniques,
leveraging the best the browser can offer. Checkout the techniques below.</p>
<h3>techniques vs. browsers</h3>
<table>
<thead>
<tr>
<td></td>
<th><div class="ie10"></div></th>
<th><div class="cr"></div></th>
<th><div class="ff"></div></th>
<th><div class="ff"></div>Mobile</th>
<th><div class="sa"></div></th>
<th><div class="sa"></div>iOS</th>
<th><div class="op"></div></th>
</tr>
</thead>
<tbody>
<tr>
<th>Alternating <code>document.title</code>
<p>Alternate the text in the window/tab is a good eye catcher.</p></th>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"> </td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<th>Desktop Notification<p>Create a popup on your desktop which can be viewed outside the browser</p></th>
<td></td>
<td class="yes"></td>
<td class="yes"></td>
<td> </td>
<td class="yes"></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Flashing TaskBar Icon
<p>Used only with IE pinned sites we may flash the taskbar icon</p></th>
<td class="yes"><br/>IE9-only</td>
<td></td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Mobile Notifications
<p>Adding messages to the devices default notification bar</p></th>
<td></td>
<td></td>
<td></td>
<td class="yes"></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h2>quicky</h2>
<h3>1. download</h3>
<p><a class="source" href="./notification.js">notification.js</a></p>
<br />
<h3>2. install</h3>
<pre>
<script src="notification.js"></script>
</pre>
<h3>3. send a message</h3>
<p><code>new Notification( string Message, object Options );</code></p>
<pre class="tryit">
if(Notification.permission !== 'granted'){
Notification.requestPermission();
}
n = new Notification( "Hello", {
body: "This is a test",
icon : "star.ico"
});
</pre>
<p>Close it automatically [Optional]</p>
<pre class="tryit">
n.close();
</pre>
<h2>enable desktop notifications</h2>
<h3>check permission</h3>
<p>To use the desktop notifications we need to request permission. So first lets check whether
your browser supports it?</p>
<pre class="tryit">
var chck = Notification.permission;
if( chck === 'granted' ){
alert("Yes enabled")
}
else if( chck === 'denied' ){
alert("Browser supports it, but not enabled")
}
else if( chck === 'unknown' ){
alert("Browser does not support it")
}
</pre>
<p>If <code>Notification.permission === 'denied'</code>, then perhaps prompt the user to
enable it?</p>
<pre>
if(Notification.permission === 'denied'){
// show a button to enable permissions
}
</pre>
<h3>request permission</h3>
<pre class="tryit">
// attach this to a button click event or automatically load it.
Notification.requestPermission(function(permission){
alert(permission);
});
</pre>
<h2>that's all folks</h2>
<p>Now go to first demo above and run it!</p>
</body>
</html>