Screamer.js is a Vanilla Javascript plugin to provide simple yet fully customisable web notifications using Web Notifications API.
If you want to see how it works, take a look at the DEMO.
- Download the zip
- Paste the screamer.js at your
js
assets folder. - If you want to use same images, get them on [https://github.com/willianjusten/screamer-js/tree/master/example] and paste to your
img
assets folder.
var Screamer = require('screamer');
var notification = new Screamer(options);
define([ 'Screamer' ], function( Screamer ) {
var notification = new Screamer(options);
});
To create the Notification you have to create a new instance of Screamer
, set some options that you wish and use the notify
method to start the notification. Take a look at this snippet:
// create an instance of Screamer with some options
var scream = new Screamer({
'title': 'Success!',
'body': 'Lorem ipsum dolor sit amet.',
'icon': 'icon_success.png',
'fade': 1000
});
// adding an eventListener to call the Notification
var button = document.querySelector('#fade');
button.addEventListener('click', function(){
scream.notify();
});
You can attach this to different events, like onload
, ready
or anything else that allows to call the notify
method.
title
(string) - notification title. (REQUIRED)body
(string) - notification message.icon
(string) - path to the notification icon.tag
(string) - unique identifier to stop duplicate notifications.lang
(string) - language of the notification. (default: en).timeout
(integer) - time in miliseconds to fade the notification.before
(function) - A callback function called before show the notification.after
(function) - A callback function called after show the notification.
Screamer.verifySupport()
- Function to test for Web Notifications API browser support.Screamer.checkPermission()
- Verify if permission exists, if not, request a permission and verify if granted.
First of all, install the NodeJS and deppendencies.
npm install
Later, you can run all tests running:
npm test
This should be open a Firefox instance and do a single run of tests.
Because the Web Notification require some permissions, you have to run this on a single server. An easy way to run this is:
python -m SimpleHTTPServer
Pay attention if your port is not in use.
This library relies on Web Notifications API. And this API is supported in the following browsers.
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
31+ ✔ | 38+ ✔ | 32+ ✔ | 8+ ✔ | Nope ✘ |
This project would be nothing without this guys:
- Paulo Oliveira - he create all the stuff with me.
- Natália Medina - our designer and a lovely girl. (Coelhinha da Duracell!!)
- Rodrigo Machado - he gave me the idea.
- All contributors
This plugin is free and open source software, distributed under the The MIT License. So feel free to use this to create notifications for your site without linking back to me or using a disclaimer.
If you’d like to give me credit somewhere on your blog or tweet a shout out to @willian_justen, that would be pretty sweet.