使用您的 Favicon 监控长时间进程

A week or so ago, I was doing some tests on Google Colab and noticed something interesting. The notebook I was using was one that took one to two minutes to process. Before I'd start the process, the favicon looked like so:

大约一周前，我在Google Colab上做了一些测试，注意到了一些有趣的事情。我使用的笔记本需要一到两分钟的处理时间。在我开始处理之前，favicon看起来是这样的：

Favicon of an infinity symbol, bright orange color

After kicking off the workflow, the favicon changed like so:

启动工作流程后，favicon 变成了这样：

Favicon of an infinity symbol, dull gray color

To be honest, I had not noticed it earlier, but I only fairly recently started using a somewhat 'slow' notebook so it's possible I just didn't need it before. Realizing how it's being used now, I thought it was an excellent user experience feature and looked into how to use it in my own applications.

说实话，我之前没有注意到，但我最近才开始使用一台有点'慢'的笔记本电脑，所以可能之前我并不需要它。意识到它现在的使用方式后，我认为这是一个很好的用户体验功能，并研究了如何在我自己的应用程序中使用它。

Changing the Favicon

更改 Favicon

Ok, so this part is stupid easy. Assuming you've got a favicon specified:

好吧，这部分非常简单。假设你已经指定了一个 favicon：

<link rel="icon" href="/favicon.ico" />

Then you can use simple DOM manipulation:

然后你可以使用简单的 DOM 操作：

document.querySelector('link[rel="icon"]').href = 'some new url';

This is obvious, I guess? But I tend to only think about DOM manipulation for things that are inside my BODY tags. I've done stuff outside of there before, for example, dynamically adding a <script> tag, and heck, I did a post on a similar topic back in 2010 (forgive the poor formatting, Using JavaScript to update the browser window title when the user is away), but I honestly didn't think it would be this easy.

这显而易见，对吧？但我往往只考虑对 BODY 标签内部的 DOM 操作。我以前也做过外部的事情，例如动态添加一个 <script> 标签，天哪，我在 2010 年还写过一个类似主题的帖子（请原谅糟糕的格式，使用 JavaScript 在用户离开时更新浏览器窗口标题），但老实说，我真的没想到会这么简单。

The Demo!

演示！

I hopped on Glitch to build a quick demo. First, I added a button to a page, and then used a bit of JavaScript such that clicking the button would kick off a five second delayed process:

我跳到Glitch上构建了一个快速演示。首先，我在页面上添加了一个按钮，然后使用了一点JavaScript，使得点击按钮会启动一个五秒钟的延迟过程：

document.addEventListener('DOMContentLoaded', init, false); let $button; async function init() { $button = ...