持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情
缘起
相信开发过移动端的小伙伴肯定被手机原生提供的手势操作折磨过，那感觉真的是不要不要的。
话说事情是这样的，周一上班的早上测试同学急匆匆的跑到我的工位上，急吼吼的跟我喊着：“出bug了，移动端报了个线上bug”。
平地一声雷，惊得我直接蹦起来了。经过跟测试同学的一番拉扯之后，我才弄清了事情的原委。
原来，客户报上来说，通过手势前进、后退这样的操作，会导致用户的积分数量显示异常。
一探究竟
经过我通过查询日志、抓包调试一通操作之后，终于发现了问题所在：原来是通过手势后退的时候，没有触发任何的生命周期，之前在onDidShow钩子中写的重新拉取数据的逻辑也就没有执行了。
猜测可能的原因：通过手势后退的时候，直接从缓存的历史栈中直接拿出页面来，所以不会触发相关的生命周期。
天真的我以为，既然问题已经找到了，那么解决还不是分分钟钟的事情。
艰难的爬坑之旅
初次爬坑
一番百度之后，我信心指数爆棚。
我在网上发现好多人都说可以通过popstate来监听页面是不是返回了，我就单纯的以为这个方法是很ok的。
具体代码如下：
window.addEventListener('popstate', () => {
console.log('页面后退了~');
});
结果一番调试发现，毛都没触发，这个监听事件依然没有执行，并没有出现什么奇迹。
二次尝试
又是一番鸡飞狗跳的百度，最终发现有人描述了原因，还给出了解决方案。
if (UserAgent.env.android) {
try {
window.tbs_bridge.nativeExec('network', 'type', 0, null);
} catch (e) {
console.error(e);
}
}
我再一次的相信了它，然后实际调试之后，发现依然没有卵用。
三探虎穴
迫于客户、产品多方的压力，我只能默默的打开百度继续探索。就在我将要放弃的时候我发现了这个api——pageshow。
当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)
经过一番测试发现，果然可以。但是新的问题出现了，pageshow触发的次数超出预期了，这个应该就是跟官方所说的onload事件触发之后初始化时也会触发。
该如何判断是手势操作呢，还是onload初始化呢？
一番搜索发现有大佬提供了方法：window.performance && window.performance.navigation.type == 2。
不太对呀，vs code怎么提示我这个api废弃了，纳尼？
还好，我还有一手，performance.getEntriesByType("navigation")[0].type === 'back_forward'。
经过一番调试，妥了。
结语
最终，通过在popshow监听事件中，通过判断back_forward来判断页面是后退了，然后通过调用api来获取最新数据了。
万幸，最终问题解决了，又可以开心的摸鱼了。
欢迎小伙伴在下方留言交流。
