文章介绍了通过改变网页的Favicon（浏览器标签页上的小图标）来监控长时间运行的进程的技术。Raymond Camden在其博客中分享了这个有趣的发现，使用JavaScript动态更改Favicon可以为长时间运行的进程提供实时用户反馈，增强用户体验。文章提供了技术实现方法、用户体验效果、代码示例以及该技术在行业中的应用和未来趋势。
通过简单的DOM操作即可更改Favicon。例如，使用document.querySelector('link[rel="icon"]').href = 'some new url';可以将Favicon替换为另一个图标。在实际应用中，开发者可以在进程开始时更改Favicon，并在进程结束时恢复为默认图标。
用户无需刷新页面或查看控制台日志，即可通过Favicon的变化直观地了解当前页面的状态。这种反馈机制尤其适用于需要长时间等待的任务，如数据处理、文件上传等。
这种技术可以广泛应用于各种Web应用中，尤其是那些需要长时间处理任务的应用，如在线编辑器、数据分析工具等。开发者可以通过自定义Favicon的变化来提供更丰富的用户反馈。
随着Web应用的复杂性增加，用户对实时反馈的需求也在增加。动态Favicon技术可能会成为一种标准化的用户体验设计模式，并可能会有更多的库或框架专门用于简化Favicon的动态管理。
作者：@Raymond Camden
原文：https://www.raymondcamden.com/2024/11/25/using-your-favicon-for-monitoring-long-processes
背景
Raymond Camden 在其博客中分享了一个有趣的发现：通过改变网页的 Favicon（浏览器标签页上的小图标）来监控长时间运行的进程。他在使用 Google Colab 进行测试时注意到，当笔记本开始处理数据时，Favicon 会发生变化，从而提供了一种简单而有效的用户反馈机制。
处理之前，图标看起来是这样：
启动工作流之后，图标会变成这样：
要点
通过 JavaScript 动态更改 Favicon，可以为长时间运行的进程提供实时的用户反馈，增强用户体验。
分析
技术实现
使用简单的 DOM 操作即可更改 Favicon。例如，通过
document.querySelector('link[rel="icon"]').href = 'some new url';
可以轻松地将 Favicon 替换为另一个图标。
在实际应用中，开发者可以在进程开始时将 Favicon 更改为 “工作” 状态的图标，并在进程结束时恢复为默认图标。
用户体验
代码示例
Raymond Camden 在博客中提供了一个简单的 JavaScript 代码示例，展示了如何在按钮点击后启动一个 5 秒的延迟进程，并在进程开始和结束时分别更改 Favicon。
document.addEventListener('DOMContentLoaded', init, false);
let $button;
const working_icon = 'https://cdn.glitch.global/62fb94fd-9b8f-48e0-b37c-99a051fc9fd0/favicon_working.ico?v=1732549929944';
const idle_icon = document.querySelector('link[rel="icon"]').href;
async function init() {
$button = document.querySelector('button');
$button.addEventListener('click', doSlow, false);
}
async function doSlow() {
console.log('进程开始');
$button.setAttribute('disabled', 'disabled');
document.querySelector('link[rel="icon"]').href = working_icon;
await delay(5);
console.log('进程完成');
$button.removeAttribute('disabled', 'disabled');
document.querySelector('link[rel="icon"]').href = idle_icon;
}
async function delay(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}
