Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexgibson/notify.js
A handy wrapper for the Web Notifications API
https://github.com/alexgibson/notify.js
Last synced: about 2 months ago
JSON representation
A handy wrapper for the Web Notifications API
- Host: GitHub
- URL: https://github.com/alexgibson/notify.js
- Owner: alexgibson
- License: other
- Archived: true
- Created: 2013-02-15T15:28:18.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2019-04-26T15:55:13.000Z (over 5 years ago)
- Last Synced: 2024-07-23T08:51:31.419Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://alexgibson.github.io/notify.js/
- Size: 169 KB
- Stars: 1,331
- Watchers: 46
- Forks: 148
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - alexgibson/notify.js - A handy wrapper for the Web Notifications API (others)
README
Notify.js
=========
[](https://travis-ci.org/alexgibson/notify.js)
A handy wrapper for using the [Web Notifications API](http://www.w3.org/TR/notifications/).
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.
Online demo: https://alexgibson.github.io/notify.js/
Installation
------------
```
npm install notifyjs
```
Note: when installed via npm the Notify.js source file is located at `./dist/notify.js`.
Build
-----
Notify.js is written in ES6 and transpiled to ES5 & UMD format using [Babel](http://babeljs.io) and [Rollup](http://rollupjs.org).
Install dependencies:
```
npm install
```
Then build from source:
```
npm run build
```
Usage
-----
To initialize a web notification create a new `Notify` instance, passing the
message `title` as well as any other options you wish to use.
```javascript
var myNotification = new Notify('Yo dawg!', {
body: 'This is an awesome notification',
notifyShow: onNotifyShow
});
function onNotifyShow() {
console.log('notification was shown!');
}
```
Then show the notification.
```javascript
myNotification.show();
```
It's a good idea to make sure that you have permissions to send notifications
first.
```javascript
if (!Notify.needsPermission) {
doNotification();
} else if (Notify.isSupported()) {
Notify.requestPermission(onPermissionGranted, onPermissionDenied);
}
function onPermissionGranted() {
console.log('Permission has been granted by the user');
doNotification();
}
function onPermissionDenied() {
console.warn('Permission has been denied by the user');
}
```
Required parameters
-------------------
* title (string) - notification title
Optional parameters
-------------------
All options supported in the [Notifications API specification](https://notifications.spec.whatwg.org/#dictdef-notificationoptions),
in addition to:
* `timeout`: (integer) - number of seconds to close the notification automatically
* `closeOnClick`: (boolean) - close the notification when clicked. Useful in
chrome where the notification remains open until the timeout or the x is clicked.
* `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
Static methods and properties
-----------------------------
* `Notify.requestPermission(onPermissionGrantedCallback, onPermissionDeniedCallback)` -
requests permission from the user if needed and handles permission callbacks.
* `Notify.isSupported` - Function to test for Web Notifications API browser
support
* `Notify.needsPermission` - Boolean property to check if permission is needed
for the user to receive notifications.
Instance methods
----------------
* `Notify.show` - Function to display the Notify instance
* `Notify.close` - Function to close the Notify instance
Test
----
In the project root, to perform a single pass of the tests using Firefox run:
```
npm run test
```
This will also automatically build from source before running the tests.
Demo example
------------
An easy way to run the provided demo file is to use python `SimpleHTTPServer`
and then navigate to the `/example` directory:
```
python -m SimpleHTTPServer
```
Browser support
---------------
http://caniuse.com/#search=notifications