手机端如何真正的解决页面缓存问题

问题重现

当我们需要开发手机端页面的时候，不得不在真机中调试
在微信中，可以通过微信提供的设置-通用-存储空间-清理微信(这是ios，android可能略不同)进行页面缓存的清理
在App中，就比较麻烦了，因为App一般不会像微信考虑的那么周全，给你提供清理页面缓存的途径

问题解决

像网上说的一些方法，经本人测试，都是无效的，如给head加meta标签：

<meta http-equiv="pragram" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="0">

自然而然，我们想到给文件加时间戳，如：
- 加时间戳前
```
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <script src="js/test.js"></script> 
</head>  
<body>
    <div class="body"></div>
</body>  
</html>
```
  - 1
  - 2
  - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
- 加时间戳后
```
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <script src="js/test.js?_=1480405186452"></script> 
</head>  
<body>
    <div class="body"></div>
</body>  
</html>
```
  - 1
  - 2
  - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
  这样是可以的，但是请注意，这样只能解决html引入的js或css的缓存问题，html的缓存还是没有解决，也就是说你手机扫码进入页面后，看到的是之前缓存好的【加时间戳前】的html文件，就导致了加的时间戳不生效
为了解决html的缓存问题，我们可以给访问的html链接后面也加上一个时间戳
- 加时间戳前
```
http://v35new.faqrobot.org/robot/app.html
```
  - 1
- 加时间戳后
```
http://v35new.faqrobot.org/robot/app.html?_=1480405186452
```
  - 1
以上2种措施都要执行，才能彻底解决手机端缓存问题
- 我们可以通过自动化工具gulp来为html引用的外部资源加时间戳，具体请参考前端构建工具gulp的使用教程集合中的案例一
- 我们让app开发人员给我们页面的访问地址后面加个时间戳，来解决html的缓存问题

扫描二维码关注公众号，回复： 3828259 查看本文章

手机端如何真正的解决页面缓存问题

猜你喜欢