HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示
使用HTML5,通过创建cache manifest文件,可轻松创建web应用的离线版本。
HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有网络时进行访问。而Web App是通过浏览器来访问的,所以离线状态下是无法使用app的。其中web app中的一些资源并不经常改变,不需要每次都向服务器发送请求。这时应运而生的离线缓存就显得尤为突出。通过吧需要离线缓存储的文件列在一个manifest配置文件中。这样在离线情况下也可以使用app。
方法:
- 在index.html里加上 <html manifest=“test.manifest”
- manifest清单格式如下:
CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
#无法访问页面
FALLBACK:
404.html - manifest文件的mime-type必须是 text/cache-manifest类型。
- List item
应用程序缓存为应用带来三个优势
- 离线浏览–用户可在离线时使用它们。
- 速度–已经缓存的资源加载得更快。
- 减少服务器负载–浏览器将只从服务器下载更改过的资源。
离线存储的manifest一般由三个部分组成:
- CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
- NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。
- FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。