• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > html5 >

HTML5::初学者使用 Application Cache 指南

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-03-19点击:
   

  对于web app来说,离线应用功能已经越来越重要。诚然,浏览器本身就有缓存机制,但是,这些缓存机制不够可靠,可能并不会按你所想要的方式运行。HTML5 则通过 Application Cache 接口处理了离线应用中的一些问题。

  使用这个接口让你的应用拥有三方面的优势:

  离线浏览——用户在不能联网的时候依然能浏览整个站点

  高速——缓存资源是存储在本地的,因此能更快加载。

  更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可,相同资源不需要重复下载。

  Application Cache(或 AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时,即使他们按了刷新按钮,你的应用也能正确加载和工作。

  CACHE MANIFEST 文件

  cache manifest文件是一个简单的文本文件,其中列出了浏览器需要缓存的资源。

  引用一个MANIFEST文件

  为了让一个应用能启用application cache,需要在文档的html标签中包含manifest属性,如下所示:

   <html manifest=”example.appcache”>
   …
   </html>

 

  你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性,它将不会被缓存(除非在manifest文件中显式指定了这 个页面)。这意味着只要用户访问的页面包含manifest属性,它都将会被加入application cache中。这样,就不用在manifest文件中指定需要缓存哪些页面了。

  Manifest属性可以指定一个绝对URL或是一个相对路径,但是,一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型,但必须有正确的mime-type。如下所示:

 

  <html manifest=”http://www.example.com/example.mf”>

  …

  </html>

 

  一个manifest文件需要正确的mime-type,即text/cache-manifest。你可以在你的web服务器中加入一个定制文件类型(a custom file type),或者加入一个 .htaccess 配置。

  例如,为了在Apache中能够解析这种mime-type,可以在你的配置文件中加入如下代码:

  AddType text/cache-manifest .appcache

  或者,如果你的应用是在Google App Engine中,那么在app.yaml文件中加入代码:

  - url: /mystaticdir/(.*\.appcache)

  static_files: mystaticdir/\1

  mime_type: text/cache-manifest

  upload: mystaticdir/(.*\.appcache)

  MANIFEST FILE的结构

  一个简单的manifest文件看起来可能是下面这样的:

  CACHE MANIFEST

  index.html

  stylesheet.css

  images/logo.png

  scripts/main.js

  这个示例将会缓存指定使用这个manifest的页面中的四个文件。

  有几点是需要注意的:

  必须在第一行包括 CACHE MANIFEST 字符串。

  站点所能缓存的数据上限是5MB 。但是,如果你是在为Chrome Web Store做开发的话,你可以使用unlimitedStorage 来去除这个限制。

  如果manifest文件或者是其中指定的某个资源下载失败的话,整个cache的更新都会失败。在这种情况下,浏览器将会使用老的application cache。

  下面来看一个更复杂的例子:

  CACHE MANIFEST

  # 2010-06-18:v2

  # Explicitly cached ‘master entries’.

  CACHE:

  /favicon.ico

  index.html

  stylesheet.css

  images/logo.png

  scripts/main.js

  # Resources that require the user to be online.

  NETWORK:

  login.php

  /myapi

  http://api.twitter.com

  # static.html will be served if main.py is inaccessible

  # offline.jpg will be served in place of all images in images/large/

  # offline.html will be served in place of all other .html files

  FALLBACK:

  /main.py /static.html

  images/large/ images/offline.jpg

  *.html /offline.html

  以“#”开头的都是注释,这些注释还可以起到另外的作用。一个应用只有在manifest文件发生变化时才会更新 cache。例如,如果你编辑了图像或是改写了一个Javascript函数,cache并不会发生更新。你必须改写manifest文件本身来通知浏览 器需要更新cache文件了。通过在manifest文件中添加一行注释,在其中写上版本号,或者文件hash值,或者时间戳,你都可以确保用户拥有你的 软件的最新版本。如果有新版本出现,你同样可以以编程的方式更新cache,就跟在Updating the cache 中所讨论的那样。

  一个manifest文件可能包括三个部分:CACHE, NETWORK 以及 FALLBACK.

  CACHE:

  这是默认部分,列在这个条目下的文件(或者紧跟在CACHE MANIFEST字符串之后的)都会在第一次被下载后进入cache。

  NETWORK:

  这一部分中所列出的资源都是需要联网使用的资源。它们都不会进入cache中,即使用户处于离线状态。这部分可能会使用Wildcards。

  FALLBACK:

  可选部分,指定了如果资源获取失败,将会呈现怎样的页面。第一个URL是资源,第二个就是fallback页面。两个URL都必须是相对地址,并且由同一个manifest文件指定。可以使用Wildcards。

  注意:这三部分可以以任何顺序在manifest文件中出现,并且每部分都可以在一个manifest文件中出现多次。

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