微信公众号h5更新内容部分手机出现白屏或者旧内容,需要刷新

出现的问题:

  • 大部分苹果手机,部分安卓手机第一次关注公众号时进入页面更新会出现白屏情况,或者内用没有更新,需要用户主动刷新才能解决

为什么会出现和解决方案:

  • 1,一般情况js,css等文件添加版本号或者随机值会解决缓存问题如
    <script src="./test.js?v20210.12.27"></script>
  • 2, 文件名使用hash形式
    <script src="./static/js/chunk-vendors.6b4d5929.js"></script>
  • 3, 在html中添加标签的缓存设置
    //用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

微信浏览器由于js文件有hash,上面用于防止版本更新之后还访问到老的文件。微信缓存了index.html入口文件,导致还访问老版本的js文件。由于老版本被删掉,所以白屏。

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}
参考链接1
参考链接2

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容