iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >HTML5离线缓存在tomcat下如何部署可实现图片flash等离线浏览
  • 521
分享到

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

2024-04-02 19:04:59 521人浏览 安东尼
摘要

这篇文章给大家介绍HTML5离线缓存在Tomcat下如何部署可实现图片flash等离线浏览,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 打开一个网页,加

这篇文章给大家介绍HTML5离线缓存Tomcat下如何部署可实现图片flash等离线浏览,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

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

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

代码如下:


<mime-mapping>
<extension>manifest</extension>
<mime-type>text/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:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 里面,具体怎么存,笔者还不了解。
火狐上的文件也是按它自己的机制来存的,不过笔者本人用sqlite打开后,找到了缓存文件的具体信息 

关于HTML5离线缓存在tomcat下如何部署可实现图片flash等离线浏览就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: HTML5离线缓存在tomcat下如何部署可实现图片flash等离线浏览

本文链接: https://www.lsjlt.com/news/83074.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • HTML5离线缓存在tomcat下如何部署可实现图片flash等离线浏览
    这篇文章给大家介绍HTML5离线缓存在tomcat下如何部署可实现图片flash等离线浏览,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 打开一个网页,加...
    99+
    2024-04-02
  • JS+HTML5如何实现图片在线预览功能
    这篇文章给大家分享的是有关JS+HTML5如何实现图片在线预览功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<!DOCTYPE html> ...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作