Chrome网站实现Windows桌面堆叠式横幅通知的技术咨询

你遇到的这个问题其实是Windows系统对桌面横幅通知的默认限制——Chrome作为浏览器，它的通知行为会遵循Windows的通知管理规则：同一应用（这里就是Chrome）的横幅通知默认会自动替换显示最新的那条，只有在操作中心才会保留所有历史通知并堆叠展示。

不过别担心，我们可以通过修改JavaScript代码来绕过这个限制，核心就是给每个通知设置唯一的tag属性。Windows的通知系统会把不同tag的通知视为独立的通知项，这样它们就能在横幅区域同时堆叠显示了。

下面是修改后的代码，我给每个通知添加了独一无二的tag值（这里用时间戳保证唯一性，你也可以用自定义的唯一ID）：

<body>
  <h1>Notification Tester</h1>
  <button id="btn1">Notification 1</button>
  <button id="btn2">Notification 2</button>

  <script>
    // Function to show notifications
    function showNotification(title, body) {
      // Request permission if not already granted
      Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
          // Create a new notification with unique tag
          new Notification(title, {
            body: body,
            icon: "https://static.vecteezy.com/system/resources/previews/030/762/552/non_2x/3d-message-notification-bell-icon-illustration-png.png",
            tag: `notification-${Date.now()}` // 唯一标识，确保每个通知独立
          });
        }
      });
    }

    // Add click event listeners to the buttons
    document.getElementById("btn1").addEventListener("click", () => {
      showNotification("Test 1", "This is test 1 notification");
    });

    document.getElementById("btn2").addEventListener("click", () => {
      showNotification("Test 2", "This is test 2 notification");
    });
  </script>
</body>

另外还有两个小细节需要注意：

• 如果你希望特定组的通知可以互相替换（比如同一个按钮多次点击时，用新通知覆盖旧的横幅通知），只需要给该组通知设置相同的tag即可，操作中心依然会保留历史记录。
• 这个方案依赖浏览器对Notification API的tag属性的正确实现，Chrome在Windows平台上完全支持该特性，你部署在Netlify上的站点可以正常生效。

备注：内容来源于stack exchange，提问作者Nicholas Mott