APP 内嵌H5, H5页面可见性改变事件 : visibilitychange

经过和APP同时沟通可以确定, 两种情况:

1. 原生入口–>H5–>返回原生;
   这个情况下,原生会销毁H5的webview这种情况;
2. 原生入口–>H5–>打开新的原生(如登录);
   这个情况下,webview’会缓存,只能使用相关回调(如登陆后的回调;
3. 原生入口–>H5–>第三方网站(如支付)
   这个情况下,webview’会缓存

对于上述1和3的情况, 可以监听路由变化如:beforeRouteEnter进行逻辑处理, 亲测有效;

• 摘要:

本文主要描述的是本人在开发过程中遇到的问题, 以及如何利用 visibilitychange 解决的相关记录。

visibilitychange 事件, 简单的说就是 document 对象绑定的一个方法, 在H5页面 隐藏或者显示 的时候触发。

• 遇到的问题(H5, 指的是Vue的页面)

前景: APP 内嵌 H5 活动页面, 入口在原生, 活动页面有登陆状态的判断逻辑, 登陆为 APP 原生登陆, 登陆成功返回该活动页面;----- 流程图如下:

1. 问题: 未登录进入时, 个人积分不展示, 原生登陆成功后返回该页面, 页面数据没有更新,还是未登录状态;经调试发现, 页面所有的钩子函数都不执行;`
2. 猜测: APP内部打开H5, 然后离开H5跳转回原生页面, 因为(我们)APP 打开H5的webview是不销毁的(webview可以理解为一个容器,APP用来打开H5页面的,我的理解是类似于浏览器的一个窗口); 所以很可能是APP首次进入,就把H5页面包括资源全部缓存下来,下次在进入这个H5的时候,数据就不会更新了,使用的是之前缓存的数据.`

• 验证

1. 网上查阅资料得到的一个方法, 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"> <!-- 立即过期,也就是重新请求资源 -->

---

2. 偶然发现 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);
 }

3. 因为使用的是 webViewJavascriptBridge 和APP协作开发, 所以可以 H5这边注册一个登陆成功的方法, 让APP调用, 然后回调里 执行 更新数据操作就可以了.

注意****2. 3 两种方式, 虽然可以成功解决问题, 但是(本人)安卓会出现大概 1s 左右的白屏, 目前还没有解决.希望有大佬可以帮忙指点一下.

本文参考来自: https://www.jianshu.com/p/e905584f8ed2

---

• 学习使我快乐