Chrome无图标Web Push通知空白空间消除方案咨询

那个空白区域其实是浏览器为通知图标预留的默认位置——哪怕你没设置图标，浏览器也会留着这块空间，导致内容没法填满整个通知宽度。这里有两个实用的解决办法：

• 方法一：使用透明图标文件
  制作一个符合Web Push要求的透明PNG图标（推荐尺寸192x192px，适配不同设备），然后在你的通知配置里添加icon字段指向这个文件：

  {
    "title": "Example notification",
    "options": {
      "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque ligula velit, in luctus sem varius eu. Maecenas efficitur sem in maximus",
      "icon": "/assets/transparent-notification-icon.png"
    }
  }
  

  这样浏览器会加载这个透明图标，既占据了预留的图标位置，又不会显示任何内容，通知正文就能填满整个宽度了。

• 方法二：使用内嵌的透明Data URI
  如果你不想额外维护一个图标文件，可以直接用1x1的透明PNG的base64编码作为icon的值，这样不需要额外请求：

  {
    "title": "Example notification",
    "options": {
      "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque ligula velit, in luctus sem varius eu. Maecenas efficitur sem in maximus",
      "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
    }
  }
  

需要注意的是，不同浏览器对通知的渲染逻辑略有差异，但这两种方法在Chrome、Firefox等主流浏览器里都能有效消除空白区域。

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