path: root/files/zh-cn/web/api/notification/index.html

---
title: notification
slug: Web/API/notification
tags:
  - API
  - 参考
  - 通知
translation_of: Web/API/Notification
---
<div>{{APIRef("Web Notifications")}}</div>

<div>{{AvailableInWorkers}}</div>

<div>{{securecontext_header}}</div>



<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a> 的<strong>通知</strong>接口用于向用户配置和显示桌面通知。</p>

<h2 id="Method_overview" name="Method_overview">构造方法</h2>

<pre class="notranslate">let notification = new Notification(title, options)
</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><code>title</code></dt>
 <dd>一定会被显示的通知标题</dd>
 <dt><code>options</code> {{optional_inline}}</dt>
 <dd>一个被允许用来设置通知的对象。它包含以下属性：
 <ul>
  <li><code>dir</code> : 文字的方向；它的值可以是 <code>auto（自动）</code>, <code>ltr（从左到右）</code>, or <code>rtl</code>（从右到左）</li>
  <li><code>lang</code>: 指定通知中所使用的语言。这个字符串必须在 <a href="http://tools.ietf.org/html/bcp47">BCP 47 language tag</a> 文档中是有效的。</li>
  <li><code>body</code>: 通知中额外显示的字符串</li>
  <li><code>tag</code>: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。</li>
  <li><code>icon</code>: 一个图片的URL，将被用于显示通知的图标。</li>
 </ul>
 </dd>
</dl>

<h2 id="属性">属性</h2>

<h3 id="静态属性">静态属性</h3>

<p>这些属性仅在 <code>Notification</code> 对象上有效。</p>

<dl>
 <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
 <dd>一个用于表明当前通知显示授权状态的字符串。可能的值包括：<code>denied</code> (用户拒绝了通知的显示), <code>granted</code> (用户允许了通知的显示), 或 <code>default</code> (因为不知道用户的选择，所以浏览器的行为与 denied 时相同).</dd>
</dl>

<h3 id="实例属性">实例属性</h3>

<p>这些属性仅在 <code>Notification</code> 的实例中有效。</p>

<dl>
 <dt>{{domxref("Notification.title")}} {{readonlyinline}} (moz only)</dt>
 <dd>在构造方法中指定的 title 参数。</dd>
 <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
 <dd>通知的文本显示方向。在构造方法的 options 中指定。</dd>
 <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
 <dd>通知的语言。在构造方法的 options 中指定。</dd>
 <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
 <dd>通知的文本内容。在构造方法的 options 中指定。</dd>
 <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
 <dd>通知的 ID。在构造方法的 options 中指定。</dd>
 <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
 <dd>通知的图标图片的 URL 地址。在构造方法的 options 中指定。</dd>
</dl>

<h4 id="事件处理">事件处理</h4>

<dl>
 <dt>{{domxref("Notification.onclick")}}</dt>
 <dd>处理 {{event("click")}} 事件的处理。每当用户点击通知时被触发。</dd>
 <dt>{{domxref("Notification.onshow")}}</dt>
 <dd>处理 {{event("show")}} 事件的处理。当通知显示的时候被触发。</dd>
 <dt>{{domxref("Notification.onerror")}}</dt>
 <dd>处理 {{event("error")}} 事件的处理。每当通知遇到错误时被触发。</dd>
 <dt>{{domxref("Notification.onclose")}}</dt>
 <dd>处理 {{event("close")}} 事件的处理。当用户关闭通知时被触发。</dd>
</dl>

<h2 id="方法">方法</h2>

<h3 id="静态方法">静态方法</h3>

<p>这些方法仅在 <code>Notification</code> 对象中有效。</p>

<dl>
 <dt>{{domxref("Notification.requestPermission()")}}</dt>
 <dd>用于当前页面向用户申请显示通知的权限。这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。</dd>
</dl>

<h3 id="实例方法">实例方法</h3>

<p>这些方法仅在 <code>Notification</code> 实例或其 <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a> 中有效。</p>

<dl>
 <dt>{{domxref("Notification.close()")}}</dt>
 <dd>用于关闭通知。</dd>
</dl>

<p><code>Notification</code> 对象继承自 {{domxref("EventTarget")}} 接口。</p>

<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>

<h2 id="Example">Example</h2>

<p>假定有如下 HTML：</p>

<pre class="brush: html notranslate">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>

<p>接下来发送一条通知：</p>

<pre class="brush: js notranslate">function notifyMe() {
  // 先检查浏览器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 检查用户是否同意接受通知
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // 如果用户接受权限，我们就可以发起一条消息
      if (permission === "granted") {
         var notification = new Notification("Hi there!");
      }
    });
  }


  // 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
  // 出于尊重，我们不应该再打扰他们了
}</pre>

<h3 id="See_the_live_result">See the live result</h3>

<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Web Notifications')}}</td>
   <td>{{Spec2('Web Notifications')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="Permissions" name="Permissions">权限</h2>

<p>当你要在开放 web 应用中使用通知时，请确保将 <code>desktop-notification</code> 权限添加到你的 manifest 文件中。通知可以被用于任何权限级别，hosted 或更高。</p>

<pre class="default prettyprint prettyprinted notranslate"><code><span class="str">"permissions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"desktop-notification"</span><span class="pun">:{}</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

{{Compat("api.Notification")}}

<h2 id="请参见">请参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/notification/Using_Web_Notifications" title="/zh-CN/docs/Web/API/notification/Using_Web_Notifications">使用 Web Notifications</a></li>
 <li><a class="external" href="https://github.com/soapdog/firefoxos-sample-app-image-uploader" title="Firefox OS Image Uploader Sample App">Firefox OS 图片上传器示例 App</a></li>
 <li>
  <p><a href="https://codepen.io/xgqfrms/pen/vxaQKe">https://codepen.io/xgqfrms/pen/vxaQKe</a></p>

  <p><br>
    </p>
 </li>
</ul>