diff options
Diffstat (limited to 'files/zh-cn/web/api/notification')
20 files changed, 2614 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/notification/actions/index.html b/files/zh-cn/web/api/notification/actions/index.html new file mode 100644 index 0000000000..0646fd416d --- /dev/null +++ b/files/zh-cn/web/api/notification/actions/index.html @@ -0,0 +1,132 @@ +--- +title: Notification.actions +slug: Web/API/notification/actions +tags: + - Notification actions + - Notifications + - Web API + - Web Notifications API +translation_of: Web/API/Notification/actions +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p><span class="seoSummary">{{domxref("Notification")}}接口的只读属性<strong><code>actions</code></strong>返回使用{{domxref("Notification.Notification","Notification()")}}构造函数创建通知时使用actions选项设置的{{domxref("NotificationAction")}}对象列表。这是用户可以在通知上下文中选择立即执行的应用定义的操作列表。</span></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>actions</em>[] = <em>Notification</em>.actions;</pre> + +<h3 id="Return_Value" name="Return_Value">值</h3> + +<p>{{domxref("NotificationAction")}}对象的只读数组。用户在通知中选择每项的单一的功能。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-actions','actions')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatChrome(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(40)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatChrome(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(40)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for 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> + <p>{{CompatNo}}</p> + </td> + <td>{{CompatChrome(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(40)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(40)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_相关">Firefox OS 相关</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Chrome_相关">Chrome 相关</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_相关">Safari 相关</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/badge/index.html b/files/zh-cn/web/api/notification/badge/index.html new file mode 100644 index 0000000000..9858d6424c --- /dev/null +++ b/files/zh-cn/web/api/notification/badge/index.html @@ -0,0 +1,94 @@ +--- +title: Notification.badge +slug: Web/API/notification/badge +tags: + - Notification + - Notification badge + - Notifications API + - Web API +translation_of: Web/API/Notification/badge +--- +<p>{{SeeCompatTable}}{{APIRef("Notifications API")}}</p> + +<p>当没有足够的空间来显示通知本身时，{{domxref("Notification")}}接口的 <strong><code>badge</code></strong> 属性返回用于表示通知的图像URL。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>url</em> = Notification.<em>badge</em></pre> + +<h3 id="值">值</h3> + +<p>包含一个URL的 {{domxref('USVString')}} 。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-badge','badge')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(39)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(39)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/notification/body/index.html b/files/zh-cn/web/api/notification/body/index.html new file mode 100644 index 0000000000..02ada837d2 --- /dev/null +++ b/files/zh-cn/web/api/notification/body/index.html @@ -0,0 +1,155 @@ +--- +title: Notification.body +slug: Web/API/notification/body +translation_of: Web/API/Notification/body +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p> {{domxref("Notification")}} 的只读属性body返回了构造函数{{domxref("Notification")}}实例化时，options所使用的body值。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var body = Notification.body; +</pre> + +<h3 id="Return_Value" name="Return_Value">值</h3> + +<p>{{domxref("DOMString")}}.</p> + +<h2 id="示例">示例</h2> + +<p>在 <a href="https://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>)中, 我们在激活一个桌面通知时,调用了<code>spawnNotification()</code>函数—函数被传入了指定的参数 body、icon、title , 创建了一个必选对象传入{{domxref("Notification.Notification","Notification()")}} 构造函数创建了一个实例.</p> + +<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle,options); +}</pre> + +<h2 id="规范">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-body','body')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (see notes)</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</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> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_备忘">Firefox OS 备忘</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Chrome_备忘">Chrome 备忘</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_备忘">Safari 备忘</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/close/index.html b/files/zh-cn/web/api/notification/close/index.html new file mode 100644 index 0000000000..294360572c --- /dev/null +++ b/files/zh-cn/web/api/notification/close/index.html @@ -0,0 +1,146 @@ +--- +title: Notification.close() +slug: Web/API/notification/close +tags: + - Notification.close() +translation_of: Web/API/Notification/close +--- +<div>{{APIRef("Web Notifications")}}</div> + +<p>{{domxref("Notification")}} 接口的 <code>close()</code> 的方法用于关闭一个以前显示的通知。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Notification.close();</pre> + +<h3 id="Parameters">Parameters</h3> + +<p>None.</p> + +<h3 id="Returns">Returns</h3> + +<p>Void.</p> + +<h2 id="Examples">Examples</h2> + +<p>以下是 <a href="https://github.com/mdn/emogotchi">Emogotchi 示例</a>（<a href="http://mdn.github.io/emogotchi/">在线演示</a>）中的一段代码 ，定义了一个简单的函数spawnNotification，当spawnNotification被调用时会创建一个对象并生成一个新的Notification。在函数的最后，它在{{domxref("WindowTimers.setTimeout","setTimeout()")}} 中调用了close()函数来实现在4s后关闭Notification（有些浏览器会自动关闭弹出的Notification，但有些不是，例如Chrome,Opera）。还要注意bind()的使用，来确保close()方法绑定到Notification的实例上。</p> + +<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + + var n = new Notification(theTitle,options); + setTimeout(n.close.bind(n), 4000); +} +</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>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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")}}<sup>[1]</sup><br> + 22</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>6<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(4.0)}}{{property_prefix("moz")}}<sup>[2]</sup><br> + {{CompatGeckoMobile(22.0)}}</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p> + +<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p> + +<p>Before Chrome 42, service worker additions were not supported.</p> + +<p>[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p> + +<p>Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p> + +<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p> + +<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p> + +<p>When using notifications in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p> + +<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</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> diff --git a/files/zh-cn/web/api/notification/data/index.html b/files/zh-cn/web/api/notification/data/index.html new file mode 100644 index 0000000000..b7426d601e --- /dev/null +++ b/files/zh-cn/web/api/notification/data/index.html @@ -0,0 +1,165 @@ +--- +title: Notification.data +slug: Web/API/notification/data +translation_of: Web/API/Notification/data +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p><code>data</code> 只读属性是 {{domxref("Notification")}} 的接口，当它作为构造函数的option可选项之一时，返回结构化的Notification的data数据。</p> + +<p>当你创建Notification时，notification使用的数据可以使任意类型。</p> + +<p>{{AvailableInWorkers}}</p> + +<p>附加语法糖：关于克隆对象的速度研究。</p> + +<p>https://dassur.ma/things/deep-copy/ </p> + +<p>博客作者认为目前（参考）最快的object克隆、复制方式。</p> + +<pre style="color: #f8f8f2; background-color: #272822;"><code class="language-js"><span style="color: #66d9ef;">function</span> <span style="color: #a6e22e;">structuralClone</span>(<span style="color: #a6e22e;">obj</span>) { + <span style="color: #66d9ef;">return</span> <span style="color: #66d9ef;">new</span> <span style="color: #a6e22e;">Notification</span>(<span style="color: #e6db74;">''</span>, {<span style="color: #a6e22e;">data</span><span style="color: #f92672;">:</span> <span style="color: #a6e22e;">obj</span>, <span style="color: #a6e22e;">silent</span><span style="color: #f92672;">:</span> <span style="color: #66d9ef;">true</span>}).<span style="color: #a6e22e;">data</span>; +}</code></pre> + +<h2 id="Syntax" name="Syntax">Syntax 表达式</h2> + +<pre class="eval">var <em>data</em> = Notification.data; +</pre> + +<h3 id="Return_Value" name="Return_Value">Value（返回值）</h3> + +<p>结构化的克隆数据</p> + +<h2 id="Examples_例子">Examples 例子</h2> + +<p>产生一个 notification; <code>简单的options</code> 作为构造参数, 将会触发以option为构造参数的 <code>Notification()</code> .</p> + +<pre class="brush: js">var options = { + body: 'Do you like my body?', + data: 'I like peas.' +} + +var n = new Notification('Test notification',options); + +n.data // should return 'I like peas.'</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','#dom-notification-data','data')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(44)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatOpera(34)}}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatChrome(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(34)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Secure contexts only</td> + <td>{{CompatChrome(62)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(49)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{ CompatNo() }}</td> + <td>{{CompatChrome(44)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatOperaMobile(34)}}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(34)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Secure contexts only</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(62)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> diff --git a/files/zh-cn/web/api/notification/dir/index.html b/files/zh-cn/web/api/notification/dir/index.html new file mode 100644 index 0000000000..51d64db69c --- /dev/null +++ b/files/zh-cn/web/api/notification/dir/index.html @@ -0,0 +1,167 @@ +--- +title: Notification.dir +slug: Web/API/notification/dir +translation_of: Web/API/Notification/dir +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>{{domxref("Notification")}} 的`dir`是一个只读属性，它表示Notification中显示的文本方向 会{{domxref("Notification.Notification","Notification()")}} 构造函数里制定的`dir` 属性的值来设定。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var <em>direction</em> = Notification.dir; +</pre> + +<h3 id="Return_Value" name="Return_Value">值</h3> + +<p>一个表示文本方向的{{domxref("DOMString")}}变量。 可能的取值为:</p> + +<ul> + <li><code>auto</code>: 继承浏览器的语言设置里制定的方向 (默认)</li> + <li><code>ltr</code>: 从左到右</li> + <li><code>rtl</code> : 从右到左</li> +</ul> + +<div class="note"> +<p><strong>提示</strong>:似乎大多数浏览器都忽略了明确的LTR 和RTL 设置，要按照与浏览器的通用设置来操作。</p> +</div> + +<h2 id="例子">例子</h2> + +<p>The following snippet fires a notification; a simple <code>options</code> object is created, then the notification is fired using the <code>Notification()</code> constructor.</p> + +<pre class="brush: js">var options = { + body: '你去过新疆吗?', + dir: 'rtl' +} + +var n = new Notification('测试通知',options); + +n.dir // 应该返回 'rtl' +</pre> + +<h2 id="规则">规则</h2> + +<table> + <tbody> + <tr> + <th scope="col">规则</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基础支持</td> + <td>5 {{ property_prefix("webkit") }} (看提示)<br> + 22</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (看提示)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (看提示)</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (看注释)<br> + 22</td> + <td>1.0.1 {{ property_prefix("moz") }} (看注释)<br> + 1.2</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td>能在Worker里调用</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_提示">Firefox OS 提示</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Chrome_提示">Chrome 提示</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_提示">Safari 提示</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/icon/index.html b/files/zh-cn/web/api/notification/icon/index.html new file mode 100644 index 0000000000..40f76c90f0 --- /dev/null +++ b/files/zh-cn/web/api/notification/icon/index.html @@ -0,0 +1,63 @@ +--- +title: Notification.icon +slug: Web/API/notification/icon +tags: + - API + - Notification +translation_of: Web/API/Notification/icon +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>{{domxref("Notification")}}的只读属性<strong>icon</strong>使得包含<code>icon</code>的 URL 被显示成通知的一部分，如同指定{{domxref("Notification.Notification","Notification()")}}构造函数中<code>icon</code>的属性。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var icon = Notification.icon; +</pre> + +<h3 id="Return_Value" name="Return_Value">值</h3> + +<p>一个 {{domxref("USVString")}}。</p> + +<h2 id="示例">示例</h2> + +<p>在此<a href="https://github.com/mdn/emogotchi">示例</a>中，当我们想要发出一个通知时，我们运行一个简单的 <code>spawnNotification() 函数</code>——这是传递参数来指定我们想要的主体、图标和标题，然后它创建必要的<code>options</code>对象，并使用{{domxref("Notification.Notification","Notification()")}}构造函数来触发通知。</p> + +<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle,options); +}</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','#dom-notification-icon','icon')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Notification.icon")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/image/index.html b/files/zh-cn/web/api/notification/image/index.html new file mode 100644 index 0000000000..9a89fd402b --- /dev/null +++ b/files/zh-cn/web/api/notification/image/index.html @@ -0,0 +1,46 @@ +--- +title: Notification.image +slug: Web/API/notification/image +translation_of: Web/API/Notification/image +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary"> <code>image</code> 是{{domxref("Notification")}} 接口的只读属性，包含了需要显示在通知信息里的图片的URL，</span>可通过{{domxref("Notification.Notification","Notification()")}}构造函数的 <code>image</code> 选项指定。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var image = Notification.image; +</pre> + +<h3 id="Return_Value" name="Return_Value">值</h3> + +<p>{{domxref("USVString")}}。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#image-resource','image')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Notification.image")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">使用Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/index.html b/files/zh-cn/web/api/notification/index.html new file mode 100644 index 0000000000..f92c528b16 --- /dev/null +++ b/files/zh-cn/web/api/notification/index.html @@ -0,0 +1,264 @@ +--- +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> + +<div></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" title="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"><button onclick="notifyMe()">Notify me!</button></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 <1.2) 之前，创建一个新的通知必须使用 {{ domxref("window.navigator.mozNotification","navigator.mozNotification") }} 对象的 <code>createNotification</code> 方法。</li> + <li>在 Firefox 22 (Firefox OS <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 <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" title="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> diff --git a/files/zh-cn/web/api/notification/notification/index.html b/files/zh-cn/web/api/notification/notification/index.html new file mode 100644 index 0000000000..a4954e446a --- /dev/null +++ b/files/zh-cn/web/api/notification/notification/index.html @@ -0,0 +1,301 @@ +--- +title: Notification.Notification() +slug: Web/API/notification/Notification +tags: + - Notification.Notification() +translation_of: Web/API/Notification/Notification +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p><strong>Notification() </strong>构造函数创建一个新的{{domxref("Notification")}}对象实例。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">let myNotification = new Notification(title, options);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em>title</em></dt> + <dd>定义一个通知的标题，当它被触发时，它将显示在通知窗口的顶部。</dd> + <dt><em>options</em> {{optional_inline}}</dt> + <dd>options对象包含应用于通知的任何自定义设置选项。选项有： + <ul> + <li><code>dir</code>: 显示通知的方向。默认是auto，跟随浏览器语言设置行为，你也可以通过设置ltr和rtl的值来覆盖该行为（虽然大多数浏览器似乎忽略这些设置）</li> + <li><code>lang</code>: 通知的语言，如使用代表一个<a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP 47语言标签</a>的 {{domxref("DOMString")}} 指定的。请参阅Sitepoint <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">ISO 2字母语言代码</a>页面，以获得简单的参考。</li> + <li>badge: 一个 {{domxref("USVString")}} 包含用于表示通知的图像的URL, 当没有足够的空间来显示通知本身时。</li> + <li><code>body</code>: 一个 {{domxref("DOMString")}} 表示通知的正文，将显示在标题下方。</li> + <li><code>tag</code>: 一个 {{domxref("DOMString")}} 代表通知的 一个识别标签。</li> + <li><code>icon</code>: 一个 {{domxref("USVString")}} 包含要在通知中显示的图标的URL。</li> + <li><code>image</code>: 一个 {{domxref("USVSTring")}}包含要在通知中显示的图像的URL。</li> + <li><code>data</code>: 您想要与通知相关联的任意数据。这可以是任何数据类型。</li> + <li><code>vibrate</code>: 一个振动模式 <a href="/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">vibration pattern</a> 设备的振动硬件在通知触发时发出。</li> + <li><code>renotify</code>: 一个 {{domxref("Boolean")}} 指定在新通知替换旧通知后是否应通知用户。默认值为false，这意味着它们不会被通知。</li> + <li><code>requireInteraction</code>: 表示通知应保持有效，直到用户点击或关闭它，而不是自动关闭。默认值为false。</li> + </ul> + + <p>以下选项列在最新规范中，但在任何浏览器中都不支持. It is advisable to keep checking back regularly to see if the status of these has updated, and let us know if you find any out of date information.</p> + + <ul> + <li><code>silent</code>: 一个 {{domxref("Boolean")}} 指明通知是否应该是无声的,即,不需要发出声音或振动，无论设备设置如何。默认值为false，这意味着它不会保持静默。</li> + <li><code>sound</code>:一个 {{domxref("USVString")}} 包含通知触发时要播放的音频文件的URL。</li> + <li><code>noscreen</code>: 一个 {{domxref("Boolean")}} 指定通知触发是否应启用设备的屏幕。 默认值为false，这意味着它将启用屏幕。</li> + <li><code>sticky</code>: 一个 {{domxref("Boolean")}} 指明通知是否应该是“粘”, 即不易被用户清理。默认值为false，这意味着它不会粘。</li> + </ul> + + <p> </p> + </dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>In our <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary <code>options</code> object and fires the notification using the <code>Notification()</code> constructor.</p> + +<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle,options); + +}</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","#dom-notification-notificationtitle-options","Notification()")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>icon</code> option</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>{{ CompatNo() }}</td> + </tr> + <tr> + <td><font face="Consolas, Liberation Mono, Courier, monospace">vibrate</font></td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>requireInteraction</code></td> + <td>{{CompatChrome(47.0)}}</td> + <td> </td> + <td> </td> + <td>32</td> + <td> </td> + </tr> + <tr> + <td><code>renotify</code></td> + <td>{{CompatChrome(50.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>badge</code></td> + <td>{{compatChrome(53.0)}}</td> + <td> </td> + <td> </td> + <td>{{CompatOpera(39.0)}}</td> + <td> </td> + </tr> + <tr> + <td><code>image</code></td> + <td>{{compatChrome(55.0)}}</td> + <td> </td> + <td> </td> + <td>{{CompatUnknown}}</td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </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> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>icon option</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><font face="Consolas, Liberation Mono, Courier, monospace">vibrate</font></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>32</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + <tr> + <td><code>requireInteraction</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>renotify</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td><code>badge</code></td> + <td>{{CompatNo}}</td> + <td>{{compatChrome(53.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatOperaMobile(39.0)}}</td> + <td> </td> + <td>{{compatChrome(53.0)}}</td> + </tr> + <tr> + <td><code>image</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td>{{compatChrome(55.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_notes">Firefox OS notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Chrome_notes">Chrome notes</h3> + +<p>Starting in Chrome 49, notifications do not work in incognito mode.</p> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_notes">Safari notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</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> diff --git a/files/zh-cn/web/api/notification/onclick/index.html b/files/zh-cn/web/api/notification/onclick/index.html new file mode 100644 index 0000000000..7901b19faa --- /dev/null +++ b/files/zh-cn/web/api/notification/onclick/index.html @@ -0,0 +1,58 @@ +--- +title: Notification.onclick +slug: Web/API/notification/onclick +tags: + - Notification.onclick +translation_of: Web/API/Notification/onclick +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>{{domxref("Notification")}} 接口的 onclick属性指定一个事件侦听器来接收 {{event("click")}} 事件。</p> + +<p>当用户点击一个显示的{{domxref("Notification")}}时，会发生这些事件。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">Notification.onclick = function(event) { ... }; +</pre> + +<p>该方法的默认行为是将焦点移到与该通知相关联的 <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">browsing context</a> 的窗口. 如果你不希望这样, 可以在 event 对象上调用 <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</p> + +<h2 id="Examples">Examples</h2> + +<p>在下面这个例子中，我们使用 onclick 处理程序来监听点击通知的事件, 并在新窗口(通过包含一个参数<code>'_blank'</code>)打开一个页面:</p> + +<pre class="brush: js">notification.onclick = function(event) { + event.preventDefault(); // prevent the browser from focusing the Notification's tab + window.open('http://www.mozilla.org', '_blank'); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/onclose/index.html b/files/zh-cn/web/api/notification/onclose/index.html new file mode 100644 index 0000000000..7c8577c85d --- /dev/null +++ b/files/zh-cn/web/api/notification/onclose/index.html @@ -0,0 +1,34 @@ +--- +title: Notification.onclose +slug: Web/API/notification/onclose +tags: + - Notification.onclose +translation_of: Web/API/Notification/onclose +--- +<p>{{APIRef("Web Notifications")}}</p> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>{{domxref("Notification")}} 接口的 <strong>onclose</strong>属性指定一个事件侦听器来接收 {{event("close")}}事件。</p> + +<p>当一个{{domxref("Notification")}}关闭时，会发生这些事件。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">Notification.onclose = function() { ... }; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>This event handler is no longer listed in the <a href="https://notifications.spec.whatwg.org/">Notifications API spec</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/onerror/index.html b/files/zh-cn/web/api/notification/onerror/index.html new file mode 100644 index 0000000000..6cf9d7295d --- /dev/null +++ b/files/zh-cn/web/api/notification/onerror/index.html @@ -0,0 +1,54 @@ +--- +title: Notification.onerror +slug: Web/API/notification/onerror +tags: + - Notification.onerror +translation_of: Web/API/Notification/onerror +--- +<p>{{APIRef("Web Notifications")}}</p> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>{{domxref("Notification")}} 接口的 onerror属性指定一个事件侦听器来接收 {{event("error")}} 事件。</p> + +<p>当一个 {{domxref("Notification")}} 发生错误时，会发生这些事件（在许多情况下，一个错误阻止显示通知）。</p> + +<p> </p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>Notification</em>.onerror = <em>EventListener</em>;</pre> + +<h3 id="Value">Value</h3> + +<p>A {{jsxref("function")}} which serves as the event handler for the {{event("error")}} event. When an error occurs, the specified function will be called. If <code>null</code>, no error handler is in effect.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/onshow/index.html b/files/zh-cn/web/api/notification/onshow/index.html new file mode 100644 index 0000000000..0b3feb6fdc --- /dev/null +++ b/files/zh-cn/web/api/notification/onshow/index.html @@ -0,0 +1,34 @@ +--- +title: Notification.onshow +slug: Web/API/notification/onshow +tags: + - Notification.onshow +translation_of: Web/API/Notification/onshow +--- +<p>{{APIRef("Web Notifications")}}</p> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>{{domxref("Notification")}} 接口的onshow属性指定一个事件侦听器来接收 {{event("show")}}事件。</p> + +<p>当一个 {{domxref("Notification")}} 显示时，会发生这些事件。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">Notification.onshow = function() { ... }; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>This event handler is no longer listed in the <a href="https://notifications.spec.whatwg.org/">Notifications API spec</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/permission/index.html b/files/zh-cn/web/api/notification/permission/index.html new file mode 100644 index 0000000000..7cd16cf9d1 --- /dev/null +++ b/files/zh-cn/web/api/notification/permission/index.html @@ -0,0 +1,179 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +translation_of: Web/API/Notification/permission +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p><code>Notification 的只读属性 permission 用来表明用户是否允许当前域显示Web Notification. </code></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>permission</em> = Notification.permission;</pre> + +<h3 id="Return_Value" name="Return_Value">Value</h3> + +<p>permission 的类型为 {{domxref("DOMString")}} . 该属性的可能值为:</p> + +<ul> + <li><code>granted</code>: 用户已经明确的授予了显示通知的权限。.</li> + <li><code>denied</code>: 用户已经明确的拒绝了显示通知的权限。</li> + <li><code>default</code>: 用户还未被询问是否授权; 这种情况下权限将视为 <code>denied</code>.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>下面的代码片段详细的说明了，当你首次检查浏览器是否支持Notification，然后检查当前域是否被授予了发送Notification的权限，并且在发送一个通知前进行请求的用法．</p> + +<pre class="brush: js">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + console.log("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have alredy been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== 'denied' || Notification.permission === "default") { + Notification.requestPermission(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (see notes)</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</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> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_notes">Firefox OS notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Chrome_notes">Chrome notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_notes">Safari notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</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> + <li>{{domxref("Permissions_API","Permissions API")}}</li> +</ul> diff --git a/files/zh-cn/web/api/notification/renotify/index.html b/files/zh-cn/web/api/notification/renotify/index.html new file mode 100644 index 0000000000..0f7620b6c0 --- /dev/null +++ b/files/zh-cn/web/api/notification/renotify/index.html @@ -0,0 +1,68 @@ +--- +title: Notification.renotify +slug: Web/API/notification/renotify +translation_of: Web/API/Notification/renotify +--- +<div> +<div>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</div> + +<p><code>renotify</code> 是 {{domxref("Notification")}} 接口的只读属性，如果有新的通知替换了一个旧的通知，这个属性指明用户是否应该重新收到通知。它也可以通过{{domxref("Notification.Notification","Notification()")}} 构造函数的 <code>renotify</code> option 来指定。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var renotify = Notification.renotify; +</pre> + +<h3 id="值">值</h3> + +<p>{{domxref("Boolean")}}. 默认为<code>false</code>；设为 <code>true</code> 将会重新通知用户。</p> + +<h2 id="例子">例子</h2> + +<p>以下代码片段用于在一个通知被替换以后触发通报以重新通知用户；它创建一个简单的 <code>options</code> 对象，然后使用<code>Notification()</code> 构造函数触发通报。</p> + +<pre class="brush: js">var options = { + body: 'Do you like my body?', + tag: 'renotify', + renotify: true +} + +var n = new Notification('Test notification',options); + +n.renotify // should return true</pre> + +<h2 id="使用注意">使用注意</h2> + +<p>renotify 覆盖通知选项必须搭配 tag 标签选项进行使用，否则会收到错误通知。</p> + +<pre>Notifications which set the renotify flag must specify a non-empty tag.</pre> + +<h2 id="规范">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-renotify','renotify')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Notification.renotify")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">使用通知API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/requestpermission/index.html b/files/zh-cn/web/api/notification/requestpermission/index.html new file mode 100644 index 0000000000..90b3efebff --- /dev/null +++ b/files/zh-cn/web/api/notification/requestpermission/index.html @@ -0,0 +1,174 @@ +--- +title: Notification.requestPermission() +slug: Web/API/notification/requestPermission +tags: + - 通知 +translation_of: Web/API/Notification/requestPermission +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>{{domxref("Notification")}} 接口的 <strong><code>requestPermission()</code> </strong>方法请求用户当前来源的权限以显示通知。</p> + +<h2 id="语法">语法</h2> + +<p>最新的规范已将此方法更新为基于promise的语法，工作原理如下：</p> + +<pre class="brush: js">Notification.requestPermission().then(function(permission) { ... });</pre> + +<p>以前，语法是基于一个简单的回调；此版本现<s style="color: red;">已弃用</s>：</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> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>callback</code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt> + <dd>一个可选的参数为权限请求的结果的回调函数。此参数已废弃，请使用Promise的语法。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{jsxref("Promise")}} ，将解析为一个 {{domxref("DOMString")}} ，它是用户对权限请求的选择。这个字符串可以是 <code>granted</code>（被授予）， <code>denied</code>（被拒绝） 或者 <code>default</code>（默认）。</p> + +<h2 id="实例">实例</h2> + +<p>下面这个代码片段将向用户请求权限，然后根据用户的不同选择，输出不同的日志。</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="标准">标准</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> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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")}}<sup>[1]</sup><br> + 22</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>6<sup>[3]</sup></td> + </tr> + <tr> + <td>promise-based version</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(40)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br> + {{CompatGeckoMobile("22.0")}}</td> + <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> + 1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>promise-based version</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在 Chrome 22 之前，对于通知的支持请参考 <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> 它使用 {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} 对象去实例化一个新的通知。</p> + +<p>在 Chrome 32 之前，不支持 {{domxref("Notification.permission")}} 。</p> + +<p>在 Chrome 42 之前，不支持在 service worker 中使用这个API。</p> + +<p>[2] 对于 Firefox 22 之前的版本 (Firefox OS <1.2)，实例化一个新的通知必须使用 {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} 对象中的 <code>createNotification</code> 方法.</p> + +<p>对于 Firefox 22 之前的版本 (Firefox OS <1.2)，通知只会在 <code>show</code> 方法被调用后显示，而且只支持 <code>click</code> 和 <code>close</code> 事件。</p> + +<p>Nick Desaulniers 写了一个 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> 来同时兼容新旧两种写法。</p> + +<p>在 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> 在打包的应用中的值是<code>null</code>。<a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> 修复了这个问题，但是它只能在 Firefox OS 1.1+ 中使用。一个潜在的支持 Firefox OS <1.1 的解决方案是 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">传递一个指向外部部署的图标的绝对路径的URL</a>。这并不是一个理想的解决方案，因为这将导致通知以无图标的形式出现，然后图标才会被获取，但是这个方法适用于所有版本的 Firefox OS.</p> + +<p>在 Firefox OS app 中使用通知的时候，确保添加 <code>desktop-notification</code> 权限到你的 manifest 文件中。通知即可在任何权限等级，外部部署或者像下面这样 <code>"permissions": { "desktop-notification": {} }</code> 的情况下使用。</p> + +<p>[3] Safari 在 Safari 6 之后支持通知，但是只能在 Mac OSX 10.8+ (Mountain Lion) 中使用。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/notification/Using_Web_Notifications">使用Web Notifications</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/requireinteraction/index.html b/files/zh-cn/web/api/notification/requireinteraction/index.html new file mode 100644 index 0000000000..a13a2eb100 --- /dev/null +++ b/files/zh-cn/web/api/notification/requireinteraction/index.html @@ -0,0 +1,59 @@ +--- +title: Notification.requireInteraction +slug: Web/API/notification/requireInteraction +tags: + - Notification + - 属性 + - 网页 +translation_of: Web/API/Notification/requireInteraction +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>{{domxref("Notification")}} 接口的 <strong><code>requireInteraction</code></strong> 属性是只读属性，它返回一个 {{jsxref("Boolean")}} （布尔值），指示在用户点击或关闭通知前，通知应该保持活动状态，而不是自动关闭。</p> + +<div class="note"> +<p><strong>注意</strong>: 此属性可以在创建通知时通过在 {{domxref("Notification.Notification()")}} 构造器的 options 参数接收的对象上设置 <code>requireInteraction</code> 属性为 <code>true</code> 来进行设置</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js notranslate">function spawnNotification(theTitle,theBody,shouldRequireInteraction) { + var options = { + body: theBody, //通知正文 + requireInteraction: shouldRequireInteraction //在此处设置 requireInteraction + } + var n = new Notification(theTitle,options); +}</pre> + +<h3 id="Return_Value" name="Return_Value">值</h3> + +<p>{{jsxref("Boolean")}} （布尔值）。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">意见</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>现今标准</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<div class="hidden">此页上的兼容性表生成自结构化数据。如果你想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送 pull request。</div> + +<p>{{Compat("api.Notification.requireInteraction")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">使用 Notifications API</a></li> +</ul> diff --git a/files/zh-cn/web/api/notification/sound/index.html b/files/zh-cn/web/api/notification/sound/index.html new file mode 100644 index 0000000000..ffe90b4955 --- /dev/null +++ b/files/zh-cn/web/api/notification/sound/index.html @@ -0,0 +1,129 @@ +--- +title: Notification.sound +slug: Web/API/notification/sound +translation_of: Web/API/notification/sound +--- +<p>{{APIRef("Web Notifications")}}</p> + +<div class="note"> +<p><strong>Note</strong>: 这个属性并没有完全被一些浏览器支持.</p> +</div> + +<p> <code>sound</code> 是 {{domxref("Notification")}}的只读属性，interface specifies the URL of an audio file to be played when the notification fires. This is specified in the <code>sound</code> option of the {{domxref("Notification.Notification","Notification()")}} constructor.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var sound = Notification.sound; +</pre> + +<h3 id="Return_Value" name="Return_Value">Value</h3> + +<p>A {{domxref("USVString")}}.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following snippet is intended to fire a sound along with the notification; a simple <code>options</code> object is created, then the notification is fired using the <code>Notification()</code> constructor.</p> + +<pre class="brush: js">var options = { + body: 'Do you like my body?', + sound: 'audio/alert.mp3' +} + +var n = new Notification('Test notification',options); + +n.sound // should return 'audio/alert.mp3'</pre> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-sound','sound')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{ CompatNo() }}</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{ CompatNo() }}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_notes">Firefox OS notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Chrome_notes">Chrome notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_notes">Safari notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</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> diff --git a/files/zh-cn/web/api/notification/using_web_notifications/index.html b/files/zh-cn/web/api/notification/using_web_notifications/index.html new file mode 100644 index 0000000000..40bbb3848b --- /dev/null +++ b/files/zh-cn/web/api/notification/using_web_notifications/index.html @@ -0,0 +1,292 @@ +--- +title: 使用 Web Notifications +slug: Web/API/notification/Using_Web_Notifications +tags: + - Firefox OS + - Notifications + - Using the Notifications API + - 通知 +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p class="summary"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a> 允许网页或应用程序在系统级别发送在页面外部显示的通知;这样即使应用程序空闲或在后台，Web应用程序也会向用户发送信息。本文将介绍在您自己的应用程序中使用此API的基础知识。</p> + +<p>{{AvailableInWorkers}}</p> + +<p>通常，系统通知是指操作系统的标准通知机制，例如思考典型的桌面系统或移动设备如何发布通知。</p> + +<p> <img src="https://mdn.mozillademos.org/files/10959/android-notification.png"> </p> + +<p> <img src="https://mdn.mozillademos.org/files/10961/mac-notification.png"></p> + +<p>系统通知系统当然会因平台和浏览器而异，但无需担心，通知API被编写为通用的，足以与大多数系统通知系统兼容。</p> + +<p>Web Notifications API 使页面可以发出通知，通知将被显示在页面之外的系统层面上（通常使用操作系统的标准通知机制，但是在不同的平台和浏览器上的表现会有差异）。这个功能使 web 应用可以向用户发送信息，即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序，每当用户收到了一封新的电子邮件都需要通知用户，即使用户正在使用另一个应用程序。</p> + +<p>要显示一条通知，你需要先请求适当的权限，然后你可以实例化一个 {{domxref("Notification")}} 实例：</p> + +<pre class="brush: js">Notification.requestPermission( function(status) { + console.log(status); // 仅当值为 "granted" 时显示通知 + var n = new Notification("title", {body: "notification body"}); // 显示通知 +}); +</pre> + +<h2 id="请求权限">请求权限</h2> + +<p>在应用可以发送通知之前，用户必须授予应用有权这么做。这是一个常见的要求，当一个 API 至少一次试图与 web 页外部进行交互时，用户不得不专门授予该应用程序有权限提出通知，从而让用户控制允许哪些应用程序或网站显示通知。</p> + +<h3 id="检查当前权限状态">检查当前权限状态</h3> + +<p>你可以通过检查只读属性 {{domxref("Notification.permission")}} 的值来查看你是否已经有权限。该属性的值将会是下列三个之一：</p> + +<dl> + <dt><code>default</code></dt> + <dd>用户还未被询问是否授权，所以通知不会被显示。参看 {{anch("Getting permission")}} 以了解如何请求显示通知的权限。</dd> + <dt><code>granted</code></dt> + <dd>表示之前已经询问过用户，并且用户已经授予了显示通知的权限。</dd> + <dt><code>denied</code></dt> + <dd>用户已经明确的拒绝了显示通知的权限。</dd> +</dl> + +<div class="note"> +<p><strong>注：</strong>Safari 和 <span style="line-height: 1.5;">Chrome (在 32 版本之前)</span><span style="line-height: 1.5;"> 还没有实现 </span><code style="font-style: italic; line-height: 1.5;">permission</code><span style="line-height: 1.5;"> 属性。</span></p> +</div> + +<h3 id="获得权限">获得权限</h3> + +<p>如果权限尚未被授予，那么应用不得不通过 {{domxref("Notification.requestPermission()")}} 方法让用户进行选择。这个方法接受一个回调函数，一旦用户回应了显示通知的请求，将会调用这个函数。</p> + +<p>通常你应在你的应用首次初始化的时候请求显示通知的权限：</p> + +<pre class="brush: js">window.addEventListener('load', function () { + Notification.requestPermission(function (status) { + // 这将使我们能在 Chrome/Safari 中使用 Notification.permission + if (Notification.permission !== status) { + Notification.permission = status; + } + }); +});</pre> + +<div class="note"> +<p><strong>注：</strong>Chrome 不允许你在 <code>load</code> 事件处理中调用 {{domxref("Notification.requestPermission()")}} （参见 <a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">issue 274284</a>）。</p> +</div> + +<h3 id="Notification_API_的清单权限">Notification API 的清单权限</h3> + +<p>请注意 Notification API 不是 {{Glossary("privileged")}} 或 {{Glossary("certified")}}，因此当你在一个开放 web 应用中使用它时，你仍需要在你的 <code>manifest.webapp</code> 文件中包含以下项目：</p> + +<pre>"permissions": { + "desktop-notification": { + "description": "Needed for creating system notifications." + } +}</pre> + +<div class="note"> +<p><strong>注：</strong>当安装应用程序时，你不需要通过上面的代码显式的请求权限，但您仍然需要在触发通知之前取得权限项。</p> +</div> + +<h2 id="创建通知">创建通知</h2> + +<p>创建通知很简单，只需要用 {{domxref("Notification")}} 构造方法。这个构造函数需要一个用来显示在通知内的标题以及一些用来增强通知的选项，例如 {{domxref("Notification.icon","icon")}} 或文本 {{domxref("Notification.body","body")}}。</p> + +<p>一旦通知被创建出来，它会立即被显示出来。为了跟踪通知当前的状态，在 {{domxref("Notification")}} 实例层面上会有4个事件被触发：</p> + +<dl> + <dt>{{event("show")}}</dt> + <dd>当通知被显示给用户时触发。</dd> + <dt>{{event("click")}}</dt> + <dd>当用户点击通知时触发。</dd> + <dt>{{event("close")}}</dt> + <dd>当通知被关闭时触发。</dd> + <dt>{{event("error")}}</dt> + <dd>当通知发生错误的时候触发。这通常是因为通知由于某些原因而无法显示。</dd> +</dl> + +<p>这些事件可以通过事件处理跟踪 {{domxref("Notification.onshow","onshow")}}、{{domxref("Notification.onclick","onclick")}}、{{domxref("Notification.onclose","onclose")}} 和 {{domxref("Notification.onerror","onerror")}}。因为 {{domxref("Notification")}} 同样继承自 {{domxref("EventTarget")}}，因此可以对它调用 {{domxref("EventTarget.addEventListener","addEventListener()")}} 方法。</p> + +<div class="note"> +<p><strong>注：</strong>Firefox 和 Safari 会在一定时间后自动关闭通知（大约4秒）。这也会发生在操作系统层面。</p> + +<p>当然你也可以通过代码做到，调用 {{domxref("Notification.close()")}} 方法，就像下面的代码一样：</p> + +<pre class="brush: js">var n = new Notification("Hi!"); +n.onshow = function () { + setTimeout(n.close.bind(n), 5000); +} +</pre> + +<p>当你接收到一个“close”事件时，并不能保证这个通知是被用户关闭的。这是符合规范的，其中指出：“当一个通知被关闭时，通知的关闭动作都必须执行，不论是底层通知平台导致，还是用户导致。”</p> +</div> + +<h3 id="简单的例子">简单的例子</h3> + +<p>假定有如下的 HTML:</p> + +<pre class="brush: html"><button>Notify me!</button></pre> + +<p>它可能通过这样的方式处理通知：</p> + +<pre class="brush: js">window.addEventListener('load', function () { + // 首先，让我们检查我们是否有权限发出通知 + // 如果没有，我们就请求获得权限 + if (window.Notification && Notification.permission !== "granted") { + Notification.requestPermission(function (status) { + if (Notification.permission !== status) { + Notification.permission = status; + } + }); + } + + var button = document.getElementsByTagName('button')[0]; + + button.addEventListener('click', function () { + // 如果用户同意就创建一个通知 + if (window.Notification && Notification.permission === "granted") { + var n = new Notification("Hi!"); + } + + // 如果用户没有选择是否显示通知 + // 注：因为在 Chrome 中我们无法确定 permission 属性是否有值，因此 + // 检查该属性的值是否是 "default" 是不安全的。 + else if (window.Notification && Notification.permission !== "denied") { + Notification.requestPermission(function (status) { + if (Notification.permission !== status) { + Notification.permission = status; + } + + // 如果用户同意了 + if (status === "granted") { + var n = new Notification("Hi!"); + } + + // 否则，我们可以让步的使用常规模态的 alert + else { + alert("Hi!"); + } + }); + } + + // 如果用户拒绝接受通知 + else { + // 我们可以让步的使用常规模态的 alert + alert("Hi!"); + } + }); +});</pre> + +<p>这是实际的结果：</p> + +<p>{{ EmbedLiveSample('Simple_example', '100%', 30) }}</p> + +<h2 id="处理重复的通知">处理重复的通知</h2> + +<p>某些情况下对于用户来说，显示大量通知是件令人痛苦的事情。比如，如果一个即时通信应用向用户提示每一条传入的消息。为了避免数以百计的不必要通知铺满用户的桌面，可能需要接管一个挂起消息的队列。</p> + +<p>因此，需要为新建的通知添加一个标记。如果有一条通知也具有一个相同的标记，并且还没有被显示，那么这条新通知将会替换上一条通知。如果有一条通知具有一个相同的标记，并且已经显示出来了，那么上一条通知将会被关闭，新通知将会被显示出来。</p> + +<h3 id="使用标记的例子">使用标记的例子</h3> + +<p>假定有如下 HTML:</p> + +<pre class="brush: html"><button>Notify me!</button></pre> + +<p>它有可能通过这种方式处理的多个通知：</p> + +<pre class="brush: js">window.addEventListener('load', function () { + // 首先，我们检查是否具有权限显示通知 + // 如果没有，我们就申请权限 + if (window.Notification && Notification.permission !== "granted") { + Notification.requestPermission(function (status) { + if (Notification.permission !== status) { + Notification.permission = status; + } + }); + } + + var button = document.getElementsByTagName('button')[0]; + + button.addEventListener('click', function () { + // 如果用户同意接收通知，我们就尝试发送10条通知 + if (window.Notification && Notification.permission === "granted") { + for (var i = 0; i < 10; i++) { + // 感谢标记，我们应该只看到内容为 "Hi! 9" 的通知 + var n = new Notification("Hi! " + i, {tag: 'soManyNotification'}); + } + } + + // 如果用户没有选择是否同意显示通知 + // 注：由于在 Chrome 中不能确定 permission 属性是否有值，因此检查 + // 该属性值是否为 "default" 是不安全的。 + else if (window.Notification && Notification.permission !== "denied") { + Notification.requestPermission(function (status) { + if (Notification.permission !== status) { + Notification.permission = status; + } + + // 如果用户同意 + if (status === "granted") { + for (var i = 0; i < 10; i++) { + // Thanks to the tag, we should only see the "Hi! 9" notification + var n = new Notification("Hi! " + i, {tag: 'soManyNotification'}); + } + } + + // 否则改用 alert + else { + alert("Hi!"); + } + }); + } + + // 如果用户拒绝 + else { + // 改用 alert + alert("Hi!"); + } + }); +});</pre> + +<p>实际效果如下：</p> + +<p>{{ EmbedLiveSample('.E5.A4.84.E7.90.86.E9.87.8D.E5.A4.8D.E7.9A.84.E9.80.9A.E7.9F.A5', '100%', 30) }}</p> + +<h2 id="接收点击应用通知的通知">接收点击应用通知的通知</h2> + +<p>当用户点击一个由应用产生的通知时，视情况而定，你将会有两种方式被告知点击事件发生了：</p> + +<ol> + <li>如果你的程序没有被关闭或转入后台，那么在你会收到一个点击事件。</li> + <li>其他情况下会收到一条系统消息。</li> +</ol> + +<p>参考 <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">这个代码片段</a> 作为例子，展示了如何处理。</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="浏览器兼容性">浏览器兼容性</h2> + +<p>{{page("/zh-CN/Web/API/Notification",".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{ domxref("Notification") }}</li> +</ul> |