JavaScript实现点击按钮后延迟2小时发送Notification通知

你可以通过setTimeout定时器包裹延迟触发的通知逻辑实现需求，2小时对应的毫秒数为 2 * 60 * 60 * 1000 = 7200000。

修改后的完整代码 #

HTML部分

<button onclick="bell();">发送通知</button>

JS部分

function bell() {
  function notifyMe() {
    if (!("Notification" in window)) {
      alert("当前浏览器不支持系统通知功能");
    }
    else if (Notification.permission === "granted") {
      // 权限已授权，注册定时通知
      scheduleNotify();
    }
    else if (Notification.permission !== 'denied') {
      Notification.requestPermission(function (permission) {
        if (permission === "granted") {
          scheduleNotify();
        }
      });
    }
    
    function scheduleNotify() {
      // 如果你不需要点击后立刻弹出的即时通知，可以删除下面3行代码
      var instantNotification = new Notification('通知已预约', {
        icon: 'blue.svg',
      });
      setTimeout(instantNotification.close.bind(instantNotification), 3000); 

      // 核心逻辑：延迟2小时触发通知
      setTimeout(() => {
        var delayedNotification = new Notification('2小时定时通知', {
          icon: 'blue.svg',
        });      
        delayedNotification.onclick = function () {
          window.open("INDEX.HTML");      
        };
      }, 7200000)
    }
  }
  notifyMe();
}

注意事项 #

• 该方案仅在页面保持打开状态时生效，若用户关闭页面，定时器会被销毁，通知无法触发。如果需要关闭页面仍能触发定时通知，需要使用Service Worker搭配Notification Triggers API实现，该API仅支持部分Chromium内核浏览器。
• 通知需要用户提前授予权限，否则定时结束后也无法弹出通知。

内容的提问来源于stack exchange，提问作者PISHOY MORIS