Question

我正在尝试创建一个在某些事件发生时显示通知的网站。我已经检查了the MDN page for Notifications并且我编写了一个可以在Firefox Developer Edition 58.0b7中运行的示例，但在Edge 40.15063.674.0和Chrome 62.0.3202.94（在Windows 10中）中有一个奇怪的行为。

以下是一个最低限度的完整可验证示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<body>
  <script>
  function notify(str) {
  if(!("Notification" in window) || Notification.permission === "deneided") {
    return alert(str);
  }
  if (Notification.permission === "granted") {
    return new Notification("TITLE", {body: str});
  }
  Notification.requestPermission().then(perm => {
    console.log("request result", perm);
    console.log("Notification.permission", Notification.permission);
    if (perm === "granted") {
      return new Notification("TITLE", {body: str});
    }
  });
}

notify("test");
  </script>
</body>
</html>

将该代码保存在计算机的文件中，然后使用浏览器将其打开。

在Firefox中，如果您在被问及是否有效时授予权限并显示通知。
在Chrome中，如果您授予权限，则可以在控制台中看到权限请求返回"granted"但Notification.permission仍为“默认”且未显示通知。再次运行notify会导致另一个对话框询问是否有权显示通知。
在Edge中，授予权限后，Notification.permission为granted，但尝试创建新通知会产生UnknownError。

为什么代码在Firefox中运行但在Edge或Chrome中运行？我怎样才能让它至少在Chrome中运行（希望在Edge中）？

Answer 1

您可以按照MDN notification API Docs中的“替代示例：在页面加载时运行”中提供的示例，您可以实现以较少开销显示通知。

使用本地文件尝试下面的代码（此处的代码段将拒绝通知尝试）

在Chrome中，您会在刷新页面后看到Notification.permission变量已更新。

Notification.requestPermission().then(function(result) {
  console.log(result);
});

document.querySelector('#notifyButton').addEventListener('click', showNotification)

function showNotification(){
	console.log('Clicked!!')
	var options = {
	    body: 'this is the body!'
	}
	var n = new Notification('this is the title', options);
}

<input id="notifyButton" type="button" name="notify" value="click for notification">

如何跨浏览器显示通知

1 个答案: