如何监听Android/iOS桌面PWA滑走销毁事件并执行清理？

这个问题问得好！在Android和iOS上捕获PWA被滑走（即进程被杀死）的时机确实有点棘手，因为不同平台对Web应用的后台限制不一样，但还是有一些方案可以尝试，另外还有替代思路能帮你实现「应用销毁时重置localStorage」的需求：

针对Android的尝试方案 #

Android对PWA的后台处理相对宽松一点，部分场景下可以通过页面状态事件来触发清理逻辑：

• 监听visibilitychange事件：当用户准备滑走应用时，页面会先进入hidden状态，这时候系统会给一小段时间执行同步任务（异步任务大概率会被中断）。你可以在这里直接重置localStorage：

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 同步执行重置操作
    localStorage.clear();
    // 或者只清除特定字段：localStorage.removeItem('target-key');
  }
});

• 补充pagehide事件：部分Android设备上，PWA被杀死前可能会触发这个事件，你可以和visibilitychange一起监听，提高触发概率：

window.addEventListener('pagehide', () => {
  localStorage.clear();
});

注意：这两个事件都不能保证100%触发，比如系统资源紧张时可能直接终止进程，不给回调时间。

针对iOS的间接处理方案 #

iOS对PWA的后台限制非常严格，当用户滑走应用时，系统会直接终止进程，几乎不会触发任何前端事件。这种情况下，只能通过下次启动时的状态判断来间接实现需求：

1. 应用每次活跃时记录当前时间戳
2. 下次启动时，对比上次活跃时间和当前时间，如果间隔超过某个阈值（比如30分钟），就判定为异常退出，执行重置操作

// 应用启动时检查
window.addEventListener('load', () => {
  const lastActiveTime = localStorage.getItem('last-active-time');
  const now = Date.now();
  // 自定义阈值，比如超过30分钟未活跃则重置
  const threshold = 30 * 60 * 1000;
  
  if (lastActiveTime && now - parseInt(lastActiveTime) > threshold) {
    localStorage.clear();
  }
  
  // 更新最新活跃时间
  localStorage.setItem('last-active-time', now.toString());
});

// 页面从隐藏变为可见时，更新活跃时间
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    localStorage.setItem('last-active-time', Date.now().toString());
  }
});

这个方案的核心是通过时间差判断是否是异常退出，虽然不是实时在销毁时执行，但能满足大部分场景下的重置需求。

更简单的替代思路：用sessionStorage代替localStorage #

如果你的数据不需要跨会话持久化，那sessionStorage简直是完美解决方案！它的特性就是会话结束（应用被杀死、浏览器关闭）时自动清空，完全不需要手动监听事件：

// 用sessionStorage替代localStorage
sessionStorage.setItem('your-data', 'value');
// 获取数据
const data = sessionStorage.getItem('your-data');
// 不需要手动清空，应用销毁时自动消失

唯一的缺点是sessionStorage的存储空间比localStorage小（一般是5MB左右），且仅在当前会话有效，如果你需要跨会话保留数据，这个方法就不适用了。

总结 #

• 纯Web方案下，没有100%跨平台可靠的方法捕获PWA被杀死的事件，因为平台限制很大
• Android可以尝试visibilitychange+pagehide的组合，同步执行清理逻辑，但无法保证100%触发
• iOS只能通过下次启动时的时间差判断来间接处理
• 最省心的方案是用sessionStorage替代localStorage，自动实现销毁时清空

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