【长期】微信浏览器相关兼容性问题

zhongxia245 commented 5 years ago

做H5页面，最经常的投放渠道就是自己 APP 的 Webview 和微信渠道了，微信浏览器呢，又存在一些兼容性问题，需要注意下。这里记录一下微信浏览器相关的兼容性问题。

zhongxia245 commented 5 years ago

2019-08-12 15:31:16

微信浏览器页面返回不刷新的问题

现象

业务流程如下：下单页面a => 支付页面b （第三方） => 支付成功，返回下单页面a ，a 根据接口返回数据，更改订单状态。

存在的问题？因为支付页面 b 使用 history.go(-n) (n动态计算出来的) 的方式返回跳转支付的那个页面。

返回页面 a 后，发现订单状态还是未支付状态。原因是微信浏览器缓存问题，导致页面没有刷新

问题原因

因为微信内置的 webview 做了缓存的处理（IOS，Android 缓存的效果还不一样）。

没有找到微信浏览器具体的缓存机制是什么样的

测试 DEMO地址：https://wechat-history-demo.izhongxia.now.sh/ 但是经一番测试发现以下结论（测试机型较少，不保证所有机型都这样）

方式	IOS	Android
history.go / history.back	不执行 JS，因此也不重新请求接口	执行 JS，但GET 接口被缓存
location.replace	执行 JS，接口没有缓存	执行 JS，接口没有缓存

微信版本 7.0.5 IOS 测试机型： Iphone7 / 12.3.1 Android 测试机型：一加手机，型号忘记了

解决方案

使用 location.replace 代替 history.back 和 history.go 。

如果是物理按键的返回，目前没有想到好的办法，有待研究下

zhongxia245 commented 5 years ago

解决微信浏览器缓存问题

现象

用户打开页面，看到的还是老版本的页面内容

原因

因为微信浏览器缓存的问题，因此用户再次打开页面，加载的还是早期缓存下来的js 和 css。（这里可能代码报错，因为数据接口返回数据变了）

解决方案

给静态资源文件名加上 hash 值
html 文件也可能被缓存，因此需要在 nginx 里面对 html 文件加上不可被缓存 {expires-1;}的配置

这篇文章写了很多尝试后不可行的点子，以及最终的解决方案，有兴趣可以看下《简书-我想转行之----微信浏览器缓存》

zhongxia245 commented 5 years ago

android 微信浏览器内 location.reload 缓存问题

场景是这样的，调用接口后刷新页面，使用 location.reload() 页面。在 android 微信浏览器内，虽然页面刷新了，但是 JS 代码不重新执行。猜测是微信缓存问题，经常一段查找，找到下面这个解决方案。

在 android vivo 手机内测试过，没有问题， IOS微信浏览器本身没问题，不做处理

/**
 * 页面刷新
 * FIX： android 微信浏览器内，location.reload 不起作用
 */
export const reloadPage = () => {
  if (is.android() && INAPP.weixin) {
    let href = window.location.pathname + window.location.search
    let hasQuery = href.indexOf('?') > 0
    href += (hasQuery ? '&' : '?') + 't=' + new Date().getTime()
    href += window.location.hash
    window.location.replace(href)
  } else {
    window.location.reload()
  }
}

zhongxia245 / work-faq