Html5 离线应用缓存application Cache

本文详细介绍了HTML5的离线Web应用程序,重点讲解了applicationCache对象的事件、状态属性以及如何实现离线缓存。通过manifest文件管理和更新本地缓存,即使在网络离线状态下,也能确保Web应用的正常运行。此外,文章还探讨了navigator.onLine属性和online/offline事件,帮助开发者判断和应对网络状态变化。
摘要由CSDN通过智能技术生成

HTML5的离线web应用允许我们在脱机时与网站进行交互。这在提高网站的访问速度和制作一款web离线应用上(如HTML5游戏)有一定的用处。 

一、什么是离线Web应程序?为什么要开发离线的Web应用程序? 

离线web应用程序是指:当客户端本地与web应用程序的服务器没有建立连接时,也能正常在客户端本地使用该web应用程序进行有关操作。

Web应用程序已经变的越来越复杂,很多领域都在利用Web应用程序。但是,它有一个致命的缺点:如果用户没有和Internet建立连接,他就不能利用这个web应用程序了。因此H5新增了一个API,它使用一个本地缓存机制很好的解决了这个问题,使离线应用程序的开发成为了可能。

要想使web应用程序在离线状态的时候也能正常工作,就必须把所有构成web应用程序的资源文件,如HTML文件、CSS文件、JavaScript脚本文件等放在本地缓存中,当服务器没有和Internet建立连接时,也可以利用本地缓存中的资源文件正常运行web应用程序。 

二、什么是本地缓存,本地缓存与浏览器网页缓存的区别 

Web应用程序的本地缓存与浏览器的网页缓存有许多方面都存在着明显的区别。

1 . 本地缓存为整个web应用程序服务的,而浏览器的网页缓存只服务于单个网页。任何网页都具有网页缓存。而本地缓存至缓存那些指定的缓存的页面。 

2 . 网页缓存使不安全不可靠的,应为我们不知道在网站中到底缓存了哪些网页,以及缓存了网页上的哪些资源。而本地缓存是可靠的,我们可以控制对哪些内容进行缓存,不对哪些内容进行缓存,开发人员还可以利用编程的手段来控制缓存的更新,利用缓存对象的各种属性、状态和事件来开发出更加强大的离线应用程序。

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

三、如何实现HTML5应用程序缓存?什么是manifest文件,在文件中制定什么内容需要进行本地缓存,哪些内容不需要?

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

第一步, 创建一个 cache.manifest 文件,并确保文件具有正确的内容

Web应用程序的本地缓存是通过每个页面的manifest文件来管理的,manifest文件是一个简单的文本文件,在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称,以及这些资源文件的访问路径,你可以为每一个页面单独指定一个manifest文件,也可以对整个web应用程序制定一个总的manifest文件。下面用一个示例对manifest文件做一个详细的介绍:(该文件为hello.html网页的manifest文件) 

在manifest文件中,

    1. 第一行必须是”CACHE DMANIFEST”文字,以把本文件的作用告知给浏览器,即对本地缓存中的资源文件进行具体设置。

     2. manifest文件中,可以加上注释来进行一些必要的说明或解释。注释行以”#”文字开头。

 3.在manifest文件中可以加上一个版本号,以表示这个manifest文件的版本。版本号可以是任何形式,譬如上面的”version201011211108”,更新manifest文件的时候一般也会对这个版本号进行更新。(只有当 cache.manifest 文件发生变化时,浏览器才会去更新应用缓存。如果你要更改缓存资源,你必须同时修改此文件中的内容,以便让浏览器知道它们需要更新缓存。你可以对清单文件 做任何改动,但大家都认同的最佳实践则是修正版本号)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值