Chrome desktop notification example [closed]

by

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 load
document.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>

We’re using the W3C Notifications API. Do not confuse this with the Chrome extensions notifications API, which is different. Chrome extension notifications obviously only work in Chrome extensions, and don’t require any special permission from the user.

W3C notifications work in many browsers (see support on caniuse), and require user permission. As a best practice, don’t ask for this permission right off the bat. Explain to the user first why they would want notifications and see other push notifications patterns.

Note that Chrome doesn’t honor the notification icon on Linux, due to this bug.

Final words

Notification support has been in continuous flux, with various APIs being deprecated over the last years. If you’re curious, check the previous edits of this answer to see what used to work in Chrome, and to learn the story of rich HTML notifications.

Now the latest standard is at https://notifications.spec.whatwg.org/.

As to why there are two different calls to the same effect, depending on whether you’re in a service worker or not – see this ticket I filed while I worked at Google.

See also notify.js for a helper library.

More Related Contents:

  1. HTML5 Notification not working in Mobile Chrome
  2. How to wait until an element exists?
  3. Origin is not allowed by Access-Control-Allow-Origin
  4. How to read from Chrome’s console in JavaScript
  5. Failed to execute ‘btoa’ on ‘Window’: The string to be encoded contains characters outside of the Latin1 range.
  6. Executing code at page-level from Background.js and returning the value
  7. Date parsing in javascript is different between safari and chrome
  8. Wrong value in console.log [duplicate]
  9. How to make Google Chrome JavaScript console persistent?
  10. How to set breakpoints in inline Javascript in Google Chrome?
  11. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  12. Is innerHTML asynchronous?
  13. How to clear cache of service worker?
  14. Setting onbeforeunload on body element in Chrome and IE using jQuery
  15. Checkbox Check Event Listener
  16. How can I retain the scroll position of a scrollable area when pressing back button?
  17. Problems downloading big file(max 15 mb) on google chrome
  18. javascript large integer round because precision? (why?)
  19. Completely lost on how to save extension popup window content
  20. How to disable Chrome’s saved password prompt setting through JavaScript
  21. Chrome – Fetch API cannot load file. How to workaround?
  22. How to disable a “Reload site? Changes you made may not be saved” popup for (python) selenium tests in chrome?
  23. How do I send an HTTP request from a Chrome extension?
  24. Sending message to background script
  25. Resource interpreted as Script but transferred with MIME type text/plain – for local file
  26. Chrome Speech Synthesis with longer texts
  27. Javascript window.print() in chrome, closing new window or tab instead of cancelling print leaves javascript blocked in parent window
  28. How do I listen for triple clicks in JavaScript?
  29. How to develop Chrome extension for Gmail?
  30. How to open mailto links in new tab for users that have gmail as the default mail handler?

Leave a Comment