React移动端适配：Safari切换应用时应监听什么事件？

一、适配iOS Safari应用切换的监听事件 #

在iOS Safari中，仅依赖visibilitychange无法覆盖切换到其他应用或回到主屏幕再返回的场景，需要补充监听以下事件：

• pageshow：页面从后台缓存恢复显示（如从其他应用切回）时触发
• pagehide：页面被隐藏（如切换到其他应用或主屏幕）时触发
• webkitvisibilitychange：部分旧版iOS Safari需要的前缀兼容事件

修改后的useTabVisible Hook代码如下：

import { useEffect, useState } from "react";
import usePrevious from "../usePrevious";

const useTabVisible = (reconnectedCallback: () => void) => {
  const [visible, setVisible] = useState<boolean>(document.visibilityState === "visible");
  const prevVisible = usePrevious(visible);

  const updateVisibleState = () => {
    setVisible(document.visibilityState === "visible");
  };

  useEffect(() => {
    // 标准可见性变化事件
    window.addEventListener("visibilitychange", updateVisibleState);
    // iOS Safari兼容事件
    window.addEventListener("webkitvisibilitychange", updateVisibleState);
    // 页面从后台恢复显示事件
    window.addEventListener("pageshow", updateVisibleState);
    // 页面进入后台事件
    window.addEventListener("pagehide", updateVisibleState);

    return () => {
      window.removeEventListener("visibilitychange", updateVisibleState);
      window.removeEventListener("webkitvisibilitychange", updateVisibleState);
      window.removeEventListener("pageshow", updateVisibleState);
      window.removeEventListener("pagehide", updateVisibleState);
    };
  }, []);

  useEffect(() => {
    if (prevVisible === false && visible) {
      reconnectedCallback();
    }
  }, [prevVisible, reconnectedCallback, visible]);
};

export default useTabVisible;

说明：

• 初始化visible时直接设置当前页面可见状态，避免初始值为undefined导致的判断误差
• 统一用updateVisibleState函数处理所有状态更新逻辑，减少重复代码
• 多事件监听确保覆盖iOS Safari下的各种应用切换场景

二、网站长时间闲置的术语 #

网站/应用处于长时间无用户交互的状态，专业术语称为用户闲置（User Idle），对应的Web标准API是Idle Detection API，用于检测用户一段时间内是否有键盘、鼠标或触摸交互。

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