微信浏览器开发总结(一):后退不刷新

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

你可能感兴趣的:(微信浏览器开发总结(一):后退不刷新)