微信浏览器开发总结（一）：后退不刷新

1 问题描述：

在微信公众号开发过程中，无论是iOS或者安卓都出现后退不刷新的问题。

2 造成此问题的原因：

页面直接从浏览器缓存中读取。

以下就解决此问题的方法并结合iOS和安卓的兼容性谈谈自己的看法和建议。

3 网上解决此问题的方法：

网上解决此问题的方法建议使用onpageshow事件查看页面是直接从服务器上载入还是从缓存中读取，然后决定是否启动强制刷新。

根据MDN文档的说明，当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)。persisted 属性可以查看页面的读取情况，如下

window.addEventListener('pageshow', function(event) {
    console.log('pageshow:');
    console.log(event.persisted);
});
// event.persisted为true，表示从缓存读取，false表示从服务器返回。

在iOS中，这个值会正常更新，但是在安卓中，persisted一直为false，所以此方法不能完全解决问题。

4 解决后退刷新的两种方法：

1） 使用cookie或者localStorage设置缓存字段

页面A跳转到页面B，页面B设置缓存，后退时读取页面B设置的缓存，并决定是否刷新（刷新之后需要清除缓存，否则将持续一直循环刷新），返回时根据缓存判断是否需要强制刷新。这种方法的局限性：跳转到页面B直接退出，之后再进去页面A时，页面A读取到缓存将导致页面重复加载一次，这样情况下会对页面一些一次弹窗产生影响。

2）在pageshow事件基础上再添加performance.navigation.type加判断（此判断方法为最优），可以查询到页面加载的多种情况。

var TYPE_NAVIGATE = 0, // 当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址，type值为0
	TYPE_RELOAD = 1, // 点击刷新页面按钮或者通过Location.reload()方法显示的页面，type值为1
	TYPE_BACK_FORWARD = 2, // 页面通过历史记录和前进后退访问时。type值为2
	TYPE_RESERVED = 255; // 任何其他方式，type值为255
window.addEventListener('pageshow', () => {
  if (e.persisted || (window.performance && 
    window.performance.navigation.type == TYPE_BACK_FORWARD)) {
    location.reload()
  }
}, false)

踩坑一直未放弃，填坑一直在路上。具有移动端丰富开发经验的同学，请留下你的id，让我关注你。哈哈哈

部分参考自：https://www.jianshu.com/p/24c4162fd610  作者：halapro_liu