Chrome书签图标动态变更：Slack未开标签改图标实现及API问询

嘿，这个问题提得真有意思！Slack的这个特性确实很实用，它背后的核心是Service Worker + PWA（渐进式Web应用）能力，结合Chrome对Web标准的支持来实现的，完全不需要依赖DOM加载。

核心原理拆解 #

• 首先，Slack是一个符合PWA标准的网站，当你把它添加到Chrome书签（或者主屏幕）时，Chrome会识别它的manifest.json配置文件，将其作为「可安装的Web应用」处理——这意味着它能在后台保持轻量级的运行状态，不需要打开标签页也能响应事件。
• 当有新消息时，Slack服务器会通过Push API向你的浏览器发送推送通知。这时候，即使没有任何Slack标签页在运行，浏览器的Service Worker（一个独立于页面的后台脚本）会被唤醒，它完全脱离DOM环境，照样能执行逻辑。
• Service Worker被唤醒后，会调用Web标准API（比如navigator.setAppBadge()）或者更新PWA配置里的图标资源，修改应用的显示状态——而Chrome的书签如果关联的是这个PWA，就会同步显示更新后的图标（比如颜色变化、角标提示）。

相关浏览器/Chrome支持的关键能力 #

1. Service Worker API：这是后台运行的核心，允许脚本在页面关闭后依然监听推送、同步等事件，完全不依赖DOM。
2. Push API：让服务器可以主动向浏览器发送消息，触发Service Worker的push事件，实现后台唤醒。
3. Web App Manifest：定义PWA的基础信息（图标、名称、启动方式等），Chrome会根据这个文件管理书签/主屏幕上的应用图标展示。
4. Badge API（navigator.setAppBadge()）：可以给应用图标添加数字角标或者颜色标记，这也是Slack修改书签图标的关键手段之一。

简单梳理实现流程 #

1. 网站先注册Service Worker，确保浏览器能在后台运行它。
2. 用户订阅Push通知，浏览器生成专属推送端点并发送给Slack服务器。
3. 有新消息时，服务器向这个端点推送消息。
4. Chrome唤醒Service Worker，触发push事件。
5. Service Worker在事件处理函数中，调用Badge API或更新图标资源，修改PWA的显示状态。
6. Chrome自动同步这个状态到对应的书签（或主屏幕图标）上。

需要注意的是，这个功能只适用于符合PWA标准的网站——普通静态网站的书签只是单纯的URL指向，没有后台运行能力，也无法触发Service Worker，自然做不到这一点。

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