应用程序存储和离线Web应用
html5中新增了应用程序,允许web应用将应用程序自身本地保存到用户的浏览器中。不想localStorage和sessionStorage
只是保存web应用程序相关数据。它是将应用自身保存起来--应用程序所需运行的所有文件(html、css、JavaScript、图片等)。“应用程序缓存”和一般浏览器缓存不同
:它不会随着用户清除浏览器缓存而被清除。同时,缓存起来的应用程序也不会像一般固定大小的缓存那样,老数据会被最近一次访问的新数据代替掉。它其实不是临时存储在缓存中,应用
程序更像是被“安装”在那里 ,除非被用户“卸载”或者“删除”他们,否则他们就会一直“驻扎”在那里,所以,总的来说,“应用程序缓存”在真正意义上不是“缓存”,更好的说法应该是“应用程序存储”。
让web应用能够实现“本地安装”的目的是要保证他们能够在离线状态(比如:当在飞机上或者手机没有信号的时候)下依然可以访问。将自己“安装”到应用程序缓存中的web应用。
在离线状态下使用localStorage来保存应用相关数据,同时还具备一套同步机制,在再次回到在线状态时,能够将存储数据发送给服务器。我们后面会举出一个例子,不过在这之前,
先来介绍下应用程序是如何将自己“安装”到应用缓存中的。
应用程序缓存清单
想要将应用程序“安装”到应用程序缓存中,首先要创建一个表单:包含所有应用程序依赖的所有url列表。然后通过在应用程序主HTML页面的html标签中设置mainfest属性,指向该清单文件就可以了。
清单文件中的首行内容必须以“CACHE MANIFEST”字符串开始。其余就是要缓存的文件URL列表,一行一个URL。相对路径的URL都相对与清单文件的URL。会忽略内容中的空行,会作为注释而忽略以“#”开始
的行。
注释前面可以有空格,但是在同一行注释后面是不允许有非空字符的。
缓存清单的MIME类型
应用程序清单文件约定以*.appcache作为文件拓展名。但是,这也仅仅是约定而已,web服务器真正识别清单文件的方式是通过“text/cache-manifest”这个MIME类型,那么就不用缓存应用程序了
因此可能需要对web服务器做一定的配置来使用这个MIME类型,比如在web应用目录下面创建Apache服务器的一个.htaccess文件
清单文件包含要缓存的应用标示。如果一个web应用有很多web页面(用户可以访问多个html页面),那么每个html页面就需要设置<html manifest></html> 属性来指向清单文件
事实上将这些不同的页面都指向同一个清单文件,可以很清楚地表达出它们都是需要缓存起来的,同时它们又是来自同一个web应用的。如果一个应用只有少量的html页面。那么一般会把这些页面都显示的列在
清单文件中。但是这不是强制的:会认为任何链接到清单文件的文件都是web应用的一部分,并会随着应用一起缓存起来。
像之前提到的,一个简单的清单必须列出web应用依赖的所有资源。一旦一个web应用首次下载下来并缓存,之后的任何加载请求就都来自缓存。从缓存中去载入一个应用资源的时候,就要求它请求的任何资源务必要在
清单中。不会载入不在清单中的资源。这种政策有点儿离线的味道。如果一个简单的缓存起来的应用 能够从缓存中载入并运行,那么它也可以在浏览器离线状态下运行,通常情况下很多复杂的web应用无法将他们依赖的
所有资源都缓存起来。但是如果它们同时也有一个复杂的清单的话,他们人可以使用应用程序缓存。
复杂的清单
一个应用从应用程序缓存中载入的时候,只有其清单文件中列举出来的资源文件会载入。前面例子中的清单文件列举一个资源的URL,事实上,清单文件还有比这更复杂的语法。列举资源的方式还有另外两种。在清单文件中
可以使用特殊的区域头来标识该头信息之后清单单项的类型。像该例子中雷剧的简单缓存项事实上都属于“CACHE:”区域,这也是默认的区域。另外两种区域是以“Network”和“FALLBACK:”头信息开始的(一个
清单可以有任意数量的区域,而且在相邻两个区域之间可以根据需要相互转换)
“NETWORK:” 区域标示了该URL中的资源从不缓存 ,总是要通过网络获取通常,会将服务器端的脚本资源放在“NETWORK:”区域中。而实际上该区域中的资源的URL都只是URL前缀,用来表示以此URL
前缀开头的资源都应该通过网络加载。当然,如果浏览器处于离线状态,那么这些资源都将获取失败。“NETWORK” 区域中的URL还支持“*”通配符。该通配符表示对任何不在清单中的资源,浏览器都将通过网络
进行加载。这实际上违背了这样一条规则:缓存应用程序必须要在清单中列举所有应用的相关资源。
“FALLBACK”区域中的清单项每行都包含两个URL。第二个URL是指需要加载和存储在缓存中的资源,第一个URL是一个前缀。任何能够匹配到该前缀的URL都不会缓存起来。但是可能的话。它们会从网络中载入。如果
从网络中载入这样一个URL失败的话,就会使用第二个URL指定的缓存资源来代替,从缓存中获取,想象一个web应用包含一定数量的视频教程。这些视频都很大,显然把它们缓存到本地是不合适的。因此在离线状态下。
通过清单文件中的fallback区域,就可以使用一些机遇文本的帮助文件来代替了
下面是一个更加复杂的缓存清单:
CACHE MANIFEST
CACHE:
myapp.html
myapp.css
myapp.js
FALLBACK:
videos/offline_help.html
NETWORK:
cgi/