ChromeOS从睡眠唤醒时visibilitychange事件失效求助

ChromeOS从睡眠模式唤醒时，visibilitychange事件可能不会按预期触发，这是因为系统唤醒过程中浏览器的可见性状态切换逻辑和Windows、macOS存在差异。可以通过以下方案组合监听来覆盖这种场景：

1. 补充监听focus事件 #

当Chromebook从睡眠唤醒时，浏览器窗口会重新获得焦点，此时focus事件会稳定触发，可结合该事件检测页面激活：

// 在mounted钩子中添加
window.addEventListener('focus', () => {
  if (document.visibilityState === 'visible') {
    console.log('窗口已聚焦且标签页可见');
    this.checkInactivity();
  }
});

2. 监听pageshow事件 #

如果页面在睡眠期间被浏览器冻结，唤醒时可能触发pageshow事件，适合处理页面从冻结状态恢复的场景：

window.addEventListener('pageshow', (event) => {
  // 排除页面从缓存恢复的情况，只处理睡眠唤醒场景
  if (!event.persisted && document.visibilityState === 'visible') {
    console.log('睡眠唤醒后页面已显示');
    this.checkInactivity();
  }
});

3. 组合多事件实现全兼容 #

将visibilitychange、focus和pageshow事件结合，覆盖不同系统下的页面激活场景，同时避免重复触发：

mounted() {
  const handlePageActive = () => {
    if (document.visibilityState === 'visible') {
      console.log('页面已激活');
      this.checkInactivity();
    }
  };

  // 保留原有可见性监听
  document.addEventListener('visibilitychange', handlePageActive);
  // 新增窗口聚焦监听
  window.addEventListener('focus', handlePageActive);
  // 新增页面显示监听
  window.addEventListener('pageshow', handlePageActive);

  // 组件销毁时移除监听，避免内存泄漏
  this.$once('hook:beforeUnmount', () => {
    document.removeEventListener('visibilitychange', handlePageActive);
    window.removeEventListener('focus', handlePageActive);
    window.removeEventListener('pageshow', handlePageActive);
  });
}

额外说明 #

ChromeOS的睡眠机制可能让页面进入后台冻结状态，此时visibilitychange可能不会触发，而focus/pageshow能更可靠地捕获唤醒后的页面激活状态。务必在组件销毁时移除所有事件监听，防止内存泄漏。

内容的提问来源于stack exchange，提问作者kvell support