在浏览一个博客的时候发现了一个很有趣的点，当我们在浏览的时候，title 就是文章的 title；当我们浏览其他 tab 的时候，title 在质问我们去哪里了；当我们再次访问的时候，页面会欢迎我们的回归，除了内容之外给我们带来了更多有趣的东西。
前端的一切要以用户体验为先。 —— 沃·兹基硕德
技术实现
很明显，这里做了两件事情：
- 判断用户是否 foucs 当前页面
- 改变页面的 title
改变title 只要变更 document.title 即可，不再赘述
判断用户是否是否 foucs 当前页面,有两种实现思路，一种是监听 window 的 blur 和 focus；另一个思路是监听页面的可见性变化 visibilitychange
window 的 blur 和 focus
参见： developer.mozilla.org/zh-CN/docs/… 和 developer.mozilla.org/zh-CN/docs/…
window.onblur = () => {
document.title = '失踪了'
};
window.addEventListener('blur', function() {
document.title = '失踪了'
});
window.onfocus = () => {
document.title = '回来啦'
};
window.addEventListener('focus', function() {
document.title = '回来啦'
});
visibilitychange
参见 developer.mozilla.org/zh-CN/docs/…
MDN 上的例子更多考虑了兼容性
document.addEventListener(visibilityChange, () => {
// 可以对 document.visibilityState 进行判断
if (document.visibilityState === 'hidden') {
// TODO
} else if (document.visibilityState == 'visible') {
// TODO
}
// 也可以对 document.hidden 进行判断
if (document.hidden) {
// TODO
} else {
// TODO
}
});
对比
就前文的例子来说，这两种方案都可以实现，而我们在使用时要从具体需求出发，使用更合适的（根据表现，它使用了监听blur的方式）
他们的主要区别MDN中的例子很清晰
Developers have historically used imperfect proxies to detect this. For example, watching for blur and focus events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. The Page Visibility API addresses this.
简单来说，foucs 和 blur 处理的是页面的活动状态；而 visibilitychange 处理的是页面的可见状态，当我们最小化一个浏览器窗口的时候，会触发 visibilitychange 但是没有触发 blur
业务应用
由于当前交互习惯的限制，移动端的浏览器往往会隐藏 title，尽可能多的给用户展示内容，这里主要考虑桌面端页面（包括 iPad Safari）中可能对用户有帮助的场景
- 当页面上有上传下载进度，当用户在页面上的时候，展示普通title，当用户离开当前 tab，可以在 tab 上展示上传/下载进度
- 当页面上有媒体播放，可以给用户一个选择，当离开这个 tab 的时候暂停媒体，特别是视频，可以有效帮助用户悄悄摸鱼不错过内容
- 当页面上有长轮询任务的时候，在我们跳出页面后，如果使用场景允许，可以暂时停止长轮询；如果场景不允许暂停，我们也可以在 title 上给予任务进行状态的提示
- 当页面上有定时循环任务，特别是酷炫动画，离开后暂停当然更合适
如果你的业务中也有类似的需求，不妨试一试～
