Visibility.js在iOS长时间后台挂起后不触发状态变更问题咨询

问题根因 #

• iOS Safari 存在页面休眠机制，当网页在后台驻留超过一定时长（通常是10-15分钟以上），JS线程会被完全冻结，此时visibilitychange事件不会被录入事件队列，从后台恢复时也不会触发回调
• 长时间后台的页面恢复时，大概率是从Safari的往返缓存（bfcache）中直接读取快照，之前绑定的事件监听器可能出现失效情况
• 你当前代码中把initialTime存在useEffect的闭包中，页面如果被系统轻量回收再恢复，闭包内的变量值会重置，时间比对逻辑直接失效
• 现有实现未做时间差阈值判断，只要切回页面就会执行更新，不符合最初的5分钟间隔才更新的需求

解决方案 #

按以下步骤修改即可覆盖iOS长时间后台的场景：

1. 额外监听pageshow事件，该事件在页面从bfcache恢复时一定会触发，优先级高于visibilitychange
2. 把切后台的时间戳存在localStorage做持久化存储，避免闭包变量丢失导致逻辑失效
3. 事件触发时优先做时间差判断，符合阈值再执行更新逻辑，不用完全依赖visibility.js的状态判断

修改后的代码示例：

useEffect(() => {
  const LIMIT = 5 * 60 // 5分钟阈值
  const STORAGE_KEY = 'page_hide_time'

  // 核心更新判断逻辑
  const checkNeedUpdate = () => {
    const hideTime = Number(localStorage.getItem(STORAGE_KEY))
    if (!hideTime) return
    const currentTime = Date.now() / 1000
    if (currentTime - hideTime > LIMIT) {
      updatePage()
      localStorage.removeItem(STORAGE_KEY)
    }
  }

  // visibilitychange监听
  const visibilityListener = Visibility.change(function () {
    if (Visibility.hidden()) {
      localStorage.setItem(STORAGE_KEY, String(Date.now() / 1000))
    } else {
      checkNeedUpdate()
    }
  })

  // pageshow监听，兼容iOS后台恢复场景
  const pageShowListener = () => {
    checkNeedUpdate()
  }
  window.addEventListener('pageshow', pageShowListener)

  return () => {
    Visibility.unbind(visibilityListener)
    window.removeEventListener('pageshow', pageShowListener)
    localStorage.removeItem(STORAGE_KEY)
  }
}, [])

额外适配建议 #

• 如果还是有极低概率不触发的情况，可以在页面获得焦点的focus事件中也加一次checkNeedUpdate调用，做三重兜底
• iOS 14.x版本的Safari对visibility API的实现本身存在bug，部分场景下Visibility.hidden()的返回值会滞后，直接用持久化的时间戳做判断可靠性更高

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