• Stars
    star
    154
  • Rank 242,095 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 13 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Webkit Notification API wrapper

Webkit Notification API jQuery Wrapper

  • It requests permission when it required (do not distrubs user on the start) you just call $.notification and this plugin will do the rest for you.
  • It abstracts 2 type of notifications (createHTMLNotification, createNotification) in one simple interface.
  • It allows you to specify auto-hide notification inteval (timeout parameter).
  • It closes notification on click by default (autoclose parameter). Default browser action: user must click small close button on the top right corner to do that.
  • You also can specify replaceId parameter to replace existed notification with new one (prevents from notifications flooding when showing chat messages in notifications, for eaxmple).
  • You can pass onclick, onclose, onshow, onerror to watch Notification's events.

This plug-in now works in Yandex.Mail WebChat (in production) and it does not have a strong dependence on jQuery.

CDN

Usage

// icon + text + title

var options = {
    iconUrl: 'avatar.png',
    title: 'Title',
    body: 'Message',
    onclick: function () {
        console.log('Pewpew');
    }
};

$.notification(options);
// notification will be displayed as soon as user permit notifications
// just text
$.notification("Message");
// notification will be displayed as soon as user permit notifications
// $.notification returns Deferred

$.notification("Hello from jQuery.notifications!")
.then(function (notification) {
    setTimeout(function () {
        notification.close();
    }, 2000);
}, function () {
    console.error('Rejected!');
});

Live example

Note

Before the notification will occur the user must click on the page and allow the notifications. But you can ask user beforehand:

$.notification.requestPermission(function () {
    console.log($.notification.permissionLevel());
});

Read

http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification

http://www.html5rocks.com/en/tutorials/notifications/quick/

Licence

(The MIT License)

Copyright (c) 2011 Mikhail Davydov <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

autopolyfiller

Autopolyfiller — Precise polyfills. This is like Autoprefixer, but for JavaScript polyfills.
JavaScript
552
star
2

lmd

LMD - JavaScript Module-Assembler for building better web applications ⚠️ Project is no longer supported ⚠️
JavaScript
449
star
3

relocating-to-berlin

Q&A about relocating to Berlin, Germany
271
star
4

node-mc

nmc – Midnight Commander written in React/Node stack.
JavaScript
140
star
5

b_

BEM class name formatter
JavaScript
103
star
6

gulp-autopolyfiller

Gulp plugin for autopolyfiller
JavaScript
53
star
7

html-tui

HTML to TUI (Text user interface) renderer. It is like TurboVision but in pure HTML, CSS and JavaScript
JavaScript
50
star
8

scalable-js-app

Scaleable JavaScript Application Architecture Example
JavaScript
49
star
9

rivets-backbone-adapter

Backbone.js adapter for Rivets.js data-bind with nested models and collections support
HTML
49
star
10

javascript-ecdc

JavaScript Elastic Cloud for Distributed Computing - framework for creating browser-based distributed computing applications based on Node.js
JavaScript
39
star
11

node-request-as-curl

It serializes http.ClientRequest as curl(1) command string
JavaScript
39
star
12

1css

1CSS - CSS dialect made for fun
JavaScript
27
star
13

grunt-autopolyfiller

Grunt plugin for autopolyfiller
JavaScript
25
star
14

phonegap-tumblr-reader

Simepe Tumblr Reader applicaiotn for Android, iOS and BlackBerry based on PhoneGap
JavaScript
14
star
15

event-source-chat

Simple chat based on EventSource SSE
JavaScript
13
star
16

talk-back-to-text-ui

React Europe Back to Text UI talk
HTML
9
star
17

dart-http

dart http server
9
star
18

lodash-template

_.template without full lodash source
JavaScript
6
star
19

ninjs

Ninja JavaScript Builder - JavaScript project builder without any extra global variables
JavaScript
6
star
20

image-ambilight

Ambilight effect on image
JavaScript
6
star
21

gitmodules-bower

.gitmodules to bower.json translator
JavaScript
5
star
22

grunt-lmd

It builds LMD
JavaScript
5
star
23

visual-dof-calc

Visual Depth of Field Calculator
JavaScript
4
star
24

shower-remote

Shower Remote - "Keynote Remote" for Shower presentation template
JavaScript
3
star
25

talk-better-js

Even Better JavaScript (ru)
CSS
2
star
26

talk-promises

Доклад Promise - это не больно!
JavaScript
2
star
27

talk-solid

SOLID - Курс по паттернам
JavaScript
2
star
28

node-jet

Jet - tiny, fast jQuery-style Node.js framwork
JavaScript
2
star
29

promise-attempt

Attempt tries to resolve promises
JavaScript
2
star
30

autopolyfiller-stable

Stable polyfills for Autopolyfiller
JavaScript
2
star
31

console-blame

It highlights and helps to find forgotten console.log calls in runtime
JavaScript
2
star
32

lmd-gui

GUI for LMD
JavaScript
1
star
33

pinterest-auto-layout-pdf-image-downloader

Pinterest board image downloader and auto-layout pdf generator
JavaScript
1
star
34

speed-dial

A minimalistic chrome extension implementing old good Opera's Speed Dial. Clean. Personalized. Performant. Flicker free.
HTML
1
star
35

talk-components-now

Components Now!
JavaScript
1
star
36

talk-404fest

Backbone в Яндексе
CSS
1
star
37

dart-star

jQuery-like Dart Library
1
star
38

azproduction.github.com

HTML
1
star
39

loader-test

loader-test
JavaScript
1
star
40

bravequest

Simple HTML-based RPG. Non Canvas. Only DOM, only hardcore!
JavaScript
1
star
41

node-reader-starred-grabber

Google Reader starred grabber for Node.js
JavaScript
1
star
42

jquery-mobile-markdown

Markdown for jQuery Mobile
1
star