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>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>5 {{ property_prefix("webkit") }} (see notes)<br>
    22</td>
   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
    22</td>
   <td>{{ CompatNo() }}</td>
   <td>25</td>
   <td>6 (see notes)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
    22</td>
   <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br>
    1.2</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Gecko_备忘">Gecko 备忘</h3>

<ul>
 <li>在 Firefox 22 (Firefox OS &lt;1.2) 之前，创建一个新的通知必须使用 {{ domxref("window.navigator.mozNotification","navigator.mozNotification") }} 对象的 <code>createNotification</code> 方法。</li>
 <li>在 Firefox 22 (Firefox OS &lt;1.2) 之前，当调用 <code>show</code> 方法时通知才会被显示出来，并且只支持 <code>click</code> 和 <code>close</code> 事件。</li>
 <li>Nick Desaulniers 编写了一个 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> 以向前和向后兼容各种版本的实现。</li>
 <li>在 Firefox OS 有个特别的问题， <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">你可以传递一个图标路径</a> 用于通知，但是如果应用被打包了你就不能使用相对路径，比如： <code>/my_icon.png</code>。同样的，你也不能这样用： <code>window.location.origin + "/my_icon.png"</code>，<code>因为 window.location.origin</code> 的值在打包的应用里为 null。 <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">清单来源字段</a> 可以修复这个问题，但是这个方法只在 Firefox OS 1.1+ 版本中有效。不过有个潜在的解决方案可以用于 Firefox OS &lt;1.1 版本，就是 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">传递图标的位于外部服务器的绝对 URL</a> 。这个方案并不理想，如通知要立即显示而没有图标，那么将会请求服务器，但是可以用于所有版本的 Firefox OS。</li>
</ul>

<h3 id="Chrome_备忘">Chrome 备忘</h3>

<ul>
 <li>在 Chrome 22 版本之前，如果要使用通知需要 <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">旧的带前缀版本的规范</a> ，并且使用{{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} 对象创建一个新的通知实例。</li>
 <li>在 Chrome 32 版本之前，不支持 {{domxref("Notification.permission")}} 属性。</li>
</ul>

<h3 id="Safari_备忘">Safari 备忘</h3>

<ul>
 <li>Safari 在 Safari 6 版本开始支持通知，但是只能在 Mac OSX 10.8+ (Mountain Lion) 中使用。</li>
</ul>

<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>