Customizable System Level Web Notification with Vanilla JavaScript – Screamer.JS

Preview:

Description:

Screamer.JS is a lightweight Vanilla JavaScript library which brings your web notifications to the system level using Web Notifications API.

Basic usage:

Include the screamer.js JavaScript file anywhere on your web page.

<script src="screamer.js"></script>

Create a button to toggle the web notification.

<button id="demo" title="Press me">Click me</button>

Create an new instance of Screamer.

var options = {
    // options here
};
var scream = new Screamer(options);

Bind the click event to the trigger button and display the web notification using scream.notify() methods.

var button = document.querySelector('#demo');
button.addEventListener('click', function(){
  scream.notify();
});

All configuration options.

'title': 'Notification title',
'body': 'Notification message',
'icon': 'icon_success.png', // notification icon
'fade': 1000, // fade animation speed
'timeout': 2000, // timeout in ms

More methods.

// test for Web Notifications API browser support.
Screamer.verifySupport();
// Verify if permission exists, if not, request a permission and verify if granted.
Screamer.checkPermission();

Callback functions available.

var scream = new Screamer({
    before: function(){},
    after: function(){}
});

Changelog:

08/03/2018

• Add before and after callbacks