HTML5 应用程序缓存.pdfVIP

HTML5 应⽤程序缓存 HTML5 应⽤程序缓存 使⽤ HTML5 ，通过创建 cache manifest ⽂件，可以轻松地创建 web 应⽤的离线版本。 什么是应⽤程序缓存 （Application Cache ）？ HTML5 引⼊了应⽤程序缓存，这意味 web 应⽤可进⾏缓存，并可在没有因特⽹连 接时进⾏访问。 应⽤程序缓存为应⽤带来三个优势： 1. 离线浏览 - ⽤户可在应⽤离线时使⽤它们 2. 速度 - 已缓存资源加载得更快 3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。 浏览器⽀持 Internet Explorer 10 Firefox Chrome Safari 和 Opera ⽀持应⽤程序缓存. HTML5 Cache Manifest 实例 下⾯的例⼦展⽰了带有 cache manifest 的 HTML ⽂档 （供离线浏览）： 实例 !DOCTYPE HTML html manifest=demo .appcache body The content of the document /body /html 尝试⼀下 » Cache Manifest 基础 如需启⽤应⽤程序缓存，请在⽂档的html 标签中包含 manifest 属性： !DOCTYPE HTML html manifest=demo .appcache ... /html 每个指定了 manifest 的页⾯在⽤户对其访问时都会被缓存。如果未指定 manifest 属 性，则页⾯不会被缓存 （除⾮在 manifest ⽂件中直接指定了该页⾯）。 manifest ⽂件的建议的⽂件扩展名是：.appcache。 请注意，manifest ⽂件需要配置正确的 MIME-type ，即 text/cache-manifest。必须 在 web 服务器上进⾏配置。 Manifest ⽂件 manifest ⽂件是简单的⽂本⽂件，它告知浏览器被缓存的内容 （以及不缓存的内 容）。 manifest ⽂件可分为三个部分： CACHE MANIFEST - 在此标题下列出的⽂件将在⾸次下载后进⾏缓存 NETWORK - 在此标题下列出的⽂件需要与服务器的连接，且不会被缓存 FALLBACK - 在此标题下列出的⽂件规定当页⾯⽆法访问时的回退页⾯ （⽐如 404 页⾯） CACHE MANIFEST 第⼀⾏，CACHE MANIFEST ，是必需的： CACHE MANIFEST /theme .css /logo .gif /main .j s 上⾯的 manifest ⽂件列出了三个资源：⼀个 CSS ⽂件，⼀个 GIF 图像，以及⼀个 JavaScript ⽂件。当 manifest ⽂件加载后，浏览器会从⽹站的根⽬录下载这三个⽂件。 然后，⽆论⽤户何时与因特⽹断开连接，这些资源依然是可⽤的。 NETWORK 下⾯的 NETWORK ⼩节规定⽂件 login .php 永远不会被缓存，且离线时是不可⽤ 的： NETWORK: login .php 可以使⽤星号来指⽰所有其他其他资源/⽂件都需要因特⽹连接： NETWORK: * FALLBACK 下⾯的 FALLBACK ⼩节规定如果⽆法建⽴因特⽹连接，则⽤ offline .html 替代 /html5/ ⽬录中的所有⽂件： FALLBACK: /html/ /offline .html 注意: 第⼀个 URI 是资源，第⼆个是替补。 更新缓存 ⼀旦应⽤被缓存，它就会保持缓存直到发⽣下列情况： ⽤户清空浏览器缓存 manifest ⽂件被修改 （参阅下⾯的提⽰） 由程序来更新应⽤缓存 实例 完整的 Manifest ⽂件 CACHE MANIFEST # 20 12-02-2 1 v 1.0 .0 /theme .css /logo .gif /main .j s NETWORK: login .php FALLBACK: /html/ /offline .html 提 :以 # 开头的是注释⾏，但也可满⾜其他⽤途。应⽤的缓存会在其 manifest ⽂ 件更改时被更新。如果您编辑了⼀幅图⽚，或者修改了⼀个 JavaScript 函数，这些改 变都不会被重新缓存。更新注释⾏中的⽇期和版本号是⼀种使浏览器重新缓存⽂件的 办法。 关于应⽤程序缓存的说