html5 offlline 缓存使用示例

2016-02-19 10:36 10 1 收藏

下面请跟着图老师小编一起来了解下html5 offlline 缓存使用示例,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

如果想使用该api,必须保证服务器端配置相应的mime类型。

拿tomcat为例,在打开Tomcat 6.0confweb.xml文件,在文件的最后面添加如下内容

代码如下:

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

尤其注意,extension的value是manifest,所以以后配置缓存文件的后缀必须跟他一样。

使用缓存是必须如下格式

代码如下:

!DOCTYPE html
html manifest="/cache.manifest"
body
...
/body
/html

cache.mainfest是在服务器端配置的文件

格式如下

代码如下:

CACHE MANIFEST
index.html
time.js
time.css
#fallback主要是用来离线的时候替换文件,
# /pay/ ofline.html pay下面的所有请求在离线的是都会转发给 ofline.htm
FALLBACK:
server-time.js fallback-server-time.js
NETWORK:
*
# version 9

其中version 为版本标签,当版本发生改变的时候,客户端会自动更新缓存。

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

延伸阅读
标签: Web开发
 一、基本概念 什么是Canvas canvas 是一个新的 HTML 元素,这个元素在 HTML5  中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在草稿阶段,正式发布也许要等到2010年,不...
标签: Web开发
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点 viewport 语法介绍: 代码如下: !-- html docu...
标签: Web开发
简介 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势 : 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源,因此加载速...
标签: Web开发
在这一章节我们将: 准备开发工具 建立我们的第一个游戏-Ping Pong 学习使用Jquery JavaScript库做基本定位 获取键盘输入 Creating the Ping Pong game with scoring 下面的游戏截图就是我们本章学习后的成果。它是一款乒乓游戏,有2个玩家使用一个键盘比赛。 那么,现在就让我们开始创建我们的游戏。 准备开发环境 HTML5游戏开...
标签: Web开发
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y) 图示如下:   任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)。 代码演示: 代码如下: // trans...

经验教程

646

收藏

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