Chrome Desktop Notification Example

Chrome desktop notification example

In modern browsers, there are two types of notifications:

• Desktop notifications - simple to trigger, work as long as the page is open, and may disappear automatically after a few seconds
• Service Worker notifications - a bit more complicated, but they can work in the background (even after the page is closed), are persistent, and support action buttons

The API call takes the same parameters (except for actions - not available on desktop notifications), which are well-documented on MDN and for service workers, on Google's Web Fundamentals site.

---

Below is a working example of desktop notifications for Chrome, Firefox, Opera and Safari. Note that for security reasons, starting with Chrome 62, permission for the Notification API may no longer be requested from a cross-origin iframe, so we can't demo this using StackOverflow's code snippets. You'll need to save this example in an HTML file on your site/application, and make sure to use localhost:// or HTTPS.

// request permission on page loaddocument.addEventListener('DOMContentLoaded', function() { if (!Notification) {  alert('Desktop notifications not available in your browser. Try Chromium.');  return; }
 if (Notification.permission !== 'granted')  Notification.requestPermission();});

function notifyMe() { if (Notification.permission !== 'granted')  Notification.requestPermission(); else {  var notification = new Notification('Notification title', {   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',   body: 'Hey there! You\'ve been notified!',  });  notification.onclick = function() {   window.open('http://stackoverflow.com/a/13328397/1269037');  }; }}

 <button onclick="notifyMe()">Notify me!</button>

How to create notifications on the desktop web browser (chrome, firefox, ...)?

Notifications are added to browsers such as Chrome and Firefox using service workers. Check out Push messaging sample for chrome.

Also check out this article on web push Notifications

How to receive and handle Chrome notifications/push-notification?

If the question is about intercepting notifications that are generated on the web page with the Notification API, this answer explains how: Intercept HTML5 Web Notifications in a browser environment

To sum it up, it consists in the creation of a Proxy as a wrapper of the native Notification in order to hook into its constructor and execute arbitrary code.

If the question is about intercepting Push Notifications then it is impossible because they are based on the Service worker. You can't hook into the service worker, and you can't register your own service worker without overriding the existing one (which will break the web page), as stated in the documentation:

If there is an existing service worker available, the new version is
installed in the background, but not yet activated — at this point it
is called the worker in waiting. It is only activated when there are
no longer any pages loaded that are still using the old service
worker. As soon as there are no more pages to be loaded, the new
service worker activates (becoming the active worker).

Chrome Desktop notification to all users

You're looking at wrong documentation - or rather, only one part of it. There are separate problems of displaying the notification (which you solved) and delivering it to others (which you didn't, and alarmingly didn't understand that it's missing).

You have to code the show a local notification, but there's nothing to actually send out (push) the message or receive it. In short, there's still a lot of work to be done.

What you need is the Push API. It involves creating a Service Worker for your site (which will be the part able to listen to push messages) and having server-side code that talks to Google Cloud Messaging to generate a push. There's a good tutorial on how to use it.

Chrome desktop notification click to focus on content

notification = webkitNotifications.createNotification(...)
notification.onclick = function(){
    window.focus();
    this.cancel();
};
notification.show()

...works as expected, without any additional permissions.

---

Related Topics