html5离线应用详摘

在html文件里配置如下：

<html manifest=”name.manifest”>

在name.manifest文件里配置如下：

CACHE MANIFEST

#2014-07-27 v1.0

index.html

index.css

index.js

images/self.jpg

NETWORK

*

①CACHE MANIFEST全部大写。

②“#”开头的行是注释。

③缓存文件路径对应明确。

④
文件后缀名可随便起，推荐使用.manifest或者.appcache。不过最重要的取决于web服务器的配置，让它能认识这两个扩展名。如果不是自己
的服务器，得问主机托管公司配置了什么扩展名来支持描述文件。不同的服务器配置MIME的类型方法不一样，以下我用模拟服务器软件wampserver，
在Apache->httpd.conf下写入的字段如下：AddType text/cache-manifest .manifest（放在哪
里都可以，建议放在相同类型字段处） 。

⑤
不同的浏览器对离线应用缓存的限制有很大不同，移动端ipad和iphone中的Safari限制的5MB；桌面端，Firefox默认最大50MB，而
用户可调高这个限制（选项->高级->网络）；chrome目前只有5MB，如果缓存达到空间限制，已经下载要缓存的文件会被完全删除，离线
相当于白做。

⑥必须给离线应用包含的每个页面都添加同样的属性，比如说：缓存中包含index.html、self.html，那么这两个文件都要添加<html manifest=”name.manifest”>，当然，离线应用可以有任意多个，每个应用分别对应自己的描述文件即可。

⑦
更新缓存内容，只要更改name.manifest文件下的任何地方（包括注释），name.manifest文件就变成新的文件，浏览器发现新的描述文
件会静默地下载里面配置的所有文件，然后再用新下载的文件代替原来缓存的内容，下次用户访问同一个页面（或者刷新该页面），就会显示新内容，如果想让用户
马上切换到新下载的内容，需要用到javascript，请转到⑩。

⑧NETWORK最好不要省略，“ * ”表示所有未缓存的内容，当然，也可以一个一个罗列不想要被缓存的内容。列表中不能使用“ * ”，因为html5规范制定者担心有人会无意中缓存庞大的站点。

⑨FALLBACK
表示根据计算机是否在线而互换，“FALLBACK”区块可以在描述文件中的任何地方出现，第一个文件是在联网时访问的页面（浏览器会照常向web服务器
请求该文件）；第二个文件是在不能上网时访问的页面（浏览器会在上次联网时自动把该文件下载并缓存起来）；当然“ FALLBACK: ”也可省略。
“ FALLBACK: ”下可使用通配符“ / ”。比如：

FALLBACK:

/ offline.html

目前在Firefox中通配符还可以用“ * ”，还可以通过指定子目录来匹配更小范围内的文件：

FALLBACK:

http://www.wei.com/folder/* offline.html

也可以指定只匹配某些类型的文件：

FALLBACK:

*.jpg offline.jpg

⑩使用相对有限的javascript接口可以与离线应用功能交互，这个javascript接口由applicationCache对象定义。在此例举onupdateready事件（表示已经取得了更新内容） 。通过javascript指定更新：

<script>

window.onload=function(){

applicationCache.onupdateready=function(){

if(confirm(“一个新版本的离线缓存已经更新完成，是否刷新以查看最新效果”)){

window.location.reload();

}

};

};

</script>

注：可以模拟confirm显示一个更友好美观的用户界面。

幕尾话：本文采摘自采摘者的左思右想+html5秘籍（原名：[html5：The Missing Manual]）——美Matthew MacDonald 著，李松峰 朱巍 译，人民邮电出版-2012年8月

------------------------------- 非常华丽的分割线 ----------------------------

...没有了 (≧▽≦)/...

html5离线应用详摘的更多相关文章

  1. HTML5 离线缓存详解（转）

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

  2. HTML5离线缓存（Application Cache）

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

  3. HTML5 离线缓存管理库

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

  4. HTML5离线Web应用实战：五步创建成功

    [IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...

  5. 吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  6. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  7. HTML5离线缓存问题

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

  8. Manifesto – HTML5 离线应用程序缓存校验工具

    Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...

  9. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

随机推荐

  1. Socket 之 API函数介绍

    1.创建套接字──socket() 应用程序在使用套接字前,首先必须拥有一个套接字,系统调用socket()向应用程序提供创建套接字的手段,其调用格式如下: SOCKET PASCAL FAR soc ...

  2. nodejs的mysql模块学习(九)连接池集群

    连接池集群 连接池集群可以提供多个主机连接 创建连接池集群 //创建连接池集群 var poolCluster = mysql.createPoolCluster(); //添加配置 config是一 ...

  3. 沈逸老师PHP魔鬼特训笔记(10)

    为了防止代码让我们混淆不清,大家看视频中的分离方法 1.新建了一个文件夹叫code (这代表是代码) 2.再新建一个文件夹叫page (这代表是页面) 代码该怎么写呢? 这里要记住口诀 1.index ...

  4. Oracle基础 PL-SQL编程基础（1） 变量和常量

    一.什么是PL-SQL PL-SQL是结合了Oracle过程语言和结构化查询语言(SQL)的一种扩展语言.具体来说,PL-SQL就是在普通的SQL语句的基础上增加了编程语言的特点,将数据操作和查询语句 ...

  5. shell配置环境变量

    我们在使用Xshell开发机时往往会遇到一些问题,比如使用某些命令他会报command not found,,出现这种情况的原因是我们必须要配置一下环境变量,这样就可以在任何path中访问了. 这就需 ...

  6. vim 使用记录

    编辑 Ctrl + x         数字减1 Ctrl + a         数字加1 di +  {char}    Delete Inner Character  # di": & ...

  7. 给VPS装桌面

    转自:百度经验  致谢! 1.首先我们要先升级一下软件源给安装桌面环境做准备. 执行命令:apt-get update   2.安装桌面环境或窗口管理器: apt-get install xubunt ...

  8. #316 div.2

    主要记录下被坑的B.果然大晚上脑子就是不知道在干嘛,明明都测到 “1 1” 这个样例错了都没发现直接给放过去了,白白让人hack爽了... 题意就是给你一个数m,让你从1~n个数中选一个作a,使1~n ...

  9. Nginx服务器不支持PATH_INFO的问题及解决办法

    最近在写一个小程序,然后里面自己写了个URL的处理器,比如说访问index.php/article 那么就会自动加载进来article页面,访问index.php/home就会自动加载home页面. ...

  10. 六.CSS浮动与清除

    浮动 把元素从常规文档流中取出.是元素脱离常规文档流 浮动的作用: ①实现文本绕排图片效果 ②让原本在上下方向上堆叠的块级元素可以变成左右并列,从而实现多栏布局 文本绕排图片 首先HTML代码如下 & ...