HTML5 manifest

原创 2013年12月03日 12:59:32

一、应用场景

     我们通常使用浏览器缓存在用户磁盘上存储web单页,在用户再次浏览的时候已节省带宽,但即便这样,依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。

    离线本地存储和传统的浏览器缓存有什么不同呢?

    1、浏览器缓存主要包含两类:

         a.缓存协商:Last-modified,Etag

               浏览器向服务器询问页面是否被修改过,如果没有修改就返回304,浏览器直接浏览本地缓存文件。否则服务器返回新内容。

         b.彻底缓存:cache-control,Expires

               通过Expires设置缓存失效时间,在失效之前不需要再跟服务器请求交互。

   2、离线存储为整个web提供服务,浏览器缓存只缓存单个页面;

   3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览,浏览器缓存无法指定;

   4、离线存储可以动态通知用户进行更新。

二、如何实现

    离线存储是通过manifest文件来管理的,需要服务器端的支持,不同的服务器开启支持的方式也是不同的。

    

复制代码
CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本,更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html
复制代码

    CACHE指定需要缓存的文件;NETWORK指定只有通过联网才能浏览的文件,*代表除了在CACHE中的文件;FALLBACK每行分别指定在线和离线时使用的文件

    要让manifest管理存储,还需要在html标签中定义manifest属性,如下:

    

复制代码
<!DOCTYPE HTML>
<html lang="en" manifest='test.manifest'>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>
复制代码

    最后别忘了,这些应用需要服务器支持。

    Apache服务器开启支持的方式是:在conf/mime.types中添加一段代码:

            test/cache-manifest manifest

    IIS服务器开启方式:

            右键--HTTP---MIME映射下,单击文件类型---新建---扩展名输入manifest,类型中输入test/cache-manifest

 三、通过JS动态控制更新

    applicationCache对象提供个了一些方法和事件,管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所   

    有属性和事件方法。

复制代码
applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操作
   //即使需要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新,通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发,可以通过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发,表示缓存成功
}

application.onupdateready = function(){
   //第二次载入,如果manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否重新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件,返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其他和离线存储有关的错误
}
复制代码

 

 四、浏览器与服务器的交互

      曾经有面试题是这样的:"描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么?"。

      1、服务端返回baidu页面资源,浏览器载入html

      2、浏览器开始解析

      3、发现link,发送请求载入css文件

      4、浏览器渲染页面

      5、发现图片,发送请求载入图片,并重新渲染

      6、发送请求js文件,阻塞渲染。如果js对dom进行了操作,则会进行rerender

      对于支持离线存储的页面,浏览器和服务器的交互又是如何呢?

      首次载入页面:

      1-6 : 同上

       7:请求页面中需要缓存的页面和数据,就算在之前的步骤中已经请求过(这是个耗能的地方)

       8:服务器返回所有请求文件,浏览器进行本地存储

      再次载入页面:

      1:发送请求

      2:使用本地存储的离线文件

      3:解析页面

      4:请求服务端的manifest文件,判断是否有改变,返回304则表示没有改变进入步骤5,否则进入步骤6

      5:进入首次载入页面的7-8

      6:使用本地存储,不重新请求


tomcat 部署:

HTML5有一个新特性,支持离线缓存,便于开发离线应用。

经过了一些小波折,自己这边也写了一个可以成功运行的demo。部署在tomcat下。

1.第一步:在tomcat下的conf/web.xml添加一个mime_type.

添加内容:

[html] view plaincopy
  1.  <mime-mapping>  
  2. <extension>manifest</extension>  
  3. <mime-type>text/cache-manifest</mime-type>  
  4.  </mime-mapping>   


2.编写.manifest文件。

文件名可以随便命名,我的是test.manifest

文件内容:

