关于html5:html之离线缓存

47次阅读

共计 1604 个字符,预计需要花费 5 分钟才能阅读完成。

实例 – 残缺的 Manifest 文件

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

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

离线缓存:

离线缓存能够将站点的一些文件缓存到本地,它是浏览器本人的一种机制,

将须要的文件缓存下来,以便前期即便没有连贯网络,被缓存的页面也能够展现。

即便有网络,优先本地存储的资源

2, 应用程序缓存为利用带来三个劣势:

  • 离线浏览 – 用户可在利用离线时应用它们

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

  * 缩小服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

*【

在没有网络的时候能够拜访到缓存的对应的站点页面,包含 html,js,css,img 等等文件
在有网络的时候,浏览器也会优先应用已离线存储的文件,返回一个 200(from cache)头。这跟 HTTP 的缓存应用策略是不同的
资源的缓存能够带来更好的用户体验,当用户应用本人的流量上网时,本地缓存不仅能够进步用户访问速度,而且大大节约用户的应用流量。

3,如何实现离线缓存:

a)Cache Manifest 根底

如需启用应用程序缓存,请在文档的 <html> 标签中蕴含 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)。

正文完
 0