This is polyfill/shim for the (w3c, draft) Notifications API.
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.
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.
Mobile | iOS | ||||||
---|---|---|---|---|---|---|---|
Alternating document.title
Alternate the text in the window/tab is a good eye catcher. |
|||||||
Desktop Notification Create a popup on your desktop which can be viewed outside the browser |
|||||||
Flashing TaskBar Icon
Used only with IE pinned sites we may flash the taskbar icon |
IE9-only |
||||||
Mobile Notifications
Adding messages to the devices default notification bar |
<script src="notification.js"></script>
new Notification( string Message, object Options );
if(Notification.permission !== 'granted'){ Notification.requestPermission(); } n = new Notification( "Hello", { body: "This is a test", icon : "star.ico" });
Close it automatically [Optional]
n.close();
To use the desktop notifications we need to request permission. So first lets check whether your browser supports it?
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") }
If Notification.permission === 'denied'
, then perhaps prompt the user to
enable it?
if(Notification.permission === 'denied'){ // show a button to enable permissions }
// attach this to a button click event or automatically load it. Notification.requestPermission(function(permission){ alert(permission); });
Now go to first demo above and run it!