当用户失去焦点时，将站点选项卡更改为提醒

I recently wrote about the HTML5 Visibility API in Smashing Magazine, showcasing it’s unique ability to detect when a web page is no longer visible to the user. Along with politely shutting down services that are not required when the site is hidden - pausing animations, muting or shutting down videos or audio, and more - it’s nice to remind the user that the page is still around, awaiting their return. Doing so takes just a few lines of JavaScript:

我最近在Smashing Magazine上写了有关HTML5 Visibility API的文章 ，展示了它独特的功能来检测用户何时不再可见网页。 礼貌地关闭隐藏网站时不需要的服务-暂停动画，静音或关闭视频或音频，等等-很高兴提醒用户该页面仍在等待着他们的返回。 这样做只需要几行JavaScript ：

First, let’s say the title of our page is set as usual in HTML:

首先，假设我们的页面标题是在HTML中照常设置的：

<title>Compelling Article - Site.com</title>

We can read and change this with JavaScript when the page loses focus:

当页面失去焦点时，我们可以使用JavaScript进行读取和更改：

var title = document.title,
newTitle = "Remember to read this " + title;
document.addEventListener("visibilitychange", function() {
	document.title = ((document.hidden) ? newTitle : title);
});

title reads the page <title>, newTitle adds a reminder to it, and a ternary operator sets the appropriate version depending on the visibility of the current tab. You can see a version of the same script operating on this article when you turn to another tab or window.

title读取页面<title> ， newTitle添加提醒，三元运算符根据当前选项卡的可见性设置适当的版本。 当您转到另一个选项卡或窗口时，可以看到在本文上运行的同一脚本的版本。

结论 (Conclusion)

This technique will be effective only so long as two things remain true:

该技术只有在满足以下两个条件时才有效：

1. The number of open browser tabs for a user is relatively low. This will allow the document title to be visible at the top of each tab. If the user is anything like your humble author, they may have 30 or more tabs open at a time, reducing visibility to just the favicons. In addition, most mobile users won’t see the tab change at all, unless they’re in browser overview mode.

   用户打开的浏览器选项卡的数量相对较少 。 这将使文档标题在每个选项卡的顶部可见。 如果用户是像您这样谦逊的作者那样的用户，则他们可能一次打开30个或更多选项卡，从而仅使图标图标可见度降低。 另外，除非他们处于浏览器概览模式，否则大多数移动用户根本不会看到选项卡的更改。

2. A small number of sites use this technique. Features like this are akin to an arms race: there’s little advantage if everyone uses the same technique.

   少数站点使用此技术 。 这样的功能类似于军备竞赛：如果每个人都使用相同的技术，则没有什么优势。

It’s important that techniques like this be used tastefully and politely: please don’t contribute to a noisy, pushy web by adding animated titles or favicons.

高雅而礼貌地使用此类技术非常重要：请不要通过添加动画标题或网站图标来创建嘈杂的，棘手的网络。

翻译自: https://thenewcode.com/1001/Change-Site-Tabs-To-Reminders-when-Users-Lose-Focus