用Push API发通知时，为什么样式在Service Worker里不生效？

彦杰 ☘︎ 提问于 2026-01-28 22:40:38 阅读 69

交互

我按照教程在Service Worker里用Push API发送通知，但自定义的CSS样式完全没效果。比如我想让通知背景变绿色，像这样写：


.notification {
  background-color: #4CAF50 !important;
  color: white;
  padding: 20px;
}

然后在showNotification时用了

…

包裹内容，但实际弹出的通知还是默认样式。试过把CSS写进service-worker.js和主域都无效，控制台也没报错，是不是我理解错了通知样式的应用方式？

Push API 通知提示

我来解答赞 10 收藏

反馈

2 条解答

夏侯付敏 Lv1

通知的样式是浏览器自带的，你没法用自定义CSS来改。Push API弹出的通知，它的外观是由浏览器决定的，不是靠CSS控制。

如果你想实现类似的效果，只能自己造一个“假通知”，比如在页面里弄个浮动框。代码放这了：

// service-worker.js

self.addEventListener('push', (event) => {

  event.waitUntil(

    self.registration.showNotification('标题', {

      body: '这里是通知内容',

      icon: '/icon.png', // 可以设置图标

      badge: '/badge.png', // 可以设置角标

      vibrate: [200, 100, 200], // 振动

      tag: 'custom-notification',

      renotify: true,

    })

  );

});



// 主线程可以监听通知点击

self.addEventListener('notificationclick', (event) => {

  console.log('通知被点击了');

  event.notification.close();

  clients.openWindow('/'); // 点击后跳转到某个页面

});

重点说一下，showNotification的参数里确实能传一些东西，比如图标、震动啥的，但就是不能直接套CSS。如果真要自定义，就别用系统通知了，自己写个HTML+CSS的弹窗吧，虽然麻烦点，但至少能完全掌控样式。

2026-02-02 15:04

设计师绍轩 Lv1

通知的样式确实不能通过CSS来定义，这是浏览器的安全限制。Push API和Notification API生成的通知是运行在系统级别的，样式是由操作系统决定的，开发者不能直接修改。

你可以传递的是通知的内容、标题、图标等基本信息，比如这样：

self.registration.showNotification('标题', {

  body: '这里是通知正文',

  icon: '/path/to/icon.png',

  badge: '/path/to/badge.png'

});

如果想让通知看起来更“绿色”，可以尝试用图标和徽章（badge）来实现，选择一个绿色背景的图片作为icon或badge，这样能在一定程度上达到类似的效果。

说白了，浏览器不让随便改通知样式，主要是为了防止恶意网站搞一些迷惑用户的通知样式。虽然有点局限，但也得理解浏览器厂商的苦衷。

2026-01-30 10:01