What Web Can Do Today?

Notifications, available through the Notifications API, allow authorized Web applications to draw users attention in a bold but standardized fashion. Notifications are generated by the Web application running in a browsers' tab to be presented to the user outside of the browser tab area.

Specification-wise, there are two distinct kinds of notifications in the Web - persistent and non-persistent. Persistent notifications are deliverable and possible to interact with also when the Web application that generated it is no longer active (i.e. the tab was closed) while non-persistent notifications require the tab to be active. Implementation-wise, persistent notifications require active Service Worker registration (but it should not be confused with Push Messages that also go through the Service Worker, but are triggered from the outside of the application).

API glimpse

Live Demo

• JavaScript

  var $status = document.getElementById('status');
  
  if ('Notification' in window) {
    $status.innerText = Notification.permission;
  }
  
  function requestPermission() {
    if (!('Notification' in window)) {
      alert('Notification API not supported!');
      return;
    }
    
    Notification.requestPermission(function (result) {
      $status.innerText = result;
    });
  }
  
  function nonPersistentNotification() {
    if (!('Notification' in window)) {
      alert('Notification API not supported!');
      return;
    }
    
    try {
      var notification = new Notification("Hi there - non-persistent!");
    } catch (err) {
      alert('Notification API error: ' + err);
    }
  }
  
  function persistentNotification() {
    if (!('Notification' in window) || !('ServiceWorkerRegistration' in window)) {
      alert('Persistent Notification API not supported!');
      return;
    }
    
    try {
      navigator.serviceWorker.getRegistration()
        .then((reg) => reg.showNotification("Hi there - persistent!"))
        .catch((err) => alert('Service Worker registration error: ' + err));
    } catch (err) {
      alert('Notification API error: ' + err);
    }
  }

• HTML

  <p>Current permission status is <b id="status">unavailable</b>.</p>
  
  <p><button onclick="requestPermission()">Request permission</button></p>
  <p><button onclick="nonPersistentNotification()">Non-persistent notification</button></p>
  <p><button onclick="persistentNotification()">Persistent notification</button></p>

Browser support

Resources

• Specification
• MDN: Notifications API
• SitePoint: An Introduction to the Web Notifications API
• PSA: Android is *only* shipping Service Worker-based Notifications
• IE Web Notifications plugin