当窗口最小化时，提醒用户浏览器内事件——而不是html5通知

Question

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

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

Answer 1

现代浏览器实现了Notification 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>