browser-notification
Version:
Small library built around browsers native Notification-API adding useful default behaviour.
78 lines (61 loc) • 2.93 kB
Markdown
//developer.mozilla.org/en-US/docs/Web/API/Notification) with some useful default behavior.
[ ](http://jsbin.com/riboqubela/edit?js,output)
**browser-notification does just a few things**
- Look for [browser support](http://caniuse.com/#feat=notifications) and ask for user permission when initialized.
- Clicking a notification will focus the browser tab that fired the notification.
- `ignoreFocused` - If browser tab is already focused `notify()` -call will be ignored. **optional, default: true**
- For API ergonomics it's always possible to fire `notify()` since in case Notifications are not available it's just a no-op (does nothing).
- `cooldown` - milliseconds before consecutive notification can be fired. **optional, default: 0**
- `timeout` - milliseconds to wait before auto-closing notifications. **optional, default: 0 (disabled)**
```
yarn add browser-notificaiton
```
or
```
npm install browser-notification --save
```
The library has no dependencies and size is less than 1kB (minified + gzipped).
A UMD build is available in `/dist` of the npm package.
```
import {initNotifications, notify} from 'browser-notification';
// Check browser support, ask permission, initialize
initNotifications();
...
// Notify
notify('This is the title.', {body: '...and this is the body'});
```
**Note** - The underlying Notifications API for permission is async so if you want to initialize at the same time as firing `notify()`, you must first resolve the promise returned from `initNotifications()` to ensure initialization is complete, see API and example below.
`initNotifications({options})`
Create and setup the notifier object, asking for permission, returns a promise resolving a boolean indicating wheather notifications are available or not.
Default options:
```
{
ignoreFocused: true, // ignore notify() -calls when browser tab is already focused.
timeout: 0, // Set a time (ms) > 0 to activate
cooldown: 0, // Set a time (ms) > 0 to activate
}
```
`notify(title, {options})`
Takes the same arguments at the native [Notification API call](https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification)
returns the Notification object or null if notification was not sent.
_The Notification object can be used to attach event handlers onclick/onclose/onerror/onshow_
Example of initializing and calling `notify` asyncronously. Also using timeout/cooldown feature
```
import {initNotifications, notify} from 'browser-notification';
initNotifications({
timeout: 3000, // Auto-close notifications after 3 sec
cooldown: 3000, // Ignore new notify calls for 3 sec
}).then(function(isAvailable) {
notify('Ping!');
if (isAvailable) {
console.log('notification was sent');
}
else {
console.log('notification was not sent');
}
});
```
Tiny library built around browsers native [Notification-API](https: