酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
原理和环境
如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
就像cookie一样，html5的离线存储也需要服务器环境。
这里提供一个小工具&&简易iis服务器，把它放在项目更目录下，双击运行即可模拟服务器环境。
链接:密码: ja9h
在开始之前要先了解下manifest（即.appcache文件），上面的解析清单要怎么写。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST- 在此标题下列出的文件将在首次下载后进行缓存
NETWORK- 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK- 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
在线的情况下,用户代理每次访问页面，都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST /theme.css /logo.gif /main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
白名单，使用通配符&*&. 则会进入白名单的open状态. 这种状态下.所有不在相关Cache区域出现的url都默认使用HTTP相关缓存头策略.
下面的 NETWORK 小节规定文件 &login.asp& 永远不会被缓存，且离线时是不可用的：
NETWORK: login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK: *
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 &offline.html& 替代 /html5/ 目录中的所有文件：
ALLBACK: /html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存
|-- index.html
|-- demo.appcache
|-- 简易IIS服务器.exe
|-- 01.jpg
`-- 02.jpg
index.html
&!DOCTYPE html& &html lang=&en& manifest=&demo.appcache&& &head&
&meta charset=&UTF-8&&
&title&HTML5离线存储&/title& &/head& &body&
&img src=&image/01.jpg& alt=&&&
&img src=&image/02.jpg& alt=&&& &/body& &/html&
demo.appcache
CACHE MANIFEST #v01 image/01.jpg
NETWORK: *
FALLBACK: /
image文件夹下存储着
好接着执行简易IIS服务器.exe试试看吧。
当iis开启时
当iis关闭时（是关闭，暂停看不出效果）
可以看见图片1成功被离线展示出来了，图片2像正常情况一样显示不出来。
现在我想把图片2和图片1的位置换一下呢.
Html部分置换一下
&img src=&image/02.jpg& alt=&&&
&img src=&image/01.jpg& alt=&&& &/body&
这时候发现问题来了，html明明修改了为什么图片没有置换过来呢，我不是在demo.appcache文件的NETWORK写了星号吗?除了CACHE MANIFEST文件其它都采用在线模式。查资料得知：引入manifest的页面,即使没有被列入缓存清单中，仍然会被用户代理缓存。
好吧，那我把.appcache文件更新下，于是乎把头部的版本号修改一下#v02。刷新下页面还是没反应！再刷新，有了！为什么？
对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的.发现manifest改变.所有浏览器的实现都是紧随这做静默更新资源.以保证下次pv,应用到更新.
通过控制台我们能够窥探一二：
第一次刷新，应用程序缓存更新准备事件,
第二次刷新才会看到效果。
缓存立即执行
我们的产品已经更新了用户却要第二次进来才能够看到，这样用户体验也太差了吧，有什么方式能够解决呢？好在html5给javascript提供了相关的API。
API篇幅太多自行查看把，这里我晒下我测试成功的code：
/*code1,简单粗暴的*/
applicationCache.onupdateready = function(){
applicationCache.swapCache();
location.reload();
/*code2，缓存公用方法*/
// var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(&on& + type, handler);
element[&on& + type] =
// EventUtil.addHandler(applicationCache, &updateready&, function() {
//缓存更新并已下载，要在下次进入页面生效
applicationCache.update();
//检查缓存manifest文件是否更新，ps:页面加载默认检查一次。
applicationCache.swapCache();
//交换到新的缓存项中，交换了要下次进入页面才生效
location.reload();
//重新载入页面
code1一般用在页面加载时直接触发，而code2的方式可后期检查更新。
站点离线存储的容量限制是5M
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
在manifest中使用的相对路径，相对参照物为manifest文件
CACHE MANIFEST字符串应在第一行，且必不可少
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新
强烈建议看下
& 相关主题：开发离线应用的缓存方法大概有4种（如下safari开发工具中的resources所示）
1.cookies（略）：传统储存策略。缺点很明显：储存的容量过小，而且很容易被各种软件当垃圾清除，如360等。
2.Application Cache资源缓存：在html中指定一个manifest文件，给文件中罗列出需要缓存的资源文件列表。浏览器根据资源列表对资源文件缓存。
3.Dom Storage：这一种基于key/value的格式。
DOM Storage 分为两类：sessionStorage 和 localStorage。除了以下区别外，这两类存储对象的功能是完全一致的。
sessionStorage 用于存储与当前浏览器窗口关联的数据。窗口关闭后，sessionStorage 中存储的数据将无法使用。
localStorage 用于长期存储数据。窗口关闭后，localStorage 中的数据仍然可以被访问。所有浏览器窗口可以共享 localStorage 的数据.
4.web sql Databases:除了 DOM Storage 以外，HTML5 中还有另外一种数据存储方式 Web SQL Database。它提供了基本的关系数据库功能，支持页面上的复杂的、交互式的数据存储。它既可以用来存储用户产生的数据，也可以作为从服务器获取数据的本地高速缓存。例如可以把电子邮件、日程等数据存储到数据库中。Web SQL Database 支持数据库事务的概念，从而保证了即使多个浏览器窗口操作同一数据，也不会产生冲突。
示例：（这才是重点啊！）
目前我只尝试过Application Cache，所以也只给出这个例子。
开发环境：Apache+php+（windows下的safari，chrome，firefox）/ipod touch下的safari
目的：缓存我指定的index.html和其中的jquery.js资源文件。index.html中的图片不缓存。
文件目录分布如下：
/jqueryapp/
---------------------------------------------
1.index.html
2.jquery.js
3.tetris.php(可能大家觉得这个文件很奇怪，其实是用来发送manifest的mime type的。不然就要修改apache的mime.types或者用.htaccess，很多人没有这个条件，比如我)
4.tetris.manifest
---------------------------------------------
index.html代码
&!DOCTYPE html&是用来声明它是一个html5文档。
&html manifest=&tetris.php&&加上&manifest=&tetris.php&来指定资源列表文件。tetris.php就是指定需要缓存的资源文件列表。
tetris.php代码
先发送header头部，确定这是一个text/cache-manifest类型文件。再把tetris.manifest中的列表都进来。
tetris.manifes代码
有些文章说包涵manifest的html可以不用写自身。我试了，不写真的也可以。
再说说manifest的书写规则吧。
第一行必须写上CACHE MANIFEST，然后每个资源文件一行，注释用#。
后记：关于manifest的mime type声明
html5提供的这种方法必须保证&html manifest=&文本文件&&中的文本文件（任意名字和任意扩展名）是text/cache-manifest类型的。即其header必须声明其类型是text/cache-manifest的。
其实如果你有修改apache服务器或者别的web服务器的权限你完全可以不用tetris.php这个文件。在index.html中的直接用&&html manifest=&tetris.manifest&&就可以。
修改apache的mime.types配置文件，在其中加上下面这句。
text/cache-manifest
或者用.htaccess，加添下面那句（我没尝试）。
AddType&text/cache-manifest用我上面的方法的好处就是不用修改和添加任何配置文件。利用php来发送header来告诉浏览器我是text/cache-manifest类型的。
参考资料：
非常的详细讲解了离线应用的储存策略
3.&详细讲了manifest的用法
4.&讲了.h的用法
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：250596次
积分：3349
积分：3349
排名：第8451名
原创：11篇
转载：540篇
评论：13条
(1)(3)(10)(1)(9)(5)(4)(7)(2)(4)(1)(2)(3)(4)(3)(6)(2)(6)(8)(17)(7)(9)(6)(28)(61)(30)(18)(6)(4)(1)(5)(5)(7)(24)(18)(19)(3)(3)(22)(8)(21)(10)(9)(12)(29)(28)(53)(2)(7)> 博客详情
因为是来公司之后接手的第一个项目，而此前公司从未接过同类型的项目，所以，工作中遇到的困难完全超乎我以及各位头头的想象。当然，他们是停留在想，而我要做的是解决这些问题，最终出成果。
此前一直做网站，没有做过web app，更别提Hybrid App，所以，这两个月以来，各种问题层出不穷。回归正题，说说具体遇到的问题，虽然很多问题最终只是被我绕过去了，但是，我知道下次绝对不会。
1.关于iPad不同版本的问题
［关于动画－－全屏左右滑动显示问题］
其实ipad三个版本在模样上没差多少，当然2比1多了个摄像孔，但是性能上却相差不少。我对硬件没研究，不知道怎么表达。只知道，做全屏滑动效果时，iPad2和3，加载本地资源如图片等的速度相当快，滑动效果非常流畅。之前尝试着用css3自己写了一个动画效果，在在ipad2和3上效果不错，但是在ipad1上滑动时，即使图片已经完全加载完毕，滑动时仍然有撕裂的效果，被头否决了。于是选用了Tween这个插件，这个被我整合到用户随机进入某个页面时，上下页之间的滑动衔接效果。还用了swipe.js这个插件，有些页面拥有整屏幻灯，于是挑了swipe这个插件。插件的好处就是大牛们都封装的相当漂亮，拿来用就行。
可惜的是，粗略看了下别人得代码之后，还是没明白自己写得问题在哪。还需要事件研究。
［关于分辨率－－图片精度问题］
最郁闷的就是图片精度问题了，iPad3的精度是iPad2的两倍。我对图片的精度以及像素尺寸现在仍然很晕，不太明白其终究原因。譬如，我将一张（像素）的图片放到iPad3上，非常模糊，此时，我在样式中定义图片的大小为1024px*768px。让设计除了一张，内容一样，但是为（像素）的图片，我放到iPad3上，图片大小仍然给的是1024px*768px，此时，图片显示得非常清晰。这个差异知道之后是小事，但是因为没有知道，所以到了要交第二个demo演示版的时候，才突然发现这个问题。哎，测试不到位，临阵手忙脚乱。
到网上搜了一些图片方面的知识，都是大堆术语，我现在又忘了，哎。这是我的软肋所在。
［关于safari问题－－不同iPad不同版本，且与pc上大有不同］
哎。。。。没时间写了。。。。下下周项目完工之后再写吧。。。
2.关于页面结构和样式问题－－包括如何兼容iPad123的问题
3.操作本地数据库回调问题、在异步中同步、在同步中异步然后解决同步需要（总之，各种凌乱）
4.对象封装问题－－接口、属性神马的东东
5.全局变量问题－－全局变量控制问题
6.全局js结构问题－－
7.事件注册问题－－重新绘制DOM比解除绑定更好
8.js文件拆分问题－－
9.js模板解析问题－－
10.js数据解析问题－－
11.所用到的插件：
plugin-iscroll.js // 上下滑动，支持移动手持设备触摸滑动
plugin--swipe.js// 左右滑动
pl-menu.js //水滴菜单效果
12.触摸门事件－－多指触控，每只手指离开屏幕时都会导致刷新touch事件
----------------------------------------------------------------------------------------
【1】【ipad的safari中，相对外层绝对浮动的曾必须有固定高度和宽度（参见moen项目首页右下角播放图标）】
【2】【vedio.purse()和vedio.play()在pc的safari上不兼容的，但在ipad里兼容】
【3】load（）可以用来判断dom元素，如img是否加载成功。但是，当图片已经加载过。再次进入这个页面时，由于有缓存，图片将不再加载，从而导致load（）中的程序块不运行。所以在load之前必须判断，图片的大小是否已经为加载完成后的大小。
注意：此处img不可以用css来定义样式，否则将导致判断失败。
【4】【ipad safari不支持html5里音频的自动播放，但支持play（）方法】
注：【pc 上safari 不识别play（）方法，并会报错导致js停止运行】
按html5的规则如下代码：
& & &audio src="jadk_1_1_2_converted.mp3" controls autoplay loop &
& & HTML5 audio not supported
& & &/audio&
在chrome浏览器里都可以自动播放mp3音频，但是在ipad safari里却不能自动播放，需要点击播放才可以播。
以前在ios4中可以用iframe来调用mp3实现自动播放，代码如下：
&iframe height="10" width="100" frameborder="0" src="jadk_1_1_2.mp3" &&/iframe&
但是在ios5后就不能自动播放了
**可以把play（）或stop（）注册到其它dom元素的点击事件上，也会促发播放和停止的效果。但一定必须是点击事件。而且，这个dom元素需要跟audio元素处于相同的位置。参见moen项目中，首页和菜单页右下角的点击播放按钮。
**另一种方法是交给后台处理，向服务器发送请求判断播放哪首音乐和播放次数以及暂停等效果。
**还有一种办法是，如果是把web装载成app形式，可以通过做以下设置，让声音自动播放。
&video id="player" width="480" height="320" webkit-playsinline&
**webview.allowsInlineMediaPlayback = YES;
self.webView.allowsInlineMediaPlayback = YES;
& & self.webView.mediaPlaybackRequiresUserAction = NO;
【5】【ipad 中 safari的click事件注册问题】
**只能注册在能本身就拥有点击事件属性的元素上，如input，如button，如a，如img。记住，此处，a必须加上href属性才能注册点击事件。
【6】audio 高度问题设置
在mobile safari中，即使将不需要显示的 audio 的 display 设为 none，也会占用高度。最好的办法是，将display设为none的同时，也设置 position 为 absolute，然后设置偏移。这样就不会占用高度了。
【7】audio（video）stop（） 和 pause（）问题
在ipad的safari中，使用stop（）会导致报错，音乐并不能停止播放。但可以使用pause（）事件，让音乐暂停播放。
【8】为a 注册click事件之后，点击a，a会有灰色背景。如果想消除，只能将事件注册到a内的img上，或者，给a注册touchmove事件。
【safari开发文档及帮助文档】
/hk/safari/what-is.html
/devcenter/safari/index.action
/hokyhu/archive//2325833.html
/ltnews/59.html
/a98/_2.shtml
/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
/iphone-280221.htm
http://www.chineselinuxuniversity.net/articles/42551.shtml
/rayoctopus/archive//2113441.html
/zh-cn/articles/javascript-first-class-citizen-function/?cid=sw:prccsdn229032
/pifoo/archive//webkit-touch-event-1.html
人打赏支持
参与源创会
领取时间：
“”在线下联结了各位 OSCer，推广开源项目和理念，很荣幸有你的参与~
领取条件：参与过开源中国“源创会”的 OSCer 可以领取
码字总数 331264
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥iOS Web App 怎么变成本地应用 (转) - 操作系统当前位置:& &&&iOS Web App 怎么变成本地应用 (转)iOS Web App 怎么变成本地应用 (转)&&网友分享于：&&浏览：95次iOS Web App 如何变成本地应用 (转)
1、放到桌面
其实这个最简单啦，点浏览器的加号（日注：新版safari中已经不是加号了，而是iOS中经常表示“更多操作”的箭头），就会有一个菜单，添加到屏幕就行。
2、设置图标和启动画面
添加到屏幕后，默认的图标是一个纯白色图标，启动画面则是上次运行时的画面截图（所以感觉不到有启动画面）。为了更像原生的App，我们添加一下图标和启动画面。
图标的添加方法是在head区添加如下代码：
rel="apple-touch-icon"href="icon.png"
其中，icon.png是图标，必须为png格式，大小为5757像素（日注：iPad1/2为7272，iPhone3为5757，retina屏对应2，即iPad3为144144，iPhone4(s)为114114），不需要添加圆角和光影效果，iOS自己会处理。（日注：也可处理好圆角和光影，让iOS不再自动添加效果。）
启动画面的添加方法也差不多：
rel="apple-touch-startup-image"href="startup.png"
其中，startup.png是图标，必须为png格式，纵向图片，iphone/itouch的大小为320460，ipad为7681004。
要说明的是，启动画面的时间会很短，而且这个时间似乎是不可控的，个人感觉是在页面ready的时候启动画面消失。另外，在我试验用的itouch3上，图标和启动画面均未生效，iphone4和ipad上有效。（日注：关于启动画面是否可以横屏的问题，我找了很久没有找到对应的方法，但上次WebRebuild广州站，有演讲嘉宾说可以实现，待考。）
3、隐藏地址栏
为了更像本地App，我们要隐藏掉地址栏和系统工具栏，而在隐藏这个之前，我们必须设定程序全屏，否则无效。（日注：这里之前理解有误，第二个设定其实是底栏样式。）
name="apple-mobile-web-app-capable"content="yes"
设定顶栏颜色为黑色（也可设为white或者black-translucent）：
name="apple-mobile-web-app-status-bar-style"content="black"
4、控制用户的缩放
作为一个网页，事实上可以无限缩放的（当然，缩小到比viewport还小时会自动充满viewport），而作为一个程序，我们有时候不希望这样的事情发生，如下代码可以解决：
name="viewport"content="width=device- initial-scale=1.0; minimum-scale:1.0; maximum-scale:2.0; user-scalable=yes"
上述代码的意思是，viewport的宽度为设备宽度，initial-scale是初始的缩放值。（按照我的理解，viewport的宽度值和initial-scale这两个属性应该是不可以同时存在的，因为定义了一个值会自动推算出另一个值，比如我将viewport的宽度设为屏幕宽度的2倍，那么initial-scale应该自动为0.5，待验证。）后面两个自然是能缩放的最小和最大值了。
如果不想让用户缩放，则可以将最小值和最大值设为一样，都为1.0，或者直接将user-scalable设为no。
到这里，我们的App已经很像原生App了。可是，如果断网了怎么办？于是，最后的一步——离线。离线之后，我们的程序就可以在没有网络的时候正常运行，完全和原生App一样了！
上述已经说过的特性都是iOS独有的（日，事实上有很多已经变成事实标准了，比如viewport控制），但是离线是HTML5的特性。
要实现离线，首先得有一个先决条件：能修改web服务器的MIME（确切地讲，是MIME中有manifest类型）。关于MIME是什么就不详细介绍了。（日，关于这点也不太准确，在PC端的chrome中，并不关于.manifest文件的MIME，但是在iOS 4.3和5.0的safari中，都需要有准确的MIME才能使离线正常工作。）
首先，我们需要在web服务器中将.manifest后缀的MIME设为“text/cache-manifest”。对IIS，在站点属性中可以设置，对apache，则能直接通过修改.htaccess文件实现。不详述。
接下来，我们需要创建一个离线文件列表，列表中的文件将被缓存供下次使用。
我建立的名叫cache.manifest，内容如下：
CACHE MANIFEST
# xpad v0.1.0009# 指明缓存入口
index.html
xpadicon.png
xpadstartup.png
images/pic.png
# 以下资源必须在线访问
# 如果index.php无法访问则用404.html代替
FALLBACK:/index.php /404.html
开头的是注释，这个好理解。文件分为三段：CACHE、NETWORK、FALLBACK。
CACHE表示要缓存的文件，即可以离线使用的资源，可以看到，html/css/js/pic都可以缓存，当然，其他类型的也可以。
NETWORK表示必须在线访问的，例如登录之类的页面。
FALLBACK表示如果在线访问失败时，用什么文件替换。上面的代码表示index.php访问失败时用404.html替换。这个可以用在网络不好的时候，例如一个离线应用去访问一个在线页面，但是没有访问成功，这时就可以调用一个已经离线了的页面去，不破坏用户体验。
再接下来，就是告诉iOS，我们的程序需要离线，方法是在访问的页面中的html标签中加入一个属性标记上面说的manifest文件：
访问一次，只要文件传输完毕，我们的应用就成功离线啦！这时断开网络再次打开，依然可以使用！
App化的操作基本都完成啦，可以先喝口茶休息下。
接下来呢？接下来你可能会修改你的页面，但是，悲剧来了，你发现无论你怎么刷新，页面都没有变化，即使清掉缓存也不行。
事实上，更改页面文件并不会导致离线文件也更新，而清掉缓存也不会清掉离线的文件！（日注：事实上，这里发生的情况是带有manifest属性的页面即使没有被写到manifest文件中，也会被离线下来，导致入口文件根本更新不到。）更新缓存的条件是：.manifest内容发生变化！所以如你看到那样，我在最前面加入了版本，这样一方面可以标版本，另一方面刚好让程序更新缓存。
我们的Web App在打开时会检测更新，但是，本次打开使用的仍然会是老版本，如果更新完成，再刷新或者再次启动会是新版本，而如果更新过程未完成，则仍然是老版本。这中间不会有任何提示。（日注：简单地说，就是最少要启动两次才能应用新版本。）当然，可以用脚本更新，不详述。
至此，一个完美的Web App就诞生了！
现在唯一的局限就是技术限制了——网页不可能调用系统的API，如文件IO，摄像头等等。要使用这些功能，就得老老实实地下载SDK回来开发原生的App。可是，如果用HTML+js+css，也能调用本地API，和原生App实现同样的功能，是不是很心动？事实上，已经有这样的框架出现，如PhoneGap等等。有兴趣不妨Google之。因超出本文范围，故就此打住。
=======================================
对于UIWebView不支持html5 cache的问题，可以参考：
/questions/1540240/html5-cache-manifest-in-a-uiwebview
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有