HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览

2016-02-19 12:34 38 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了。
有没有想过,刷新后页面还是刚刚才页面,在新窗口中再打开一个页面,输入相同的网址,在断网的状态下打开还是原来那个页面。。HTML5的离线应用正提供了这样一个功能。
在页面中的数据加载时,你可以自己设定一些要缓存的图片、flash、css、js、html等文件,等下次不能联网的情况下,你可以用那些缓存的文件。这就是HTML5的离线应用。
其实它实现起来很简单。

需要服务器。这里用tomcat服务器来讲解。
首先要先把.manifest后缀的文件 的mine类型配置为text/cache-manifest。
一讲到tomcat配置,熟悉的朋友自然就会想到web.xml这个文件,没错,在文件中加入如下配置就行:

代码如下:

mime-mapping
extensionmanifest/extension
mime-typetext/cache-manifest/mime-type
/mime-mapping

然后写一个xxx.manifest文件,xxx是你自己取的一个名字。这个文件的格式是这样的:

代码如下:

CACHE MANIFEST
#version 1.5
CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-Logo.gif

第一行是必须的,它标识这是manifest的配置文件。
#version 1.5
这句是注释,没实际的作用,我在这里只是想让浏览器更新缓存文件。因为当这个manifest文件与原来一样的时候,浏览器是不会去重新加载缓存文件的,所以我们可以通过这个注释,一方面修改版本号,另一方面让浏览器更新缓存。
CACHE:
这行指示出下面的文件是要缓存的。示例中,缓存了当前页面:MyTest.html,以及一些css和js文件 还有图片。
还有几个关键字示例中没提到,就是
NETWORK:
FALLBACK:
NETWORK 指不想缓存的页面;FALLBACK 是指请求的文件 没有找到或该文件的服务器没有响应时的替代方案,比如我们想请求某个嵌套页面,但这个页面的服务器连接不上了,那么我可以转向另外一个指定的页面。
这是第二步,第三步,只要在html标签中加上manifest的位置就行了:
html manifest="NAME.manifest"
到这里,就可以实现简单的离线应用了。

那些缓存的文件放在哪呢?
在chrome上测试,发现它是按自己的机制来分块保存这些文件的,所以我没找不到完整的文件。保存的数据在:
C:UsersjasonlingAppDataLocalGoogleChromeUser DataDefault 里面,具体怎么存,笔者还不了解。
火狐上的文件也是按它自己的机制来存的,不过笔者本人用sqlite打开后,找到了缓存文件的具体信息:
读者有兴趣可以自己去尝试一下,看会不会有新发现。

来源:http://www.tulaoshi.com/n/20160219/1601183.html

延伸阅读
吉吉影视离线缓存怎么用   1)打开吉吉影视,找到需要缓存的电影或电视剧,点击进去,然后点击。   2)此时离线缓存人物已经添加,在栏的中可以查看到,等文件缓存完成,我们就可以在处找到,这时候就算没有网络我们也一样可以看了哦。  
标签: Web开发
前言 今天Web应用程序已经很复杂了,以现在的发展,会将越来越复杂,但他有一个致命缺点,不能脱离internet链接,因此在HTML中新增了一API, 它使用一个本地存储机制很好地解决了这个问题,为离线web应用铺平了道路。 本地缓存于浏览器缓存 代码如下: 本地缓存是为整个web应用程序服务 浏览器缓存只对单个网页服务/pp任何网页都具有网...
手机腾讯视频离线缓存如何删除   1)首先打开手机腾讯视频软件,进入首页,点击个人按键。 2)进入个人中心界面,点击离线缓存按键,进入离线缓存界面后,按编辑按键。   3)然后在选择好想删除的离线缓存,最后在点击删除按键。  
标签: Web开发
我们在使用offline cache的时候,有时候可能会更新资源,如js,css或者图片的 更新。但是在没有更新以前用户已经缓存了旧版本的资源,当在次访问的时候 他使用的还是旧版本的资源,如何才能让用户及时的更新缓存资源呢? 更新缓存资源主要有两种方法,通过修改配置文件的版本号或者调用js完成更新 js更新方法 代码如下: if (window.ap...
芒果TV影音软件如何设置离线缓存   自从湖南卫视推出了芒果TV,很多在湖南卫视播出的节目就只能在芒果TV上观看了。芒果TV算是一个比较新的影音软件,很多人都不知道该怎么设置离线缓存。在这里,小编跟大家分享一个教程,希望对大家有所帮助。 软件名称: 芒果TV客户端播放器PC软件 V4.2.0.111 官方安装电脑版 软件...

经验教程

787

收藏

10
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部