[plain] view plaincopy
  1. CACHE MANIFEST  
  2. #VERSION 3.9  
  3. # 直接缓存的文件  
  4. CACHE:  
  5. /html5cache/test.html  
  6. /html5cache/ebt.png  
  7.   
  8. #需要在时间在线的文件  
  9. NETWORK:  
  10. /html5cache/test.js  
  11. /html5cache/damicTest.jsp  
  12. # 替代方案  
  13. FALLBACK:  



3.编写离线缓存的HTML文件

[plain] view plaincopy
  1. <!DOCTYPE html>  
  2. <html manifest="/html5cache/test.manifest">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5特性之离线缓存V3.7 </title>  
  6. </head>  
  7.   
  8. <body>  
  9. </body>  
  10. </html>  



关键一句就在<html manifest="/html5cache/test.manifest">上面。

一定不能写成<html>    ......<html manifest="/html5cache/test.manifest">这种写法就会把<html manifest="">效果给冲掉。切忌。


HTML5的manifest缓存

一,Web存储: 1,localStorage - 没有时间限制的数据存储(永久) localstorage的存储位置: 比如:Chrome 的存储方式是以sqlite的数据库文件形式存储。存在C:\...
  • wk843620202
  • wk843620202
  • 2016年10月10日 16:39
  • 1719

html5 manifest缓存

html5 manifest缓存html5给予了一个很好的webapp开发环境,有些时候我们会希望我们的应用像原生应用一般能被完全离线访问,而不同于我们所说的缓存优化,那我们就需要使用到html5 提...
  • ali1995
  • ali1995
  • 2016年12月13日 21:52
  • 792

HTML5 离线缓存manifest浅析

最近公司项目开发app内嵌入H5应用,由于公司网络不佳,导致开发的H5应用首页加载时快时慢,体验效果不佳,和原生app相比感觉区别很大。以前学习了解H5的时候对H5的缓存有点印象,故就有了把首页缓存在...
  • szs860806
  • szs860806
  • 2017年04月14日 14:16
  • 1327

html5离线缓存机制--manifest

manifest:是web应用的一种缓存机制,当用户访问页面时,浏览器可以将我们规定的文件缓存下来,用于在没有网络的时候也能访问。 1、manifest文件 manifest是一种文本文件,它的扩...
  • WEB_YH
  • WEB_YH
  • 2017年07月24日 18:23
  • 272

关于html5的cache-manifest缓存失败的几点观察

1、对于php文件,有header("Location:xxxxxxxx");的。无法缓存,缓存到这个文件会出错,缓存停止,后面的文件都缓存不了。 2、js脚本出错的无法缓存,但不知道是js文件无法缓...
  • u011848302
  • u011848302
  • 2015年10月04日 22:17
  • 843

html5中manifest特性测试(一)

测试环境和工具   chromium  18.0.1025.151 (开发编译版 130497 Linux) Ubuntu 11.04 一、测试内容          1.A页面manif...
  • tsxw24
  • tsxw24
  • 2012年12月20日 11:37
  • 9579

web离线存储之manifest

html5新增功能(web离线存储之cache manifest) (创建web应用的离线版本)//离线存储(服务器端运行) //. 声明manifest的mime类型,apache...
  • fxqp1202
  • fxqp1202
  • 2016年10月28日 23:06
  • 382

html5 manifest

index.html测试代码,自测通过,通过浏览器打开,切换服务可以看到效果 Cats Who Code demo Cats Who Cod...
  • jianguo_liao19840726
  • jianguo_liao19840726
  • 2012年06月04日 18:18
  • 1012

HTML5之---Manifest 文件--离线缓存

完整的 Manifest 文件 CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.as...
  • basycia
  • basycia
  • 2016年01月08日 10:25
  • 913

HTML5创建 cache manifest缓存文件

今天看到H5通过创建与配置.manifest文件实现web应用程序缓存,Mark下来供进一步学习:...
  • dongxin3594
  • dongxin3594
  • 2016年12月20日 18:10
  • 1116
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 manifest
举报原因:
原因补充:

(最多只允许输入30个字)