HTML5离线存储
in HtmlCss with 0 comment

HTML5离线存储

in HtmlCss with 0 comment

在HTML5中,利用浏览器cache缓存机制来离线存储一些资源,可以让用户在离线的情况下也能浏览Web App的部分页面。

使用方法:

把需要离线存储在本地的文件列在一个cache.manifest配置文件中,并在HTML中头部设置manifest属性

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
CACHE MANIFEST
#v0.12

CACHE:
js/app.js
css/style.css

NETWORK:
resourse/logo.png //可以使用通配符”*”,默认所有非CACHE文件

FALLBACK:
/ /offline.html  //第一个 URI 是资源,第二个是替补。

离线存储的manifest一般由三个部分组成:

  1. CACHE,表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
  2. NETWORK,表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。
  3. FALLBACK,表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。

浏览器如何解析manifest

浏览器发现html头部有manifest属性,它会请求manifest文件。

注意事项

Responses