JavaScript TutorialDatatypes in JavaScriptEvaluating JavaScriptFunctional JavaScriptJavaScript .postMessage() and MessageEventJavaScript AJAXJavaScript Anti-patternsJavaScript Arithmetic (Math)JavaScript ArraysJavaScript Arrow FunctionsJavaScript Async functions (async/await)JavaScript Async IteratorsJavaScript Automatic Semicolon Insertion - ASIJavaScript Battery Status APIJavaScript Behavioral Design PatternsJavaScript Binary DataJavaScript Bitwise operatorsJavaScript Bitwise Operators - Real World Examples (snippets)JavaScript BOM (Browser Object Model)JavaScript Built-in ConstantsJavaScript CallbacksJavaScript ClassesJavaScript CommentsJavaScript Comparison OperationsJavaScript ConditionsJavaScript ConsoleJavaScript Constructor functionsJavaScript Context (this)JavaScript CookiesJavaScript Creational Design PatternsJavaScript Custom ElementsJavaScript Data attributesJavaScript Data ManipulationJavaScript DateJavaScript Date ComparisonJavaScript DebuggingJavaScript Declarations and AssignmentsJavaScript Destructuring assignmentJavaScript Detecting browserJavaScript EnumerationsJavaScript Error HandlingJavaScript Escape SequencesJavaScript EventsJavaScript execCommand and contenteditableJavaScript FetchJavaScript File API, Blobs and FileReadersJavaScript Fluent APIJavaScript FunctionsJavaScript GeneratorsJavaScript GeolocationJavaScript Global error handling in browsersJavaScript HistoryJavaScript How to make iterator usable inside async callback functionJavaScript IndexedDBJavaScript InheritanceJavaScript Intervals and TimeoutsJavaScript JSONJavaScript Linters - Ensuring code qualityJavaScript LocalizationJavaScript LoopsJavaScript MapJavaScript Memory efficiencyJavaScript Method ChainingJavaScript Modals - PromptsJavaScript Modularization TechniquesJavaScript ModulesJavaScript NamespacingJavaScript Navigator ObjectJavaScript Notifications APIJavaScript ObjectsJavaScript Performance TipsJavaScript PromisesJavaScript Prototypes, objectsJavaScript ProxyJavaScript Regular expressionsJavaScript requestAnimationFrameJavaScript Reserved KeywordsJavaScript Same Origin Policy & Cross-Origin CommunicationJavaScript ScopeJavaScript ScreenJavaScript Security issuesJavaScript Selection APIJavaScript Server-sent eventsJavaScript SetJavaScript Setters and GettersJavaScript Strict modeJavaScript StringsJavaScript SymbolsJavaScript Tail Call OptimizationJavaScript Template Literals

JavaScript Notifications API

From WikiOD

Syntax[edit | edit source]

  • Notification.requestPermission(callback)
  • Notification.requestPermission().then(callback, rejectFunc)
  • new Notification(title, options)
  • notification.close()

Remarks[edit | edit source]

The Notifications API was designed to allow browser access to notifying the client.

Support by browsers might be limited. Also support by the operating system may be limited.

The following table gives an overview of the earliest browser versions that provide support for notifications.

Chrome Edge Firefox Internet Explorer Opera Opera Mini Safari
29 14 46 no support 38 no support 9.1

Requesting Permission to send notifications[edit | edit source]

We use Notification.requestPermission to ask the user if he/she wants to receive notifications from our website.

Notification.requestPermission(function() {
    if (Notification.permission === 'granted') {
        // user approved.
        // use of new Notification(...) syntax will now be successful
    } else if (Notification.permission === 'denied') {
        // user denied.
    } else { // Notification.permission === 'default'
        // user didn’t make a decision.
        // You can’t send notifications until they grant permission.

Since Firefox 47 The .requestPermission method can also return a promise when handling the user's decision for granting permission

Notification.requestPermission().then(function(permission) {
    if (!('permission' in Notification)) {
        Notification.permission = permission;
    // you got permission !
    }, function(rejection) {
    // handle rejection here.

Sending Notifications[edit | edit source]

After the user has approved a request for permission to send notifications, we can send a simple notification that says Hello to the user:

new Notification('Hello', { body: 'Hello, world!', icon: 'url to an .ico image' });

This will send a notification like this:

=== Hello ===

Hello, world!

Closing a notification[edit | edit source]

You can close a notification by using the .close() method.

let notification = new Notification(title, options);
// do some work, then close the notification

You can utilize the setTimeout function to auto-close the notification sometime in the future.

let notification = new Notification(title, options);
setTimeout(() => {
}, 4000);

The above code will spawn a notification and close it after 4 seconds.

Notification events[edit | edit source]

The Notification API specifications support 2 events that can be fired by a Notification.

  1. The click event.

This event will run when you click on the notification body (excluding the closing X and the Notifications configuration button).


notification.onclick = function(event) {
    console.debug("you click me and this is my event object: ", event);
  • The error event

The notification will fire this event whenever something wrong will happen, like being unable to display

notification.onerror = function(event) {
    console.debug("There was an error: ", event);