HTML5 离线缓存demo在tomcat下的部署

最新推荐文章于 2021-09-19 00:00:00 发布
最新推荐文章于 2021-09-19 00:00:00 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： html+css+js

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

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

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

添加内容:

  1. <mime-mapping>
  2. <extension>manifest</extension>
  3. <mime-type>text/cache-manifest</mime-type>
  4. </mime-mapping>


2.编写.manifest文件。

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

文件内容:

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


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

  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. <body>
  8. </body>
  9. </html>


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

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

knxw0001
关注
专栏目录
Solr7.4.0应用部署Demo，比较全面完整，亲测有效
h0713的博客
09-07 3897
本文参考： http://www.cnblogs.com/tony-zt/p/9260017.html http://www.importnew.com/12707.html https://blog.csdn.net/wzy18210825916/article/details/80946454 https://blog.csdn.net/column/details/17959.htm...
深入详解美团点评CAT跨语言服务监控（一） CAT简介与部署
caohao0591的专栏
07-02 2万+
下一篇： CAT跨语言服务链监控（二） CAT服务端初始化 前言： CAT是一个实时和接近全量的监控系统，它侧重于对Java应用的监控，除了与点评RPC组件融合的很好之外，他将会能与Spring、MyBatis、Dubbo 等框架以及Log4j 等结合，支持PHP、C++、Go等多语言应用，基本接入了美团点评上海侧所有核心应用。目前在中间件（MVC、RPC、数据库、缓存等）框架中得到...
tomcat 设置 HTML5 的离线缓存
心有魔障*@*所以激荡
06-17 2288
1、在tomcat 的 conf/web.xml 文件中添加节点： manifest text/cache-manifest 2、编写manifest文件【名字随意，后缀为manifest】： 例如： CACHE MANIFEST #DamonTung  app v1.0 #指明缓存入口 CACHE: #以下资源必须在线访问
在tomcat下支持html5离线存储
热门推荐
微度
09-27 3万+
HTML5离线游览需要设置离线文件列表（manifest），manifest需要设置MIME类型，以便游览器正确识别，MIME类型错误是无法离线游览的。不同服务器有不同的设置方式，这里介绍Tomcat对HLTM5离线存储的配置过程。1、在tomcat安装目录下找到 conf/web.xml 添加一个mime_type,可以加入到内的任意位置，当然，在mime-mapping其他标签附近易于管理维护。
Tomcat的H5部署
算法与编程之美
09-19 1384
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述Tomcat 服务器是一个免费的开放源代码的Web应用服务器，属于轻量级应用服务器，在中小型系统和并发...
[Tomcat(不推荐,过于重量级了)]1.creator编辑器扩展实现自动打包 2.Tomcat当静态文件服务器 部署h5项目
focus-unchanged-thing
12-08 320
1)操作:选中要打包的文件夹，然后点击编译，则按照一个文件夹为一个工程，进行编译。start是指定的启动场景。 2)将编译好的文件放到Tomcat的webapps目录 3)启动Tomcat 4)访问得到运行结果 5)实现 Administrator@Administrator MINGW64 /e/3_demo/demo_ext/packages (master) $ tree
虹软人脸识别-SpringBoot集成
qq_40110356的博客
09-03 9081
一、前言 人工智能时代的到来，相信大家已耳濡目染，虹软免费，离线开放的人脸识别 SDK，正推动着全行业进入刷脸时代。为了方便开发者接入，虹软提供了多种语言，多种平台的人脸识别SDK的支持，使用场景广泛。产品主要功能有：人脸检测、追踪、特征提取、特征比对、属性检测，活体检测，图像质量检测等。此外，虹软提供的是基于本地算法特征的离线识别SDK，提供全平台的离线支持。 作为一名刚接触人脸识别的初学者，对于虹软极为简洁，方便的SDK接入充满了好奇，想试图应用到web领域，而如今Java最火的web框架非Spring
前端框架light7的使用体验
christyleylh的博客
12-25 1万+
最近在做一个前端项目，主要是服务于移动端的web项目。 由于之前写一个手机彩票项目使用过阿里的sui mobile，这次选择了同作者较新的light7框架。 两者的区别是light7可以使用jQuery了（sui使用zepto），可以使用一些jQuery插件了；API有部分改变；新增了部分拓展组件。 开发工具使用的是WebStorm 2017.3.1。 1、WebStorm新建Empty
MKey+3G+21小时从入门到精通
11-26
为了提高应用性能，可以在模板中实现数据缓存功能。 1. 学习如何使用缓存机制来提高应用的响应速度。 ##### 5.6 JS脚本的常见问题 JavaScript是MKey3G中常用的语言之一，了解其常见问题对于解决问题非常有帮助。 ...
Webstorm6.0.2 将项目部署到Tomcat目录
向着全栈前进
01-06 3682
最近在使用Webstorm开发项目中前端相关的内容，但是涉及到使用ajax技术，不能够跨域访问相关json文件和服务，需要将前端代码部署到tomcat服务器上。但是，如果通过手动拷贝的方式，太过于复杂，大大降低了开发的效率，但实在无法割舍Webstorm，只好查阅了一些资料，解决部署的问题。
tomcat缓存问题
EndAll的专栏
05-17 1184
tomcat有时出些莫名其妙的问题,代码明明是正确的,怎么运行,调试都报错,有时重起 tomcat 都不行重起一下电脑又行了,这个问题耗了我不少时间最近才在网上查到是tomcat缓存的问题
关于HTML5 的history API介绍与使用
iteye_20131的博客
11-26 425
上一篇我们介绍了H5的营销，那么H5的营销必然会设计到一些技术性的问题，那么本篇我们就介绍H5的一些新型特性。这些痕迹就保存在history中，在现在热火的移动终端，以微信为首的H5开发已不再稀有，越来越多的产品正向着H5转型，那么我们将面临一些问题，例如我们在微信公众号中点击了某个页面的链接然后如此循环点击页面中的链接，那么浏览器的history的堆栈中就会存储一堆记录，当想返回到公众号的主页面...
使用tomcat运行前端H5项目
Flying_Ape的博客
06-09 1538
1、首先本机要安装jdk和tomcat，kei
tomcat html 缓存,[细节]Tomcat对静态资源的缓存支持
weixin_42520448的博客
06-23 744
WebResource resource = resources.getResource(path);当资源是文件时，检查相关头部，其中checkIfHeaders方法中就对Etag和lastModified头进行检查：if (resource.isFile()) {// Checking If headersincluded = (request.getAttribute(RequestDisp...
基于Tomcat7的HTML5 WebSocket 应用示例
niweiwei
02-19 1211
基于Tomcat7的HTML5 WebSocket 应用示例   作为下一代的 Web 标准，HTML5 拥有许多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能，从而在浏览器和服务器之间提供了一个...
HTML5表单（一）tomcat服务器的安装
阳光小西的专栏
08-31 1957
1：先安装Jdk 2：如何查看电脑系统版本类型：计算机右键属性 3：下载tomcat: http://tomcat.apache.org/ 左侧download 4：解压缩打开文件夹-》bin文件-》startup.bat双击 5：验证服务器已安装成功 在浏览器上输入http://127.0.0.1:8080， 然后按下回车，如果可以看到如下的页面，就说明Tomcat已经启动完毕了
HTML5 History 模式的坑
weixin_39930992的博客
03-25 2491
周五下班前更新了一下代码，结果一更，出现了一个bug！ 现象1：有一两个页面的Logo不见了... 于是打开Console，查看资源的请求情况，发现请求正常且成功。 这时候又在调试的过程中发现了第二个问题。 现象2：刷新一下，页面无法渲染，并报错各种资源的丢失，无法正常加载。 但是在本地开发的时候，一切资源正常，刷新也不会出现无法加载的问题，一般大家看到这里大概就会发现这...
HTML5 History 模式 去除# （vue路由去除#、常见配置、Tomcat配置）
weixin_38047955的博客
04-12 2543
前言： vue使用vue-router时，路径中会有#的字段，是应为打包完成之后，项目为单页面项目，所有的url都指向单个页面，#号之后的路径是指该页面的锚定位置，所以router中的路径是无法加载的。 若想去除#，就需要使用router的history模式， 且在服务器端进行配置 核心： const router = new VueRouter({ mode: 'histor...
HTML5离线缓存Manifest：实现离线访问与加速的秘籍
HTML5离线缓存Manifest是一种关键技术，它允许Web应用程序在离线状态下仍然能够提供有限的功能和用户体验。这个概念对于开发移动和桌面应用至关重要，尤其是在网络不稳定或者断网的场景下，通过缓存关键资源，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值