【早阅】使用 Favicon 监控长时间进程

前端早读课 · 公众号 · 前端 · 2024-12-01 08:00

正文

作者：@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 更改为 “工作” 状态的图标，并在进程结束时恢复为默认图标。

用户体验

用户无需刷新页面或查看控制台日志，即可通过 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();
     }, x * 1000);
   });
 }

演示地址：https://gamy-lying-stork.glitch.me/

示例代码还展示了如何禁用按钮以防止用户重复触发进程，这是良好的用户体验设计。

影响

行业应用

这种技术可以广泛应用于各种 Web 应用中，尤其是那些需要长时间处理任务的应用，如在线编辑器、数据分析工具等。
开发者可以通过自定义 Favicon 的变化来提供更丰富的用户反馈，例如进度条、状态指示等。

未来趋势

随着 Web 应用的复杂性增加，用户对实时反馈的需求也在增加。动态 Favicon 技术可能会成为一种标准化的用户体验设计模式。
未来可能会出现更多的库或框架，专门用于简化 Favicon 的动态管理，从而进一步推动这一技术的发展。

结论

通过动态更改 Favicon 来监控长时间运行的进程，不仅技术实现简单，而且能够显著提升用户体验。这一技术有望在未来的 Web 应用中得到更广泛的应用，成为一种标准化的用户反馈机制。开发者应考虑将其纳入自己的应用设计中，以提供更直观、更友好的用户界面。

5 分钟技术速览：了解技术资讯的一种方式。
🚀可直接通过阅读原文了解详细内容。