HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题

2019-01-28 19:47:04于海丽
简介
离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。
使用缓存接口可为您的应用带来以下三个优势:
离线浏览 – 用户可在离线时浏览您的完整网站
速度 – 缓存资源为本地资源,因此加载速度较快。
服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。

应用缓存(又称 AppCache)可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮,您的应用也会正常加载和运行。
缓存清单文件
缓存清单文件是个简单的文本文件,其中列出了浏览器应缓存以供离线访问的资源。
引用清单文件
要启用某个应用的应用缓存,请在文档的html 标记中添加manifest 属性:

复制代码

<html manifest="example.appcache">
...
</html>

您应在要缓存的网络应用的每个页面上都添加 manifest 属性。如果网页不包含 manifest 属性,浏览器就不会缓存该网页(除非清单文件中明确列出了该属性)。这就意味着用户浏览的每个包含manifest 的网页都会隐式添加到应用缓存。因此,您无需在清单中列出每个网页。
manifest 属性可指向绝对网址或相对路径,但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名,但必须以正确的 MIME 类型提供(参见下文)。

复制代码

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

清单文件必须以 text/cache-manifest MIME 类型提供。您可能需要向网络服务器或 .htaccess 配置添加自定义文件类型。
例如,要在 Apache 中提供此 MIME 类型,请在您的配置文件中添加下面一行内容:
AddType text/cache-manifest .appcache要在 Google App Engine 的 app.yaml 文件中提供此 MIME 类型,则添加以下内容:
- url: /mystaticdir/(.*.appcache)
static_files: mystaticdir/1
mime_type: text/cache-manifest
upload: mystaticdir/(.*.appcache)清单文件结构
简单的清单格式如下:
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js该示例将在指定此清单文件的网页上缓存四个文件。
您需要注意以下几点:
CACHE MANIFEST 字符串应在第一行,且必不可少。
网站的缓存数据量不得超过 5 MB。不过,如果您要编写的是针对 Chrome 网上应用店的应用,可使用 unlimitedStorage 取消该限制。
如果清单文件或其中指定的资源无法下载,就无法进行整个缓存更新进程。在这种情况下,浏览器将继续使用原应用缓存。