javascript - 窗口最小化时提醒用户浏览器内事件——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>