Notification API在Firefox显示链接但Chrome显示为纯文本的兼容性问题

安全阿岳

2026-9-24

差异原因

这个表现差异确实是浏览器默认实现导致的：

Chrome以及所有基于Chromium内核的浏览器（Edge、Brave等）为了防范恶意站点滥用通知功能，会强制在通知底部追加显示通知的发起站点地址，该逻辑是浏览器层面的默认规则，前端代码无法直接移除这块展示内容。
Firefox的通知设计逻辑不同，默认不会在通知正文中额外展示源站地址，仅在通知弹窗头部、右键菜单中保留来源信息，所以不会出现你观察到的地址链接。

跨浏览器统一处理方案

目前无法做到100%视觉表现完全一致，因为Chrome的源站展示逻辑是强制的，没有提供官方API可以关闭。但可以通过以下方案尽可能降低不同浏览器的表现差异：

不要使用裸IP地址进行测试，给站点配置规范的域名并启用HTTPS，Chrome展示正式域名的视觉突兀感会远低于IP地址，也更容易获得用户信任。
主动补全Notification的配置参数，丰富通知内容弱化底部地址的存在感，示例代码如下：

function notifyMe() {
  if (!("Notification" in window)) {
    alert("当前浏览器不支持桌面通知");
  } else if (Notification.permission === "granted") {
    // 补充body、icon等配置项
    var notification = new Notification("Hi there!", {
      body: "通知的具体内容说明",
      icon: "/notification-icon.png",
      badge: "/notification-badge.png"
    });
    // 自定义点击跳转逻辑
    notification.onclick = function() {
      window.open("你的目标跳转地址", "_blank");
      this.close();
    }
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      if (permission === "granted") {
        var notification = new Notification("Hi there!", {
          body: "通知的具体内容说明",
          icon: "/notification-icon.png"
        });
      }
    });
  }
}