mdn · skyclouds2001 · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024 · Sep 18, 2024
@@ -2,7 +2,7 @@
 title: Battery Status API
 slug: Web/API/Battery_Status_API
 l10n:
-  sourceCommit: cf05364b23bc44af37a350319a1dd47485746a9c
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
 {{DefaultAPISidebar("Battery API")}}{{securecontext_header}}

@@ -2,7 +2,7 @@
 title: BatteryManager：chargingTime 属性
 slug: Web/API/BatteryManager/chargingTime
 l10n:
-  sourceCommit: 8d54a21ae2677dba11569e7b7d918eac828af0b3
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
 {{ApiRef("Battery API")}}{{securecontext_header}}

@@ -2,7 +2,7 @@
 title: BatteryManager：dischargingTime 属性
 slug: Web/API/BatteryManager/dischargingTime
 l10n:
-  sourceCommit: 8d54a21ae2677dba11569e7b7d918eac828af0b3
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
 {{ApiRef("Battery API")}}{{securecontext_header}}

@@ -2,7 +2,7 @@
 title: Navigator：getBattery() 方法
 slug: Web/API/Navigator/getBattery
 l10n:
-  sourceCommit: cf05364b23bc44af37a350319a1dd47485746a9c
+  sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746
 ---
 
 {{ApiRef("Battery API")}}{{securecontext_header}}

@@ -2,7 +2,7 @@
 title: Notification：actions 属性
 slug: Web/API/Notification/actions
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
 {{APIRef("Web Notifications")}}{{SecureContext_Header}}{{SeeCompatTable}} {{AvailableInWorkers}}

@@ -2,7 +2,7 @@
 title: Notification：click 事件
 slug: Web/API/Notification/click_event
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: 94ef07a7b073c2663cbace0667bdb717a40bfa28
 ---
 
 {{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}}

@@ -2,7 +2,7 @@
 title: Notification：close() 方法
 slug: Web/API/Notification/close
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
 {{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}}

@@ -2,7 +2,7 @@
 title: Notification：dir 属性
 slug: Web/API/Notification/dir
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
 {{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}}

@@ -2,7 +2,7 @@
 title: Notification
 slug: Web/API/Notification
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
 {{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}}

@@ -2,7 +2,7 @@
 title: Notification：Notification() 构造函数
 slug: Web/API/Notification/Notification
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: e011d5695b264ced5a3f4bb822ca7904e23b7e83
 ---
 
 {{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}}
@@ -65,7 +65,7 @@ new Notification(title, options)
         使用 {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "notificationclick")}} 事件中的 `event.action` 构建适当的响应。
 
     - `silent` {{optional_inline}}
-      - : 一个布尔值，指定通知是否静音（不发出声音或振动），无论设备设置如何。默认值为 `null`。如果被设置为 `true`，那么不能同时存在 `vibrate` 参数。
+      - : 一个布尔值，指定通知是否静音（不发出声音或振动），无论设备设置如何。默认值 `null` 表示使用设备默认值。如果被设置为 `true`，那么不能同时存在 `vibrate` 参数。
 
 ### 返回值
 
@@ -84,11 +84,11 @@ new Notification(title, options)
 
 ## 示例
 
