HTML5新特性之离线缓存技术-php中文网


本文摘自PHP中文网,作者无忌哥哥,侵删。

一、离线缓存的起因。

HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,

设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,十分不便。

而离线web应用允许我们在脱机时与网站进行交互。

二、什么是离线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。只需要告诉浏览器需要离线缓存的文件,并对服务器和网页做一些

简单的设置即可实现。

4-1、创建一个 cache.manifest 文件,并确保文件具有正确的内容。

4-2、在服务器上设置内容类型。

4-3、所有的HTML文件都指向 cache.manifest。

具体实现:

4-1:首先我们建立一个名为cache.manifest的文件,Windows平台下用记事本即可(也可用其他的IDE)。文件内容如下:

注意事项:

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

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

3、在CACHE之后的部分为列出我们需要缓存的文件。

4、在FALLBACK之后的部分每一行中指定两个资源文件,第一个资源文件为能够在线访问时使用的资源文件,第二个资源文件为

不能在线访问时使用的备用资源文件。

5、在NETWORK之后可以指定在线白名单,即列出我们不希望离线存储的文件,因为通常它们的内容需要互联网访问才有意义。

另外,在此部分我们可以使用快捷方式:通配符*。这将告诉浏览器,应用服务器中获取没有在显示部分中提到的任何文件或URL。

4-2:服务器上设置内容类型。

真正运行或测试离线web应用程序的时候,需要对服务器进行配置,让服务器支持text/cache-manifest这个MIME类型(在h5中规定

manifest文件的MIME类型是text/cache-manifest)。例如对Apache服务器进行配置的时候,需要找到

{apache_home}/conf/mime.type这个文件(.htaccess),并在文件最后添加如下所示代码:

text/cache-manifest .manifest 。在微软的IIS服务器中的步骤如下所示:

(1).右键选择默认网站或需要添加类型的网站,弹出属性对话框

(2).选择”http头”标签

(3).在MIME映射下,单击文件类型按钮

(4).在打开的MIME类型对话框中单击新建按钮

(5).在关联扩展名文本中输入”manifest”,在内容类型文本框中输入”text/cache-manifest”,然后点击确定按钮。

4-3:设置HTML文件的指向。

1

<html manifest=”/cache.manifest” >

完成这一步后,就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地,因此现在网页的打开速度会更快

(即使是在线状态也如此)。

注意事项:

1、网站的每一个html页面都必须设置html元素的manifest属性。Must to do;

2、在你的整个网站应用中,只能有一个cache.manifest文件(建议放在网站根目录下);

3、部分浏览器(如IE8-)不支持HTML5离线缓存;

4、“#” 开头的注释行可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,

这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

五、掌握进行本地缓存的applicationCache对象及其属性和事件:

(1)缓存的更新:

当一个web应用从缓存中载入的时候,所有与之相关的文件也是直接从缓存中获取。在线状态下,浏览器会异步地检查清单文件是否有更新。

如果有更新,新的清单文件以及清单中的列举的所有文件都会下载下来重新保存到程序缓存中。但要注意浏览器只是检查清单文件,而不会

检查缓存的文件是否有更新,如果修改一个缓存的js文件,并且要想让该文件生效,就必须去更新下清单文件。由于应用程序依赖的文件列

表其实并没有变化,因此最简单的方式就是更新版本。

代码如下:


1

2

3

4

5

6

CHCHE MANIFEST

CACHE:

#version<span style="color:#cc0000;">2</span> (更改这个数字以便让浏览器重新下载)

myapp.html

 myapp.css

 myapp.js

同样“卸载“,就要在服务器端删除清单文件,使得请求该文件的时候返回404,同时,修改html文件以便他们与该清单列表”断开链接“。

注意:

①、浏览器检查清单文件以及更新缓存的操作是异步的,可能是在从缓存中载入应用之前,也有可能是同时进行。因此对于简单的web应用

