如何为网站添加推送通知？Chrome弹窗代码无法运行求助

看起来你的代码有几个小问题导致它无法正常运行，我帮你梳理一下并给出修复后的版本：

1. 语法错误：函数未闭合 #

你的displayNotification函数最后少了一个闭合的}，这会直接导致代码无法被浏览器正确解析执行。

2. 浏览器的通知权限限制 #

Chrome现在有严格的权限规则：通知必须由用户主动交互触发（比如点击按钮、链接），不能在页面加载时自动请求权限或弹出通知，否则会被浏览器直接拦截。所以你需要把权限请求和通知显示绑定到一个用户操作上，比如一个专门的"开启通知"按钮。

3. 通知构造函数的细节 #

通知标题最好保持完整，另外如果需要更友好的提示，可以传入第二个参数（options对象），补充正文、图标等信息，提升用户体验。

修复后的完整代码示例 #

// 等待页面DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 绑定按钮点击事件（先在页面里加一个id为request-notify-btn的按钮）
  document.getElementById('request-notify-btn').addEventListener('click', function() {
    // 请求通知权限
    Notification.requestPermission(function(status) {
      console.log('Notification permission status:', status);
      // 如果权限已授予，直接触发通知
      if (status === 'granted') {
        displayNotification();
      } else if (status === 'denied') {
        alert('你拒绝了通知权限，后续无法收到提醒哦，可以去浏览器设置里开启');
      }
    });
  });

  function displayNotification() {
    if (Notification.permission === "granted") {
      // 隐藏指定元素（确保页面里存在#notification-head这个元素）
      document.getElementById('notification-head').style.display = 'none';
      // 创建完整的通知
      const notify = new Notification("提醒：添加你的结果", {
        body: "别忘了在个人中心添加最新的结果哦～",
        icon: "/path/to/your/icon.png" // 可选，替换成你的网站图标路径
      });
      
      // 可选：点击通知时跳转到添加结果的页面
      notify.onclick = function() {
        window.focus();
        window.location.href = "/add-result"; // 替换成你的目标页面路径
      };
    }
  }
});

额外注意事项 #

• 确保你的网站是HTTPS协议（localhost开发环境除外），Chrome只允许HTTPS网站使用通知API。
• 如果你习惯用jQuery，把原生DOM操作换成jQuery写法即可，比如$('#request-notify-btn').click(...)和$('#notification-head').hide()，前提是页面已经加载了jQuery库。
• 如果用户选择了"默认"权限（未明确允许或拒绝），后续可以再次引导用户触发权限请求。

内容的提问来源于stack exchange，提问作者Jessica Byers