HTML5应用程序缓存完成离线Web网页或使用,应用程

来源:http://www.smjxgs.com 作者:4887王中王鉄算盘奖结果 人气:133 发布时间:2019-08-14
摘要:HTML5应用程序缓存实现离线Web网页或应用,html5离线 HTML5应用程序缓存和浏览器缓存的区别。 (有些)浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必

HTML5应用程序缓存实现离线Web网页或应用,html5离线

HTML5应用程序缓存和浏览器缓存的区别。
(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接。如果网络没有连接,即使浏览器启用了对一个站点的缓存,依然无法打开这个站点。只会收到一条错误信息。而使用离线web应用,我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件,并且在网络离线状态下依然能够访问这个网站。

如何实现HTML5应用程序缓存。
实现HTML5应用程序缓存非常简单,只需三步,并且不需要任何API。只需要告诉浏览器需要离线缓存的文件,并对服务器和网页做一些简单的设置即可实现。

•创建一个 cache.manifest 文件,并确保文件具有正确的内容
•在服务器上设置内容类型
•所有的HTML文件都指向 cache.manifest
首先我们需要建立一个名为 cache.manifest 的文件,Windows平台下用记事本即可(也可用其他的IDE)。文件内容如下:

CACHE MANIFEST
#v1 - 2013-09-09

CACHE:
index.html
favicon.ico
css/main.css

NETWORK: *
其中 CACHE: 之后的部分为列出我们需要缓存的文件。 NETWORK: 之后可以指定在线白名单,即列出我们不希望离线存储的文件,因为通常它们的内容(www.111cn.net)需要互联网访问才有意义。另外,在此部分我们可以使用快捷方式:通配符*。这将告诉浏览器,应用服务器中获取没有在显示部分中提到的任何文件或URL。需要特别指出的是,上面例子中的注释 v1 很有必要存在。只有当 cache.manifest 文件发生变化时,浏览器才会去更新应用缓存。如果你要更改缓存资源,你必须同时修改此文件中的内容,以便让浏览器知道它们需要更新缓存。你可以对清单文件做任何改动,但大家都认同的最佳实践则是修正版本号(即v*)。

接下来需要在服务器上设置内容类型:

假使你使用的事Apache服务器,在.htaccess文件中添加以下代码:

AddType text/cache-manifest .manifest最后,我们需要将HTML页面指向清单文件。通过设置每一个页面中HTML元素的manifest属性来完成这一步:

<html manifest="/cache.manifest">完成这一步后,就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地,因此现在网页的打开速度会更快(即使是在线状态也如此)。
需要注意的问题:

•网站的每一个html页面都必须设置html元素的manifest属性。一定要这样做;
•在你的整个网站应用中,只能有一个cache.manifest文件(建议放在网站根目录下);
•部分浏览器(如IE8-)不支持HTML5离线缓存;
from:

HTML5应用程序缓存和浏览器缓存的区别。
(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接。如果网络没有连接,即使浏览器启用了对一个站点的缓存,依然无法打开这个站点。只会收到一条错误信息。而使用离线web应用,我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件,并且在网络离线状态下依然能够访问这个网站。

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
一、什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用了html5离线缓存后,可以否会节约流量?我是做客户端内嵌网页的,大虾帮忙解答Best regards!

当然会了  

如何实现HTML5应用程序缓存。
实现HTML5应用程序缓存非常简单,只需三步,并且不需要任何API。只需要告诉浏览器需要离线缓存的文件,并对服务器和网页做一些简单的设置即可实现。

应用程序缓存为应用带来三个优势:

appcache文件夹可以删

cache即缓存,所有的浏览操作都会形成缓存文件。删不删考虑这个问题,比如说你使用qq,你好友头像一系列的都成为缓存,删除后会再次下载。可以使用清理垃圾软件清理,防误删。
来自UC浏览器  

HTML5应用程序缓存和浏览器缓存的区别。 (有些)浏览器会主动保存自己的缓存文件以...

•创建一个 cache.manifest 文件,并确保文件具有正确的内容
•在服务器上设置内容类型
•所有的HTML文件都指向 cache.manifest
首先我们需要建立一个名为 cache.manifest 的文件,Windows平台下用记事本即可(也可用其他的IDE)。文件内容如下:

1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

CACHE MANIFEST
#v1 - 2013-09-09

二、浏览器支持
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。

CACHE:
index.html
favicon.ico
css/main.css

三、HTML5 Cache Manifest 实例
下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):

NETWORK: *
其中 CACHE: 之后的部分为列出我们需要缓存的文件。 NETWORK: 之后可以指定在线白名单,即列出我们不希望离线存储的文件,因为通常它们的内容(www.111cn.net)需要互联网访问才有意义。另外,在此部分我们可以使用快捷方式:通配符*。这将告诉浏览器,应用服务器中获取没有在显示部分中提到的任何文件或URL。需要特别指出的是,上面例子中的注释 v1 很有必要存在。只有当 cache.manifest 文件发生变化时,浏览器才会去更新应用缓存。如果你要更改缓存资源,你必须同时修改此文件中的内容,以便让浏览器知道它们需要更新缓存。你可以对清单文件做任何改动,但大家都认同的最佳实践则是修正版本号(即v*)。

[sourcecode language="plain"]

接下来需要在服务器上设置内容类型:

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

假使你使用的事Apache服务器,在.htaccess文件中添加以下代码:

<body>
The content of the document......
</body>

AddType text/cache-manifest .manifest最后,我们需要将HTML页面指向清单文件。通过设置每一个页面中HTML元素的manifest属性来完成这一步:

</html>

<html manifest="/cache.manifest">完成这一步后,就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地,因此现在网页的打开速度会更快(即使是在线状态也如此)。
需要注意的问题:

[/sourcecode]

•网站的每一个html页面都必须设置html元素的manifest属性。一定要这样做;
•在你的整个网站应用中,只能有一个cache.manifest文件(建议放在网站根目录下);
•部分浏览器(如IE8-)不支持HTML5离线缓存;
from:

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议的文件扩展名是:".appcache"。

请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

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

manifest 文件可分为三个部分:

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

第一行,CACHE MANIFEST,是必需的:

[sourcecode language="plain"]

   CACHE MANIFEST
/theme.css
/logo.gif
/main.js

[/sourcecode]

 

上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
2.NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的

[sourcecode language="plain"]

NETWORK:
login.asp

[/sourcecode]

 

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

[sourcecode language="plain"]

NETWORK:
*

[/sourcecode]

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

下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "404.html" 替代 /html5/ 目录中的所有文件:

[sourcecode language="plain"]

FALLBACK:
/html5/ /404.html

[/sourcecode]

五、更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:

1.用户清空浏览器缓存
2.manifest 文件被修改(参阅下面的提示)
3.由程序来更新应用缓存

六、实例 - 完整的 Manifest 文件

[sourcecode language="plain"]

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

[/sourcecode]

 

重要的提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。

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

本文由4887王中王鉄算盘奖结果发布于4887王中王鉄算盘奖结果,转载请注明出处:HTML5应用程序缓存完成离线Web网页或使用,应用程

关键词:

最火资讯