I recently spent some time getting to grips with the Web Notifications API, which is currently supported in Chrome, Safari 6, and just recently in Firefox. It enables you to create growl-style notifications for web applications, and if you’re on OSX it integrates really nicely with Notification Centre.
Notify.js aims to simplify requesting user permission and associated Web Notification API events, as well as providing a few extra callbacks and convenience methods.
There is a simple online demo here. Installation and setup instructions are as follows:
Please see the GitHub repo for setup instructions.
To initialize a web notification create a new
Notify instance, passing the message
title as well as any other options you wish to use.
Then show the notification.
title(string) - notification title
body: (string) - notification message body
icon: (string) - path for icon to display in notification
tag: (string) - unique identifier to stop duplicate notifications
timeout: (integer) - number of seconds to close the notification automatically
notifyShow: (function) - callback when notification is shown
notifyClose: (function) - callback when notification is closed
notifyClick: (function) - callback when notification is clicked
notifyError: (function) - callback when notification throws an error
permissionGranted: (function) - callback when user has granted permission
permissionDenied: (function) - callback when user has denied permission
Notify.needsPermission()- (returns boolean) check is permission is needed for the user to receive notifications.
Notify.requestPermission()- requests permission from the user if needed and handles permission callbacks.
Notify.isSupported()- (returns boolean) test for Web Notifications API browser support
A note about Chrome
Unlike other browsers that implement the Web Notification API, Chrome does not permit requesting permission on page load (it must be as a result of user interaction, such as a
click event). You can find out more in the Chromium bug for this issue.
Install Node. Testing relies on the Karma test-runner, which can be installed globally using the following command.
npm install -g karma
In the project root, to perform a single pass of the tests using Firefox run:
Please see the GitHub readme for up to date browser support details.
Scroll to top