It’s a common problem. While the user is looking away from the document or is interacting with some other section, something updates in the background of the page. Be it an incoming e-mail, message, or some otherwise important content, the page now needs to notify the user of this information, but is limited to either playing a sound or calling something like an alert. To get the user’s attention, in other words, the page needs to interrupt whatever the user was doing.
This is where the Notification API comes in, exposing functions for letting the user give permission for a page to create notifications that will appear outside of the browser itself to signal something. By being tied to a user gesture event, the Notification API can allow a long-running web app to produce short messages with event listeners tied to its controls. The user can either dismiss the message or, if a function is attached to the confirmation button, show additional details about the message without the user having to load the whole document itself.
Unfortunately, support for the Notification API is currently limited to primarily Chrome and Firefox, but with support also in Safari on OS X 10.8+. The Mozilla Developers Network page has good coverage of how an implementation might work in a project. It also details the necessary options for those who might wants to include Notification support in their application manifest files.
| /** | |
| * A Notifications object | |
| * | |
| * http://caniuse.com/notifications | |
| * Currently supported only in Firefox 22+, Chrome 22+, and Safari 6+ (on Mac OSX 10.8+). | |
| * | |
| * Note: requestPermission() MUST be called from a user gesture event in Chrome | |
| * to be valid. It will fail silently otherwise! | |
| * | |
| * Note: Firefox and Safari will close notifications themselves | |
| * if the user does nothing for a period of time. | |
| * | |
| * @property {boolean} supported If the current context supports Notifications or not | |
| * @property {boolean} permission If the user has granted permission or not | |
| * @property {function} onclick The function to be called for the 'onclick' event | |
| * @property {function} onshow The function to be called for the 'onshow' or 'ondisplay' event | |
| * @property {function} onerror The function to be called for the 'onerror' event | |
| * @property {function} onclose The function to be called for the 'onclose' event | |
| */ | |
| var Notifications = (function(self) { | |
| self.supported = ("Notification" in window); | |
| self.permission = false; | |
| self.onclick = function() {}; | |
| self.onshow = function() {}; | |
| self.onerror = function() {}; | |
| self.onclose = function() {}; | |
| var notification = null; | |
| /** | |
| * Requests permission from the user to display notifications | |
| */ | |
| self.requestPermission = function() { | |
| if (self.supported) { | |
| if (window.webkitNotifications) { | |
| window.webkitNotifications.requestPermission(); | |
| if (window.webkitNotifications.checkPermission() === 0) { | |
| self.permission = true; | |
| } | |
| } else { | |
| Notification.requestPermission(function(status) { | |
| if (status === "granted") { | |
| self.permission = true; | |
| } | |
| }); | |
| } | |
| } | |
| }; | |
| /** | |
| * Create a notification | |
| * @param {string} title The title of the notification | |
| * @param {string} content The content of the notification | |
| * @param {string} tag The tag of the notification | |
| * @param {string} icon The icon URL of the notification | |
| */ | |
| self.createNotificiation = function(title, content, tag, icon) { | |
| if (self.permission) { | |
| notification = new Notification(title, { | |
| dir: "auto", | |
| lang: "", | |
| body: content, | |
| tag: tag, | |
| icon: icon | |
| }); | |
| notification.addEventListener('click', self.onclick); | |
| notification.addEventListener('show', self.onshow); | |
| notification.addEventListener('display', self.onshow); | |
| notification.addEventListener('error', self.onerror); | |
| notification.addEventListener('close', self.onclose); | |
| } | |
| }; | |
| return self; | |
| })(Notifications || {}); |
Digital Ephemera 