Local Notifications

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

Notification.requestPermission([callback])
Asks a user for the permission to show Notifications. Returns a Promise with the prompt result. As a legacy, it also calls callback function, if provided.
Notification.permission
Returns current permission state - default (user not yet decided), granted or denied.
new Notification(title, [options])
Displays local non-persistent notification outside of the browser tab area.
navigator.serviceWorker.getRegistration()
  .then(reg => reg.showNotification(title, [options])
Displays local persistent notification outside of the browser tab area.

Live Demo

Current permission status is unavailable.

  • 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);
      }
    }
  • <p>Current permission status is <b id="status">unavailable</b>.</p>
    
    <p><button class="btn btn-default" onclick="requestPermission()">Request permission</button></p>
    <p><button class="btn btn-default" onclick="nonPersistentNotification()">Non-persistent notification</button></p>
    <p><button class="btn btn-default" onclick="persistentNotification()">Persistent notification</button></p>

Resources