html5 离线缓存使用以及注意事项

1、index.html中加入离线缓存的声明文件 如：
<!DOCTYPE html>
<html manifest="test.appcache">

test.appcache 与 index.html在相同路径下。

2、服务器端加入MIME TYPE声明：
tomcat如下 web.xml中加入
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

3、编写test.appcache文件
CACHE MANIFEST
# 2016-04-26
#v1.0.9

CACHE:
css/my.css
js/my.js

NETWORK:
*
FALLBACK:
/html5/ /404.html
第一行必须为CACHE MANIFEST
CACHE:配置要缓存的文件不可以使用通配符
NETWORK：配置不缓存的文件，可以使用通配符表示其他文件都不缓存
FALLBACK:规定当页面无法访问时的回退页面

4、可以通过更改test.appcache中的注释如版本号是浏览器更新缓存文件，第二次打开页面时使用新的文件

5、当index.html也被缓存的情况下可以通过更改test.appcache文件名来更新缓存文件。

html5离线缓存使用的更多相关文章

  1. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  4. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  5. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  6. HTML5离线缓存攻击测试

    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...

  7. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

  8. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  9. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

随机推荐

  1. Docker解析及轻量级PaaS平台演练（二）--Docker的一些简单命令

    上一篇中,我们对Docker有了一个基本的了解 下面将讨论Docker中Image,Container的相关实际操作 Image管理: 镜像的命名和版本管理: 普通镜像的命名规范 {namespace ...

  2. selenium以手机模拟器方式打开Google浏览器

    使用chrome driver和chrome浏览器并进入chrome的 toggle device mode 模式,就可以很好的模拟手机端,下面直接上代码 public class runtest { ...

  3. C#写的一个视频转换解码器

    C#写的一个视频转换解码器 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  4. docker实战——构建Jekyll

    构建第一个应用 要构建的第一个应用是Jekyll框架的自定义网站.我们会构建一下两个镜像. 一个镜像安装Jekyll以及其他用于构建Jekyll网站的必要的软件包. 一个镜像通过Apache来让Jek ...

  5. B7:访问者模式 Visitor

    表示一个作用于某对象结构中各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 适用场景:1.适用于元素类数据结构相对稳定(类的方法固定,但属性可以变化,如果方法变化很大,就无 ...

  6. Unity3D研究院之脚本生成Android Google Project

    一般安卓自动化打包直接会生成个APK出来,但是我不想生成APK,我想生成Eclipse项目. 然后在自动化完成后面的打包工作.     1 2 3 4 5 6 7 8 9 10 11 using Un ...

  7. javaEE开发之文件下载

    package com.example.web; import java.io.File; import java.io.FileInputStream; import java.io.IOExcep ...

  8. Joomla详细安装图文教程

    Joomla 详细安装图文教程 第一步,配置网站信息 配置数据库:这里我选择MySQLi,可以根据自己的选择         安装-- 安装完成!

  9. android开发中，在java中怎样使用c提供过来char*

    这个char*假设是一般的字符串的话,作为string传回去就能够了.假设是含有'\0'的buffer,最好作为bytearray传出,由于能够制定copy的length.假设copy到string, ...

  10. detach与remove区别，以及detach保留被删除的元素数据，使用

    detach() 会保留所有绑定的事件.附加的数据,这一点与 remove() 不同. remove掉元素后,元素再也找不回了.但是detach还能找回来,还能保留下来. 实现方式如下代码: < ...