而言,在更新清单文件之后,用户必须载入应用两次才能保证最新的版本生效:第一次是从缓存中载入老版本随后更新缓存;第二次才是从

缓存中载入最新的版本。

②、浏览器在更新缓存过程中会触发一系列事件,可以通过注册处理程序来跟踪这个过程同时提供反馈用户。

代码如下:

1

2

3

4

  applicationCache.onupdateready= function(){

  var reload = confirm(“A new version of this application is available\n and will be used the next time you reload.\n”);

  if(reload)  location.reload();

}

该事件注册在ApplicationCache对象上的,该对象是window的applicationCache属性的值。支持应用程序缓存的浏览器会定义该属性。

(2)处理应用缓存相关事件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

//下面所有的事件处理程序都使用此函数来显示状态消息

//由于都是通过调用status函数来显示状态,因此所有处理程序都返回false来阻止浏览器显示其默认状态消息

  function status(msg){

 doucment.getElementById(“statusline”).innerHTML= msg;

  console.log(msg); //同时在控制台输出此消息,便于调试

 }

   //每当应用程序载入的时候,都会检查该清单文件

   //也总会首先触发“checking”事件

   window.applicationCache.onchecking = function(){

      status(“checking for a new version.”);

     return false;

   }

   //如果没有改动,同时应用程序也已经缓存了

   //”noupdate”事件被触发,整个过程结束

  window.applicationCache.onnoupdate = function(){

   }

    //如果还未缓存应用程序,或者清单文件有改动

    //那么浏览器会下载并缓存清单中的所有资源

    //触发”downloading”事件,同时意味着下载过程开始

   window.applicationCache.ondownloading = function(){

        status(“Downloading new version”);

        window.progresscount = 0;

       return false;

   }

   //在下载过程中会间断性触发“progress“事件

   //通常是在每个文件下载完毕的时候

   window.applicationCache.onprogress = function(e){

        varprogress = “”;

        if(e && e.lengthComputable)

           progress = “ ”+Math.round(100*e.loaded/e.total)+”%”

       else

            progress = “(“+(++progresscount)+”)”

       return false;

  }

    //当下载完成并且首次将应用程序下载到缓存中时,浏览器会触发“cached“事件

  window.applicationCache.oncached = function(e){

       status(“Thisapplication is now cached locally”);

        return false;

  }

  

    //当下载完成并将缓存中的应用程序更新后,浏览器会触发”updaterady”事件

    //要注意的是:触发此事件的时候,用户任然可以看到老版本的应用程序

   window.applicationCache.onupdateready = function(e){

        status(“Anew version has been downloaded. Reload to run it”);

        return false;

   }

  

   //如果浏览器处于离线状态,检查清单列表失败,则会触发“error“事件

   //当一个未缓存的应用程序引用一个不存在的清单文件,也会触发此事件

   window.applicationCache.onerror = function(e){

        status(“Couldn’tload manifest or cache application”);

        return false;

  }

    //如果一个缓存的应用程序引用一个不存在的清单文件,会触发“obsolete“

   //同时将应用从缓存中移除之后不会从缓存而是通过网络加载资源

   window.applicationCache.onobsolete = function(e){

        status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”);

        return false;

   }

每次载入一个设置了manifest属性的html文件,浏览器都会触发”checking”事件。并通过网络载入该清单文件。不过之后,会随着

阅读剩余部分

相关阅读 >>

HTML5讲解之datatransfer对象

electron页内查找模块介绍(代码示例)

HTML5 canvas如何绘制圆形?(代码实例)

h5手机端页面缩放

HTML5游戏开发引擎-初识createjs的详解(图文)

移动端HTML5音频与视频遇到的问题及解决方案

app三年内是否将被HTML5顶替彻底消失?

如何使用HTML5 canvas绘制文字的轮廓

h5中app监听返回事件处理

HTML5 progress标签如何更改进度条颜色?progress进度条详解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...