blob: 8a46465d0f0fd8f8bcff5a48793e08e281dbf03b (
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
81
82
83
84
85
86
87
88
|
---
title: Notifications API
slug: Web/API/Notifications_API
tags:
- Notifications API
translation_of: Web/API/Notifications_API
---
<p>{{DefaultAPISidebar("Web Notifications")}}</p>
<p class="summary"><strong>Notifications API</strong> 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。</p>
<h2 id="概念和用法">概念和用法</h2>
<p>在支持该接口的平台上，显示一个系统通知通常涉及两件事。首先，用户需要授予当前源的权限以显示系统通知，这通常在应用或站点初始化时, 使用{{domxref("Notification.requestPermission()")}} 方法来完成。</p>
<p>这将产生一个请求对话框，沿着以下几行：</p>
<p><br>
<img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p>
<p>从这里，用户可以选择允许来自此来源的通知，阻止来自此来源的通知，或不选择此点。一旦做出选择，该设置通常将持续用于当前会话。</p>
<div class="note">
<p><span style="font-size: 14px;"><strong>注</strong></span>：从Firefox 44开始， 通知（Notifications） 和推送（<a href="/en-US/docs/Web/API/Push_API">Push</a>）的权限已合并。如果为通知授予权限，推送也将启用。</p>
</div>
<p>接下来，使用 {{domxref("Notification.Notification","Notification()")}} 构造函数创建一个新通知。这个方法可以传入两个参数。这必须传递一个标题参数，并可以选择性地传递一个选项对象来指定选项，如文本方向，正文，显示图标，通知声音播放, 等等。</p>
<p>{{AvailableInWorkers}}</p>
<p>此外， <strong>Notifications API</strong> 规范对 <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>指定了多个添加，以允许 service workers发送通知。</p>
<div class="note">
<p><strong>注</strong>：想了解怎么在你的应用里使用通知接口，请阅读 <a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a>。</p>
</div>
<h2 id="接口（Notifications_interfaces）">接口（Notifications interfaces）</h2>
<dl>
<dt>{{domxref("Notification")}}</dt>
<dd>定义的通知对象</dd>
</dl>
<h3 id="附加参数（Service_worker_additions）">附加参数（Service worker additions）</h3>
<dl>
<dt>{{domxref("ServiceWorkerRegistration")}}</dt>
<dd>该对象包含 {{domxref("ServiceWorkerRegistration.showNotification()")}} 和 {{domxref("ServiceWorkerRegistration.getNotifications()")}} 方法，用于控制通知的显示。</dd>
<dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
<dd>该对象包含 {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} 事件处理函数，用于通知被点击的时候触发绑定的事件处理函数。</dd>
<dt>{{domxref("NotificationEvent")}}</dt>
<dd>该对象是功能明确的事件对象，表示一个通知事件被触发了，继承自{{domxref("ExtendableEvent")}}。</dd>
</dl>
<h2 id="官方文档">官方文档</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="浏览器兼容性">浏览器兼容性</h2>
{{Compat("api.Notification")}}
<h2 id="Firefox_OS_permissions">Firefox OS permissions</h2>
<p>当你在 Firefox OS app中使用通知时，请确保在manifest文件中添加了<code>desktop-notification</code> 权限 。 Notifications can be used at any permission level, hosted or above:</p>
<pre class="brush: json">"permissions": {
"desktop-notification": {}
}</pre>
<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>
|
