HTML5之离线应用缓存

来源：互联网发布：量化投资软件编辑：程序博客网时间：2024/04/30 03:35

今天说说HTML5的新特性之一：离线应用缓存。
离线应用，就是在没有网络的情况下访问Web应用程序时，实际上是访问已下载的离线文件资源，并使得Web应用程序正常运行。

特性

开发者需要注意三个特性：

1. 离线资源缓存

在开发离线应用时，必须使用一种方案来说明哪些文件资源需要在离线状态下工作。当设备处于在线状态下，被指定缓存的资源文件便会缓存到本地。此后，如果用户在离线状态下再次访问该Web应用程序，浏览器就会自动加载本地资源，使得用户能够正常使用该Web应用程序。离线应用将使用manifest类型的文件作为需要配置缓存资源文件的配置文件。

2. ApplicationCache对象缓存状态

ApplicationCache对象记录着Web应用程序的缓存状态，开发者可以通过该缓存状态手动更新资源文件的缓存。

3. 在线状态检测

HTML5标准提供了onLine方法用于检测当前网络是否在线。

实例

下面说说具体如何实现缓存资源文件。

首先，将一个页面标为离线存储页面，需要给html标签绑定一个manifest属性指向离线配置文件：

<!doctype html><html manifest="test.manifest" type="text/cache-manifest"><head>    <meta charset="UTF-8">    <title>Document</title><link rel="stylesheet" href="css/a.css"><script src="js/a.js"></script><script src="js/b.js"></script></head><body></body></html>

test.manifest文件内容如下：

CACHE MANIFEST#v0.1.0CACHE:js/a.jscss/a.cssNETWORK:js/b.jsFALLBACK:404.html

其中第一行的CACHE MANIFEST是必须要的标识

v是版本号

CACHE是要缓存的文件

NETWORK是不需要缓存的文件

FALLBACK是如果找不到文件，替换出现的文件

第一次加载页面：

这里写图片描述

第二次加载后可以看到只有b.js一个文件更新了，而其他文件都是从缓存中读取的。

这里写图片描述

可以通过开发者工具查询离线缓存：

这里写图片描述

在更新了资源之后，新的资源需要等到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因的浏览器会先使用离线资源加载页面，然后再去检测mainfest是否有更新，所以需要下次打开页面才能生效。

2 0