前几天因为维护的一个vue移动端项目，出现了一个问题，在ios webview下，无论怎么修改都没有更新，后来排查了下原因。是缓存的问题，使用webpack后在每一个js文件后加上了一个hash值。
通过这一次的排查，让我对html5的缓存，引发了极大的兴趣。
通过网上的查找，我发现，html5的缓存技术新增了有以下两种，一种是localstorage，还有一种是appcache。传统的还有一种是cookie。localstorage的话已经是很熟悉了，在项目中也经常熟练地使用setItem和getItem方法。至于这个appcache不是很熟悉。
优势
HTML5引入了这项技术，意味着web应用可进行缓存，并在没有网络的情况下使用。Application Cache带来的三个优势是：
-
离线浏览
-
提升页面载入速度
-
降低服务器压力
而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响
使用
使用appcache的话，需要在index.html下，也就是项目目录下，新建一个类似于cache.manifest的manifest文件并在index.html下的html标签内新增manifest属性
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
总结一下就是在html中引入一个minifest的文件，该文件声明了哪些文件应该被缓存，哪些文件不会被缓存
格式如下
CACHE MANIFEST
#v0.11 首次下载后进行缓存的，一般会写版本号
CACHE:
#需要被缓存的文件
js/app.js
css/style.css
NETWORK:
#不需要被缓存的文件
resourse/logo.png
FALLBACK:
#表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。
/ /offline.html
注意点
1.在cache.manifest下应当写明版本号，并且对本文件不做缓存处理，因为如果服务器对离线资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
2.如果服务器资源更新了，那么浏览器会一次性下载所有更新资源，如果下载过程中失败，那么这次所有更新都算是失败的。浏览器还会使用以前的资源。
- 浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
总结
从可用性与易用性来说，Application Cache是最好是做静态的公共资源的缓存，尽量不去缓存业务资源。感觉离真正的缓存之路还是比较遥远的。
更新
以前查的资料都是大牛以前的博客上看来的，这一次为了看一些api去mdn上观看了官方的解释https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
在此刻使用这里描述的应用程序缓存功能高度不鼓励; 它正在处于从Web平台中被删除的过程。请改用Service Workers 代替。事实上，在Firefox 44中，当AppCache用于为页面提供离线支持时，控制台中现在显示一条警告消息，建议开发人员改用 Service workers 代替 (bug 1204581)。
所以，尽量不使用啦！
网友评论