javascript - 窗口最小化时提醒用户浏览器内事件——除了 html5 通知

Question

我有一个要求，即使窗口最小化，我们也需要提醒用户浏览器中发生的某些事件。在浏览器中，我们使用来自 toastr 的 toast，如果用户已经在浏览器窗口中，这将非常有用。我们也有 html5 通知，所以在这种情况下这不是问题，但许多用户不一定会启用它。

如果窗口最小化，如果 Windows 中的浏览器任务栏项目开始闪烁或在 Mac 上弹跳，那就太棒了。当事件发生时，我试图做一个window.focus()for ，但这似乎没有做任何事情。

Answer 1

现代浏览器实现了通知 API。这是一个例子：

(function() {
  var button, output;

  function scheduleNotifyTheUser() {
    output.innerHTML = "Stand by…";
    setTimeout(notifyTheUser, 1000);
  }
  
  function notifyTheUser() {
    output.innerHTML = "Ding! You have a message!";
    new Notification("Something Happened", {
      body: "You should totally check this out!"
    });
  }
  
  document.addEventListener("DOMContentLoaded", function() {
    button = document.getElementById("gobtn");
    output = document.getElementById("output");
    output.innerHTML = "Requesting permission…";
    Notification.requestPermission(function(permission) {
      if (permission !== "granted") {
        output.innerHTML = "Notifications disabled.";
        return;
      }
      button.addEventListener("click", scheduleNotifyTheUser);
      output.innerHTML = "Ready.";
    });
  });
})();

<button id="gobtn">Make something happen in one second from now</button>
<div id="output"></div>