-在我们的 [`Emogotchi` 演示](https://chrisdavidmills.github.io/emogotchi/)（[查看源代码](https://github.com/chrisdavidmills/emogotchi)）中，当我们想要触发通知时，我们运行 `spawnNotification()` 函数。该函数传递参数来指定我们想要的正文、图标和标题，然后它创建必要的 `options` 对象并使用 `Notification()` 构造函数触发通知。
+这是一个最基本的示例，仅在已授予权限时才显示通知。有关更完整的示例，请参阅 {{domxref("Notification")}} 页面。
 
 ```js
-function spawnNotification(body, icon, title) {
-  const notification = new Notification(title, { body, icon });
+if (Notification.permission === "granted") {
+  const notification = new Notification("你好呀！");
 }
 ```
 

@@ -2,20 +2,21 @@
 title: Notification：requestPermission() 静态方法
 slug: Web/API/Notification/requestPermission_static
 l10n:
-  sourceCommit: eb61adfd5ca85cd5cb2143353f82fe0520a9c66e
+  sourceCommit: 1d32183ba01cac6355135962686935e092f0251b
 ---
 
 {{APIRef("Web Notifications")}}{{securecontext_header}}
 
 {{domxref("Notification")}} 接口的 **`requestPermission()`** 静态方法向用户为当前来源请求显示通知的权限。
 
+该方法返回一个 {{jsxref("Promise")}}，该字符串表示是否授予或拒绝权限。
+
 ## 语法
 
 ```js-nolint
-// 最新规范已将此方法更新为基于 promise 的语法，其工作方式如下：
 Notification.requestPermission()
 
-// 以前，语法是基于一个简单的回调函数；此版本现已弃用：
+// 弃用的使用回调的语法
 Notification.requestPermission(callback)
 ```
 
@@ -35,6 +36,8 @@ Notification.requestPermission(callback)
 - `default`
   - : 用户决定未知；在这种情况下，应用程序的行为就像权限被“拒绝”一样。
 
+该方法的弃用版本返回 `undefined`。
+
 ## 示例
 
 假设如下基本的 HTML：
@@ -45,6 +48,8 @@ Notification.requestPermission(callback)
 
 可以按如下方式发送通知——这里我们提供了一组相当详细和完整的代码，如果你想首先检查是否支持通知，然后检查是否已授予当前域名发送通知的权限，然后，如果必需的话，在发送通知前请求权限。
 
+请注意，请求应当响应用户交互：下面，该方法在鼠标单击事件处理器中被调用。
+
 ```js
 function notifyMe() {
   if (!("Notification" in window)) {
@@ -71,9 +76,6 @@ function notifyMe() {
 
 我们不再在此页面上展示实时示例，因为 Chrome 和 Firefox 不再允许从跨源 {{htmlelement("iframe")}} 请求通知权限，并且其他浏览器也将效仿。要查看实际示例，请查看我们的[待办事项列表示例](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)（参见[实时运行用例](https://mdn.github.io/dom-examples/to-do-notifications/)）。
 
-> [!NOTE]
-> 在上面的示例中，我们生成通知以响应用户手势（单击按钮）。这不仅仅是最佳实践——你不应该向用户滥发他们不同意的通知——而且未来的浏览器将明确禁止未响应用户手势而触发的通知。例如，Firefox 已经从版本 72 开始这样做了。
-
 ## 规范
 
 {{Specifications}}

@@ -2,7 +2,7 @@
 title: Notification：requireInteraction 属性
 slug: Web/API/Notification/requireInteraction
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
 {{APIRef("Web Notifications")}}{{SecureContext_Header}} {{AvailableInWorkers}}

@@ -2,7 +2,7 @@
 title: Notification：silent 属性
 slug: Web/API/Notification/silent
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: e011d5695b264ced5a3f4bb822ca7904e23b7e83
 ---
 
 {{APIRef("Web Notifications")}}{{SecureContext_Header}} {{AvailableInWorkers}}
@@ -11,7 +11,7 @@ l10n:
 
 ## 值
 
-一个布尔值。默认值是 `false`；设为 `true` 将使通知静音。
+布尔值或 `null`。如果为 `true`，则使通知静音；如果为 `null`，则遵循设备的默认设置。
 
 ## 示例
 

@@ -2,10 +2,10 @@
 title: NotificationEvent：action 属性
 slug: Web/API/NotificationEvent/action
 l10n:
-  sourceCommit: 212e53bbdaf88af59a57ec1f335bde5e828b68c5
+  sourceCommit: 28848ba41c082db2a8c55e85c804bd06363afb57
 ---
 
-{{APIRef("Web Notifications")}}
+{{APIRef("Web Notifications")}}{{AvailableInWorkers("service")}}
 
 {{domxref("NotificationEvent")}} 接口的 **`action`** 只读属性返回用户单击的通知按钮的字符串 ID。如果用户单击通知除操作按钮以外的区域，或者通知没有按钮，则此值返回空字符串。通知 ID 在创建通知期间通过 actions 数组属性设置，并且无法修改（除非通知被替换）。
 

@@ -2,10 +2,10 @@
 title: NotificationEvent
 slug: Web/API/NotificationEvent
 l10n:
-  sourceCommit: 17abe1c7a64248b77998643433cb3285ae937c6e
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
-{{APIRef("Web Notifications")}}
+{{APIRef("Web Notifications")}}{{AvailableInWorkers("service")}}
 
 {{domxref("Notifications API", "", "", "nocode")}} 的 **`NotificationEvent`** 接口表示在 {{domxref("ServiceWorker")}} 的 {{domxref("ServiceWorkerGlobalScope")}} 上触发的通知事件。
 

@@ -2,10 +2,10 @@
 title: NotificationEvent：notification 属性
 slug: Web/API/NotificationEvent/notification
 l10n:
-  sourceCommit: 212e53bbdaf88af59a57ec1f335bde5e828b68c5
+  sourceCommit: 28848ba41c082db2a8c55e85c804bd06363afb57
 ---
 
-{{APIRef("Web Notifications")}}
+{{APIRef("Web Notifications")}}{{AvailableInWorkers("service")}}
 
 {{domxref("NotificationEvent")}} 接口的 **`notification`** 只读属性返回被单击而触发事件的 {{domxref("Notification")}} 实例。{{domxref("Notification")}} 提供对在通知实例化时设置的��多属性的只读访问权限，例如 `tag` 和 `data` 属性，这些属性允许你在通知的 `notificationclick` 事件中延迟使用存储的信息。
 

@@ -2,10 +2,10 @@
 title: NotificationEvent：NotificationEvent() 构造函数
 slug: Web/API/NotificationEvent/NotificationEvent
 l10n:
-  sourceCommit: 312081aabba3885b35a81107b3c2fc53428896c5
+  sourceCommit: 28848ba41c082db2a8c55e85c804bd06363afb57
 ---
 
-{{APIRef("Web Notifications")}}
+{{APIRef("Web Notifications")}}{{AvailableInWorkers("service")}}
 
 **`NotificationEvent()`** 构造函数创建一个新的 {{domxref("NotificationEvent")}} 对象。
 

@@ -2,7 +2,7 @@
 title: Notifications API
 slug: Web/API/Notifications_API
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
 {{DefaultAPISidebar("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}}
@@ -11,7 +11,7 @@ l10n:
 
 ## 概念和用法
 
-在支持该接口的平台上，显示一个系统通知通常涉及两件事。首先，用户需要为当前来源授予权限以显示系统通知，这通常在应用或站点初始化时，使用 {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}} 方法来完成。这应该通过响应用户交互行为来实现，如单击按钮，例如：
+在受支持的平台上，显示系统通知通常涉及两件事。首先，用户需要授予当前来源显示系统通知的权限，这通常在应用或网站初始化时使用 {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}} 方法完成。仅应在处理用户手势（例如处理鼠标点击时）时调用此方法。例如：
 
 ```js
 btn.addEventListener("click", () => {
@@ -20,17 +20,12 @@ btn.addEventListener("click", () => {
 });
 ```
 
-这不仅是最佳实践——你不应该向用户发送他们不同意的通知——并且未来的浏览器将明确禁止未响应用户交互而触发的通知。例如，Firefox 从 72 版本开始就已经这样做了。
-
 这将产生一个请求对话框，内容如下：
 
 ![一个对话框，要求用户允许来自该源的通知。有一些选项可以禁止或允许通知](screen_shot_2019-12-11_at_9.59.14_am.png)
 
 从这里，用户可以选择允许来自此来源的通知或阻止来自此来源的通知。一旦做出选择，该设置通常将持续用于当前会话。
 
-> [!NOTE]
-> 从 Firefox 44 开始，通知（Notification）和推送（[Push](/zh-CN/docs/Web/API/Push_API)）的权限已合并。如果为通知授予权限，推送也将启用。
-
 接下来，使用 {{domxref("Notification.Notification","Notification()")}} 构造方法创建一个新通知。这个函数必须传递一个标题参数，并且可以选择传递一个选项对象来指定选项，例如文本方向、正文、要显示的图标、要播放的通知的声音等等。
 
 此外，Notifications API 规范对 [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) 指定了多个扩展，以允许 Service Worker 发送通知。

@@ -2,7 +2,7 @@
 title: 使用 Notifications API
 slug: Web/API/Notifications_API/Using_the_Notifications_API
 l10n:
-  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
+  sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
 ---
 
 {{DefaultAPISidebar("Web Notifications")}}{{securecontext_header}}
@@ -153,45 +153,57 @@ document.addEventListener("visibilitychange", () => {
 假设有以下基本 HTML：
 
 ```html
-<button>提醒我！</button>
+<button id="notify">提醒我！</button>
+<section id="demo-logs"></section>
+```
+
+```css hidden
+#demo-logs {
+  width: 90%;
+  height: 100px;
+  background-color: #ddd;
+  overflow-x: auto;
+  padding: 10px;
+  margin-top: 10px;
+}
 ```
 
 可以通过这种方式处理多个通��：
 
 ```js
-window.addEventListener("load", () => {
-  const button = document.querySelector("button");
+const demoLogs = document.querySelector("#demo-logs");
 
-  if (window.self !== window.top) {
-    // 确保如果我们的文档位于框架中，我们会让用户首先在自己的选项卡或窗口中打开它。否则，它将无法请求发送通知的权限
-    button.textContent = "查看上面示例代码的实时���行结果";
-    button.addEventListener("click", () => window.open(location.href));
-    return;
-  }
+window.addEventListener("load", () => {
+  const button = document.querySelector("#notify");
 
   button.addEventListener("click", () => {
     if (Notification?.permission === "granted") {
-      // 如果用户同意收到通知让我们尝试发送十个通知
+      demoLogs.innerText += `该网站有显示通知的权限。正在显示通知。\n`;
+      // 如果用户同意接收通知，让我们尝试发送十个通知
       let i = 0;
       // 使用时间间隔以避免某些浏览器（包括 Firefox）在特定时间内出现过多通知时会阻止通知
       const interval = setInterval(() => {
-        // 由于 tag 参数，我们应该只能看到“Hi！9”通知
-        const n = new Notification(`Hi! ${i}`, { tag: "soManyNotification" });
+        // 由于 tag 参数，我们应该只能看到“来自 MDN 的第 9 个你好”通知
+        const n = new Notification(`来自 MDN 的第 9 个你好。`, {
+          tag: "soManyNotification",
+        });
         if (i === 9) {
           clearInterval(interval);
         }
         i++;
       }, 200);
-    } else if (Notification && Notification.permission !== "denied") {
+    } else if (Notification?.permission !== "denied") {
+      demoLogs.innerText += "请求通知许可。\n";
       // 如果用户没有告诉他们是否想要收到通知（注意：由于 Chrome，我们不确定是否设置了权限属性），因此检查“默认”值是不安全的。
       Notification.requestPermission().then((status) => {
         // 如果用户同意
         if (status === "granted") {
+          demoLogs.innerText += "用户授予权限。正在发送通知。\n";
           let i = 0;
           // 使用间隔以避免某些浏览器（包括 Firefox）在特定时间内出现过多通知时会阻止通知
           const interval = setInterval(() => {
-            // 由于 tag 参数，我们应该只能看到“嗨！9”通知
-            const n = new Notification(`嗨！${i}`, {
+            // 由于 tag 参数，我们应该只能看到“来自 MDN 的消息 9。”通知
+            const n = new Notification(`来自 MDN 的消息 ${i}。`, {
               tag: "soManyNotification",
             });
             if (i === 9) {
@@ -201,20 +213,22 @@ window.addEventListener("load", () => {
           }, 200);
         } else {
           // 否则，我们可以回退到常规模式的提醒
-          alert("Hi!");
+          demoLogs.innerText += `用户拒绝了权限请求。\n`;
         }
       });
     } else {
       // 如果用户拒绝收到通知，我们可以回退到常规模式的提醒
-      alert("Hi!");
+      demoLogs.innerText += `该站点没有显示通知的权限。\n`;
     }
   });
 });
 ```
 
 ### 结果
 
-{{ EmbedLiveSample('标签示例', '100%', 30) }}
+{{ EmbedLiveSample('标签示例', '100%', 200) }}
+
+为了测试上述示例，请更改 `https://live.mdnplay.dev` 网站的[发送通知设置](https://support.mozilla.org/zh-CN/kb/firefox-page-info-window#w_permissions)。
 
 ## 参见