经过和APP同时沟通可以确定, 两种情况:
- 原生入口–>H5–>返回原生;
这个情况下,原生会销毁H5的webview这种情况;- 原生入口–>H5–>打开新的原生(如登录);
这个情况下,webview’会缓存,只能使用相关回调(如登陆后的回调;- 原生入口–>H5–>第三方网站(如支付)
这个情况下,webview’会缓存
对于上述1和3的情况, 可以监听路由变化如:beforeRouteEnter进行逻辑处理, 亲测有效;
本文主要描述的是本人在开发过程中遇到的问题, 以及如何利用 visibilitychange
解决的相关记录。
visibilitychange 事件, 简单的说就是 document 对象绑定的一个方法, 在H5页面 隐藏或者显示 的时候触发。
前景: APP 内嵌 H5 活动页面, 入口在原生, 活动页面有登陆状态的判断逻辑, 登陆为 APP 原生登陆, 登陆成功返回该活动页面;
----- 流程图如下:
- 问题: 未登录进入时, 个人积分不展示, 原生登陆成功后返回该页面, 页面数据没有更新,还是未登录状态;经调试发现, 页面所有的钩子函数都不执行;`
- 猜测: APP内部打开H5, 然后离开H5跳转回原生页面, 因为(我们)APP 打开H5的webview是不销毁的(webview可以理解为一个容器,APP用来打开H5页面的,我的理解是类似于浏览器的一个窗口); 所以很可能是APP首次进入,就把H5页面包括资源全部缓存下来,下次在进入这个H5的时候,数据就不会更新了,使用的是之前缓存的数据.`
- 网上查阅资料得到的一个方法, HTML的head总增加三个meta标签:
结果:
IOS生效, android 不生效, 开始怀疑是不是缓存导致的, 为什么安卓不生效, 因为能力有限, 所以还是不太清楚 原因;
`后面的注释, 是我自己的理解`
<meta http-equiv="Pragma" content="no-cache"> <!-- 关闭缓存 -->
<meta http-equiv="Cache-Control" content="no-cache"> <!-- 关闭缓存 -->
<meta http-equiv="Expires" content="0"> <!-- 立即过期,也就是重新请求资源 -->
- 偶然发现 visibilitychange 这个方法, 于是就开始 google, 最终功夫不负有心人;
结果:
完美解决了我的问题, 在document.hidden === false的时候, 我重新请求数据接口,更新数据就可以了
理解:
感觉这种情况, 更像是APP把H5页面后台挂起,(或者通俗说是隐藏掉,用户不可见而已), H5页面还是一直存在, 所以页面不会重新加载, 更别说登陆前后数据变化了.
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
handleVisibilityChange() {
if (document.hidden) { // 页面隐藏
console.log(document.hidden, document.visibilityState) // true 'hidden'
} else { // 页面展示
console.log(document.hidden, document.visibilityState) // false 'visible'
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
- 因为使用的是 webViewJavascriptBridge 和APP协作开发, 所以可以 H5这边注册一个登陆成功的方法, 让APP调用, 然后回调里 执行 更新数据操作就可以了.
注意****2. 3 两种方式, 虽然可以成功解决问题, 但是(本人)安卓会出现大概 1s 左右的白屏, 目前还没有解决.希望有大佬可以帮忙指点一下.
- 学习使我快乐