blob: c9bd799f2590d9ddb907df6eb0e9e4def99044ca (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: Notification.requestPermission()
slug: Web/API/Notification/requestPermission
translation_of: Web/API/Notification/requestPermission
---
<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
<p>The <strong><code>requestPermission()</code></strong> method of the {{domxref("Notification")}} interface requests permission from the user for the current origin to display notifications.</p>
<div class="note">
<p><strong>Note:</strong> This feature is <strong>not</strong> available in {{domxref("SharedWorker")}}</p>
</div>
<h2 id="Syntax">Syntax</h2>
<p>The latest spec has updated this method to a promise-based syntax that works like this:</p>
<pre class="brush: js">Notification.requestPermission().then(function(permission) { ... });</pre>
<p>Previously, the syntax was based on a simple callback; this version is now deprecated:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js">Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<p><code class="language-js"><span class="punctuation token">Safari Version 12.0.3 still uses callback to get the permission.</span></code></p>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>callback</code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt>
<dd>An optional callback function that is called with the permission value. Deprecated in favor of the promise return value.</dd>
</dl>
<h3 id="Returns">Returns</h3>
<p>A {{jsxref("Promise")}} that resolves to a {{domxref("DOMString")}} with the permission picked by the user. Possible values for this string are <code>granted</code>, <code>denied</code>, or <code>default</code>.</p>
<h2 id="Example">Example</h2>
<p>The following snippet requests permission from the user, then logs a different result to the console depending on the user's choice.</p>
<pre class="brush: js">Notification.requestPermission().then(function(result) {
if (result === 'denied') {
console.log('Permission wasn\'t granted. Allow a retry.');
return;
}
if (result === 'default') {
console.log('The permission request was dismissed.');
return;
}
// Do something with the granted permission.
});</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Notifications')}}</td>
<td>{{Spec2('Web Notifications')}}</td>
<td>Living standard</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Notification.requestPermission")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
</ul>
|
