├── .gitignore ├── images ├── fb.png ├── chrome.png ├── email.png ├── calendar.png └── screenshot.png ├── README.md ├── js └── notification.js ├── index.html └── css └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /images/fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girliemac/html5-notifications-webOS-style/HEAD/images/fb.png -------------------------------------------------------------------------------- /images/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girliemac/html5-notifications-webOS-style/HEAD/images/chrome.png -------------------------------------------------------------------------------- /images/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girliemac/html5-notifications-webOS-style/HEAD/images/email.png -------------------------------------------------------------------------------- /images/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girliemac/html5-notifications-webOS-style/HEAD/images/calendar.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girliemac/html5-notifications-webOS-style/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![screenshot](images/screenshot.png) 2 | 3 | # Web Notifications Demo v2 4 | 5 | W3C Web Notifications API demo in webOS UI style. 6 | 7 | In the original demo, I implemented the notifications with webOS style, which allowed a user to swipe to close the window. However, this v2 demo no longer supports the swipable notifications because the simplified new Web Notifications spcification only allows text and icon, and external HTML files are no longer permitted. 8 | 9 | ## Supported Browsers 10 | 11 | - Firefox 22+ (both desktop and mobile) 12 | - Chrome 32+ (Desktop only) 13 | 14 | ## Demo 15 | 16 | [girliemac.github.com/html5-notifications-webOS-style](http://girliemac.github.com/html5-notifications-webOS-style) 17 | 18 | ## History 19 | 20 | - v.2 (March 2014) - using the [new Web Notification API specs](http://www.w3.org/TR/notifications) 21 | - v.1 (March 2012) - using the old Web Notification API specs, which is now deprecated. 22 | 23 | For detailed changelog, check [Releases](https://github.com/girliemac/html5-notifications-webOS-style/releases). 24 | 25 | ## Known Problems 26 | 27 | - Chrome for Android does not support the feature 28 | - Firefox on Android does support, however, only one line (the last line) is displayed on the native notification bar on top. No extra UI or window from browser. 29 | - On Chrome (tested on 33), `close()` method does not seem to work. Notification windows fails to close automatically. 30 | 31 | 32 | 33 | ### Firefox on Android 34 | 35 | Notifications appear in the native notification bar, one at a time, instead of popup windows from browser. 36 | 37 | The problem is that if a notificatin contains more than one lines one messages (when both `title` and `body` are set), only the last line (`body`) is displayed, instead of the main title. (When the notification bar is expanded by a user, both subject and body text are visible). 38 | 39 | Also, custom icons aren't shown either. The icon on the notification is always Firefox icon. 40 | 41 | 42 | ![screenshot](https://lh5.googleusercontent.com/-E0MaU8tqIao/UxzbY_OMXeI/AAAAAAAAKJk/zZL1OVpdvPQ/w408-h725-no/14+-+1) 43 | -------------------------------------------------------------------------------- /js/notification.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var permToggle = document.getElementById('permission'), 4 | emailToggle = document.getElementById('email'), 5 | calendarToggle = document.getElementById('calendar'), 6 | fbToggle = document.getElementById('fb'); 7 | 8 | var showNotificationsButton = document.getElementById('showNotifications'); 9 | 10 | var allowNotifications = false; 11 | 12 | //var query = $('input').val(); 13 | 14 | // Notification feature detection 15 | if (typeof Notification === 'function') { 16 | checkPermission(); 17 | } else { 18 | disableAllToggles(); 19 | alert('Your browser does not support Web Notifications API.'); 20 | return; 21 | } 22 | 23 | permToggle.addEventListener('change', function(e) { 24 | checkPermission(); 25 | }); 26 | 27 | 28 | showNotificationsButton.addEventListener('click', function(e) { 29 | showNotifications(); 30 | }); 31 | 32 | function disableAllToggles(){ 33 | permToggle.checked = false; 34 | emailToggle.checked = false; 35 | calendarToggle.checked = false; 36 | fbToggle.checked = false; 37 | 38 | permToggle.setAttribute('disabled', 'disabled'); 39 | emailToggle.setAttribute('disabled', 'disabled'); 40 | calendarToggle.setAttribute('disabled', 'disabled'); 41 | fbToggle.setAttribute('disabled', 'disabled'); 42 | showNotificationsButton.setAttribute('disabled', 'disabled'); 43 | } 44 | 45 | function checkPermission() { 46 | if(permToggle.checked === false) { 47 | showNotificationsButton.setAttribute('disabled', 'disabled'); 48 | return; 49 | } 50 | Notification.requestPermission(function (status) { 51 | if (Notification.permission !== status) { 52 | Notification.permission = status; 53 | } 54 | if (Notification.permission === 'granted') { 55 | showNotificationsButton.removeAttribute('disabled'); 56 | } else { 57 | disableAllToggles(); 58 | } 59 | }); 60 | } 61 | 62 | function showNotifications() { 63 | 64 | var ms = 15000; // close notification after 15 sec 65 | 66 | if(emailToggle.checked) { 67 | var en = new Notification('Confirm Your Payment of $500,000', { 68 | body: 'From: Nigerian Prince', 69 | icon: 'images/email.png' 70 | }); 71 | en.onshow = function() { setTimeout(en.close, ms) } 72 | } 73 | if(calendarToggle.checked) { 74 | var cn = new Notification('Shaolin Kung-Fu Class', { 75 | body: 'Sunday, March 23 5:30 PM', 76 | icon: 'images/calendar.png' 77 | }); 78 | cn.onshow = function() { setTimeout(cn.close, ms) } 79 | } 80 | if(fbToggle.checked) { 81 | var fn = new Notification('Chuck Norris poked you', { 82 | icon: 'images/fb.png' } 83 | ); 84 | fn.onshow = function() { setTimeout(fn.close, ms) } 85 | } 86 | } 87 | })(); 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

(webOS-esque) HTML5 Web Notifications

17 |
18 | 19 |
20 | 21 |
22 |

What is the Web Notifications API? -Read the spec by W3C.

23 | 24 |

UPDATED (March 2014): I needed to rewrite this demo using the new Web Notification API, since the spec has been modified since I initially wrote this demo 2 years ago. The new API only allows text and icon, and using HTML is now deprecated. So my demo no longer has the webOS style swipable notifications, as I created originally.

25 | 26 |

Supported browsers: Firefox 22+ and Chrome 32+ (close() fails)

27 | 28 |

Blog: girliemac.com

29 |
30 | 31 | 32 |
33 |

Browser Setting

34 |
35 |
Enable Notifications *
36 | 42 |
43 |
44 |
45 |
46 |
Email
47 | 53 |
54 | 55 |
56 |
Calendar
57 | 63 |
64 | 65 |
66 |
Facebook
67 | 73 |
74 |
75 | 76 | 77 | 78 | 79 |
80 | 81 |