21xrx.com
登录
  

HTML5 APP缓存

用APP缓存可以很容易的实现离线版的网页应用,只需要创建一个manifest文件.

什么是APP缓存?

HTML5介绍了APP缓存,意思是网页应用可以被缓存,并且在没有联网的情况下也可以访问.

APP缓存给了应用三个有利条件:

  1. 离线浏览 - 当用户断网时也可以访问应用
  2. 速度 - 被缓存的资源加载速度更快
  3. 减少服务器负担 - 浏览器将只从服务器下载已更新的或已改变的资源

HTML 缓存Manifest例子

下面的例子演示了一个被缓存HTML文档

例子

manifest缓存基础

为了允许应用缓存,只需要在<html>标签里包含manifest属性:

添加了manifest属性的页面,当用户访问时就会被缓存.如果页面没有被指定manifest属性,页面将不会被缓存(除非页面在manifest文件里被直接指定了).

manifest文件的扩展名建议用".appcache".

manifest文件需要使用正确的文件类型,可以是"text/cache-manifest".必须在服务器端配置.

manifest文件

manifest文件是一个简单的文本文件,告诉浏览器缓存什么(和不缓存什么).

manifest文件有三个部分:

  • CACHE MANIFEST - 这个header下的文件清单在用户第一次访问时将被缓存
  • NETWORK - 在这个header下的文件清单需要连接到服务器,并且不会被缓存
  • FALLBACK - 给这个header下的文件清单指定一个回退页,如果访问不了就回退

CACHE MANIFEST

第一行的"CACHE MANIFEST"是必不可少的:

上面的文件清单列举了三个资源:一个CSS文件,一个GIF图片和一个JavaScript文件.当manifest文件被加载了,浏览器将从网站根目录下载这三个文件. 然后,无论何时用户是否连接到了网络,资源将仍然可用.

NETWORK

下面的NETWORK部分指定文件"login.php"不会被缓存,断网时是不可访问的:

星号用来指示全部的资源或文件都需要联网才能访问:

FALLBACK

如果网络连不上,下面的FALLBACK部分指定"offline.html"文件将替代/html/目录下所有的文件:

注意:第一个URI是资源,第二个是回退页.

更新缓存

一般应用被缓存了,缓存部分将一直保存,直到下面的情况发生了:

  • 用户清除了浏览器的缓存
  • manifest文件被修改了(看下面的提示)
  • 应用缓存被代码更新了

例子 - 完整的Manifest缓存文件

提示:以"#"符号开始的行是注释,但是也可以用于其它目的. 一个应用的manifest文件改变了,它的缓存也会改变. 如果你编辑一张图片或改变JavaScript函数,这些改变都不会被重新缓存. 在注释行里更新日期和版本是一种方法来让浏览器重新缓存你的文件.

在应用缓存里需要注意的地方

注意你缓存了什么.

一旦文件被缓存了,就算你改变了服务器上的文件,浏览器还是将继续显示被缓存的版本, 为了确保浏览器更新缓存,你需要改变manifest文件.

注意:不同的浏览器缓存数据的大小也不一样(一些浏览器对于每个网站的限制是5MB).

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2