Chrome 标签页冻结和设置超时/网络工作者

Question

Chrome 79刚刚发布，默认情况下打开了新的标签冻结功能。有谁知道在JavaScript中使用setTimeouts(甚至Web Workers(时可以解决这个问题的方法？

我们运行了一些代码来检查客户端活动，以便在设定的时间后更优雅地超时/注销。不幸的是，当选项卡处于"冻结"状态时，这些都不起作用。

有什么想法吗？

Answer 1

基于年龄生命周期 api，我创建了这个类：

const pageLifecycle = new class PageLifecycle extends EventTarget {
constructor() {
super();
this.state = this.getState();
const fn = () => this.stateChange(this.getState()),
opt = { capture: true },
events = {
pageshow: fn,
focus: fn,
blur: fn,
visibilitychange: fn,
resume: fn,
freeze: () => this.stateChange("frozen"),
pagehide: event => this.stateChange(event.persisted ? "frozen" : "terminated")
};
for (const [event, fn] of Object.entries(events)) window.addEventListener(event, fn, opt);
}
getState() {
return document.visibilityState === "hidden" ? "hidden" : document.hasFocus() ? "active" : "passive";
}
stateChange(nextState) {
if (nextState === this.state) return;
const prevState = this.state;
this.state = nextState;
this.dispatchEvent(Object.assign(new Event("stateChange"), { prevState, state: this.state }));
}
};
//--------
pageLifecycle.addEventListener("stateChange", event => console.log(`State change: ${event.prevState} >>> ${event.state}`));

您可以向其添加事件侦听器(事件：stateChange(，您将获得event.state中的["active", "passive", "hidden", "frozen", "terminated"]之一。检查passive并保存数据。您可以检查event.prevState以使以前的状态确定是否应强制检查后端以查看用户是否仍在登录。