html 离线缓存吗,html之离线缓存

实例 - 完整的 Manifest 文件

1,什么是应用程序缓存(Application Cache)

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

离线缓存：

离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，

将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示。

即使有网络，优先本地存储的资源

2,应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们

* 速度 - 已缓存资源加载得更快

* 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

* 【

在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件

在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的

资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

】

3，如何实现离线缓存：

a)Cache Manifest 基础

如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性：

* 在需要缓存的html根节点上面添加属性 manifest ，属性值是一个 . appcache 文件；

Appcache 是一个控制缓存文件

* 在同目录下创建demo.appcache 文件，幷添加配置项

b)Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

* CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

上面manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，一个 JavaScript 文件

* NETWORK

NETWORK:

login.php

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:

*

* FALLBACK

FALLBACK:

/html/　　 /offline.html

第一个 URI 是资源，第二个是替补。

4，更新缓存：

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存

manifest 文件被修改

由程序来更新应用缓存

5，在服务器端将.appcache文件的mime类型配置成 text/cache-manifest

下面以phpstudy为例

打开，mime.types ,在后面添加----

6，在网页中打开

关于应用程序缓存的注意事项

**-------------提示：以 "#" 开头的是注释行，(# 2012-02-21 v1.0.0)但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。**

浏览器对缓存数据的容量限制可能不太一样(某些浏览器的限制是每个站点 5MB)。