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

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: 之后可以指定在线白名单,即列出我们不希望离线存储的文件,因为通常它们的内容需要互联网访问才有意义。另外,在此部分我们可以使用快捷方式:通配符*。这将告诉浏览器,应用服务器中获取没有在显示部分中提到的任何文件或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离线缓存;

时间: 2024-09-27 00:54:18

HTML5应用程序缓存实现离线Web网页或应用的相关文章

HTML5应用程序缓存Application Cache

HTML5应用程序缓存Application Cache 什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存

HTML5应用程序缓存Application Cache详解

 什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application

【原】HTML 5应用程序缓存使用总结

近期接触了HTML5本地缓存,在HTML页面的html标签加入后缀为.appcache的文件,即可以轻松地创建 web 应用的离线版本. 使用本地缓存带来的好处: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. 浏览器支持: 所有主流浏览器均支持应用程序缓存,除了 IE HTML5 Cache Manifest 实例 下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):

如何在ASP.NET中生成HTML5离线Web应用

传统的Web应用程序有一个很大的症结是当用户的网络连接不好时,应用会加载失败,为了 解决这一问题,HTML5中引入了Web的离线工作的功能.离线功能使得Web应用程序类似于本机应用程序,当断开网络连接时可以继续浏览未浏览完成的内 容,离线功能的另一个好处是可以永久缓存静态的内容,而没有缓存过期的限制,这样很大程度上加速了网页的加载速度. 离线应用的创建 不同于传统的缓存机制,HTML5定义了一套独立的缓存机制,有一个单独的文件来记录要缓存的文件列表,这就意味着用户可以自己决定哪些文件需要缓 存.

服务器-浏览自己创建的web网页时,网页中调用的.cgi程序会出错。什么原因?

问题描述 浏览自己创建的web网页时,网页中调用的.cgi程序会出错.什么原因? 每次跳转.cgi程序时都会报错, .cgi文件有C文件编译生成的这是什么原因?程序问题还是服务器问题? 解决方案 502属于服务端问题,提示你CGI不兼容.可以具体看看服务端日志等 解决方案二: http://blog.csdn.net/heibaiyijing/article/details/8538413 解决方案三: 502属于服务端问题,代码导致服务器内部出问题了

程序员-web网页里像QQ空间发表日志一样 令用户发布文章时可 图文混编

问题描述 web网页里像QQ空间发表日志一样 令用户发布文章时可 图文混编 像 QQ空间发表日志一样,用户可上传图片进行图文混编.注意这里是用户进行图文混编,不是程序员. 解决方案 ueditor百度出品,必属精品 解决方案二: 网页编辑器 用的最多的是ckeidtor 国产的kindeditor也不错 另外推荐一个tinymce

HTML5 应用程序初级教程

教程细节 项目:HTML 难度:中级 预计完成时间:1 小时 如 果你想要创建网页应用程序,你可能会想到使用 HTML5.HTML5 是应用程序开发的新宠,它有可能改变软件开发与销售的形式.它也可以让那上百万会做网页的人参与到应用程序开发中,这些人从没想过他们的技术可以应用在其 他方面.不过在开始开发之前,关于 HTML5 的一些东西是你必需了解的.在这个教程中,我将教你一些基础! 何为 HTML5? HTML5 是正在制定的 W3C 规范. 它从 WHATWG 开始起步,将成为 HTML 未来

11款酷炫HTML5应用程序

HTML5,不再陌生--DamnDigital之前就有奉上2集的知识普及(续备忘录清单)+几大奢侈品的HTML5的官网介绍. 相信HTML5应用程序在不久的将来极有可能主导网络.不同于那些需要依靠本地桌面的应用程序,比如任务管理器.代码生成任务或者图片编辑,HTML5允许开发人员创建能在浏览器中运行的应用程序.这些HTML5 Web应用程序具备各种功能,目前人类还无法确切知道HTML5应用程序的潜能到底有多大. 本文推荐了11款优秀的HTML5应用程序,再次体验一把HTML5的强大性,有志之士不

用ASP技术实现在WEB网页上浏览目录及文件

web|网页 用ASP技术实现在WEB网页上浏览目录及文件 周仰平 摘要  目前在许多单位里,象WORD.EXCEL或WPS该类文档文件已成为重要的数据信息资源,在INTRANET WEB平台上如何高效率地管理这些信息资源是一个需要解决的问题.本文是利用ASP技术开发一个基于WEB的应用程序,实现在WEB页面上浏览目录文件,很轻易地做到诸如WORD.EXCEL和WPS等文档文件的查阅和下载,大大地减少信息维护的工作量. 关键词  ASP  WEB  文档文件   前言:在INTRANET平台上,