The Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
These notifications' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously provide information to the user.
Requests permission from the user to display notifications.
Instance methods
These properties are available only on an instance of the Notification object or through its prototype. The Notification object also inherits from the EventTarget interface.
It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.
functionnotifyMe(){// Let's check if the browser supports notificationsif(!("Notification"in window)){alert("This browser does not support desktop notification");}// Let's check whether notification permissions have already been grantedelseif(Notification.permission ==="granted"){// If it's okay let's create a notificationvar notification =newNotification("Hi there!");}// Otherwise, we need to ask the user for permissionelseif(Notification.permission !=="denied"){
Notification.requestPermission().then(function(permission){// If the user accepts, let's create a notificationif(permission ==="granted"){var notification =newNotification("Hi there!");}});}// At last, if the user has denied notifications, and you// want to be respectful there is no need to bother them anymore.}
We no longer show a live sample on this page, as Chrome and Firefox no longer allow notification permissions to be requested from cross-origin <iframe>s, with other browsers to follow. To see a example in action, check out our To-do list example (also see the app running live.)
Note: In the above example we spawn notifications in response to a user gesture (clicking a button). This is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture. Firefox is already doing this from version 72, for example.
["Starting in Chrome 49, notifications do not work in incognito mode.", "Before Chrome 42, service worker additions were not supported."]
22
4
24
No
1.5
Notification
20
14
22
4
No
23
7
No
25
22
4
24
No
1.5
actions
53
18
No
No
39
No
No
53
No
41
No
6.0
badge
53
18
No
No
39
No
No
53
No
41
No
6.0
body
33
14
26
No
23
11
No
33
26
24
No
2.0
click_event
20
14
22
No
23
7
No
25
22
24
No
1.5
close
20
14
22
No
23
7
No
25
22
24
No
1.5
close_event
20
14
22
No
23
7
No
25
22
24
No
1.5
data
44
16
34
No
31
No
No
44
34
32
No
4.0
dir
20
14
26
No
23
7
No
25
26
24
No
1.5
error_event
20
14
22
No
23
7
No
25
22
24
No
1.5
icon
33
14
26
No
23
11
No
33
26
24
No
2.0
image
53
18
No
No
40
No
No
53
No
41
No
6.0
lang
33
14
26
No
23
11
No
33
26
24
No
2.0
maxActions
48
18
No
No
35
No
No
48
No
35
No
5.0
permission
32
14
22
No
23
7
No
32
22
24
No
2.0
renotify
50
79
No
No
37
No
No
50
No
37
No
5.0
requestPermission
20
14
22
["From Firefox 70 onwards, cannot be called from a cross-origin IFrame.", "From Firefox 72 onwards, can only be called in response to a user gesture such as a
click event."]
No
23
15
7-15
Only supported the deprecated callback syntax.
No
25
22
24
No
1.5
requireInteraction
47
17
No
No
34
No
No
47
No
34
No
5.0
secure_context_required
62
79
67
No
49
No
No
62
67
46
No
8.0
show_event
20
14
22
No
23
7
No
25
22
24
No
1.5
silent
43
17
No
No
30
No
No
43
No
30
No
4.0
tag
20
14
26
No
23
7
No
25
26
24
No
1.5
timestamp
50
17
No
No
37
No
No
50
No
37
No
5.0
title
33
14
26
No
23
11
No
33
26
24
No
2.0
vibrate
53
79
No
No
40
No
No
53
Does not work on Android O or later regardless of Chrome version.
No
41
Does not work on Android O or later regardless of Chrome version.
No
6.0
Does not work on Android O or later regardless of Chrome version.