突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌

2019-01-28 19:09:19刘景俊
前面已经总结了主要的API扩展,下面几个扩展只有在专用的场合才会发挥最大的作用,这里简单了解一下。下面这些特性无一例外,IE均不支持。应用缓存和服务端消息在其他的主流浏览器中都是支持的。桌面通知目前只有Chrome支持。
应用缓存
很多时候,我们需要缓存一些不经常改变的页面来提高访问速度;而且对于某些应用,我们也希望在离线的情况下也可以使用。在HTML5中,你可以通过一个称之为“应用缓存”的技术很方便的实现这些功能。
在应用缓存的实现中,HTML5允许我们创建一个缓存manifest文件来方便的生成一个离线版的应用。
实现步骤:
1. 启用页面的缓存,很简单,只需要在document的html中包含manifest属性:

复制代码

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每一个包含这个manifest属性的页面当用户访问的时候都会被缓存。如果manifest属性没有指定的话,将不会缓存(除非网页被直接在manifest文件中指定)。manifest文件扩展名还没有统一的标准,推荐的扩展名是".appcache"。
2. 服务器端配置manifest文件的MIME类型
一个manifest文件需要被正确的MIME-type支持,这种文件类型为"text/cache-manifest"。必须在所使用的web服务器上进行配置。例如:Apache 中可在 .htaccess 中添加: AddType text/cache-manifest manifest。
3.编写manifest文件
manifest文件是一个简单的文本文件,告诉了浏览器去缓存什么内容(或者不缓存什么内容)。
manifest文件包含下面三个部分:
• CACHE MANIFEST - 在这个列表标题下的文件将会在下载后被缓存。
• NETWORK - 在这个列表标题下的文件将要求连接到服务器,不会进行缓存。
• FALLBACK - 在这个列表标题下的文件如果不能访问时,则显示特定的页面。
完整的一个文件如下面的例子所示:

复制代码

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /offline.html

提示:
#开头的代表注释。
*可以用表示所有的其它资源或者文件。例如:

复制代码

NETWORK:
*

表示所有的资源或者文件都不会缓存。
4.更新缓存
一旦一个应用被缓存,它将保持缓存除非一下情况发生:
• 用户删除了缓存
• manifest文件被修改
• 应用缓存被程序修改
所以一旦文件被缓存,除了人为的修改情况,浏览器将会持续的显示缓存版本内容,即使你修改了服务器文件。为了让浏览器更新缓存,你只能去修改manifest文件。