微信h5页面缓存

前言

移动端开发中，经常会碰到微信缓存的问题，总体感觉而言，有太大的无可奈何，但是问题总归是要解决的。

先说说之前开发的问题

由于之前无论是公众号还是微信分享链接，都是经过充分测试后发布上线的，上线后即使更改了，也能在较快的时间内更新。所以对微信这块一直模棱两可的状态，没有从根本上解决这个缓存的问题。但是这次的需求不同，产品由于某个图片上的文字修改（仅仅一个数字的修改），等ui把图片发过来，然后上传到服务器上后，还是跟之前一样，也期待着资源会自动更新。

来看看现在的效果：

1. chrome浏览器刷新后得到最新图片；
2. 我自己的华为手机微信上刷新页面后得到最新图片；
3. 将链接分享给其他同事，打开后图片是最新的；
4. ios上的微信上链接刷新了图片也不更新，用手机浏览器打开是最新图片；

咋眼一看，明显存在缓存问题，并且刷新只对部分浏览器和设备有效。

没办法，继续折腾，网上一番搜索后，得到的办法是：

1. 对js、css、html、图片等资源添加时间戳/版本号，例如：
   index.js?v=20190507；
   index.js?timetamp=(new Date()).getTime()
2. 文件名采用hash值得方式（通常采用md5加密）
   index-72c58a499f4c.js;

因为我的分享页面是在一整个项目中的，默认就是采用的第一种方案，所以我直接修改了图片的名称，打包编译后上传js文件到服务器，得到的效果是：

1. chrome浏览器刷新后得到最新图片；
2. android微信和手机浏览器打开链接均已更新；
3. 将链接分享给其他同事，打开后图片是最新的；
4. ios上的微信上链接刷新后更新，用手机浏览器打开是最新图片；
5. 企业微信上出了问题，图片资源依然是之前的
6. 有部分用户反馈还是没有更新，但是具体设备不知道

为了解决这个顽固的bug，探究产生的根本原因，我先将页面下线了，（由于我们的分享链接还处于内部发布，还未对外公布，这么干的风险也是不小的），因为服务器设置了cdn缓存，时长为2分钟，所以开始下线后一般的设备，在5分钟以内基本都打不开了，但是企业微信到5分钟以后刷新还能打开页面，后面时间更久了才不能打开。于是我重新上传了页面，之前的问题基本都解决了。

虽然上面解决了问题，但是避免不了下次还要进行同样的操作，所以问题的根本原因还是需要找到。

分析上面的过程，即使采用了链接后面加版本号这种方式，由于首页的地址无法修改（已经发布到内部了，不能去修改），所以入口文件被缓存在了企业微信本地，到后面删除文件后，当cdn的缓存失效后页面才被更新，所以根本原因是页面的缓存策略问题。

根本解决办法

直到看到了这篇文章

链接: 微信h5缓存-李子博客.
要想解决这个问题，根本原因还是得从服务器下手，首先了解几个概念：

浏览器的缓存机制


链接: 浏览器的缓存机制.

所以需要从服务器的角度来设置，因为我们使用的oss ，所以在直接给对应资源设置header即可。

配置完这个头部缓存设置，服务器资源更新时才有策略缓存，实现了资源更新，页面更新。