html5应用缓存(离线存储)_html5游戏缓存游戏-CSDN博客

本文链接：https://blog.csdn.net/qq_33562825/article/details/63254115

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问，
这个技术给我们带来的好处真是多多，比如用户可以在离线状态访问到一些内容，在线的情况下已经
缓存过得资源加载的会很快，同时可以减少服务器的压力。。。尤其是在移动开发，比如说一款游戏，缓存对于它来说是
极其重要的。

除了ie以外，所有主流的浏览器都支持应用缓存
说了半天也该上干货了，这个应用缓存到底如何使用呢？

很简单，只要在页面html中增加一个叫manifest的属性,并设置为属性值为一个叫cache.manifest的文件就可以了

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

cache.manifest的文件里这样写

CACHE MANIFEST
#2016-02-21 v1.0.0

CACHE:

js/main.js
css/index.css
images/logo.png

NETWORK:
resourse/logo.png

CALLBACK:
/offline.html

我们来分析一下文件的结构

第一行CACHE MANIFEST是必须要写的

第二行以#开头的是注释 浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化（即使是注释变化）时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新所以我们要在注释中写一些时间或版本号供我们更新时参考

CACHE:需要离线存储的资源列表这里cache.manifest文件本身也会被自动缓存上面写得是指js/main.js css/index.css images/logo.png这三个文件离线就可以加载出来

NETWORK:必须在在线的时候才能访问的资源列表，也就是不会被缓存的资源可以使用星号来指示所有其他其他资源/文件都需要因特网连接

CALLBACK：当访问的页面不存在时使用一个页面去替代它

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存 manifest 文件被修改由程序来更新应用缓存

注意事项

站点离线存储的容量限制是5M 超过这个大小浏览器会报错
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
在manifest中使用的相对路径，相对参照物为manifest文件
CACHE MANIFEST字符串应在第一行，且必不可少
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新