2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。iOS Web App 如何变成本地应用 (转) - 听雨轩 - ITeye博客
博客分类：
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
浏览: 864152 次
来自: 厦门
dandankele 写道正好最近做点餐系统需要打印小票，网上 ...
正好最近做点餐系统需要打印小票，网上找了很久的打印控件，不是需 ...
中文替换不行，英文替换是ok的。
感谢分享。可以用。。。。。。。。
感谢提供思路，我正好也想要这个东东的破解。回去试试看先Native App开发Native App开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由&云服务器数据+APP应用客户端&两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。Web App开发Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由&HTML5云网站+APP应用客户端&两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。Web APP应用呈现以下特点：（1）每次打开APP，都要通过APP框架向云网站取UI及数据；（2）手机用户无法上网则无法访问APP应用中的数据。（3）框架型的APP无法调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）（4）框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量；（5）框架型APP应用的安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端；（6）APP用户每次都可以访问到实时的最新的云端数据；（7）APP用户无须频繁更新APP应用，与云端实现的是实时数据交互；适用企业：电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。Native App（原生型APP）应用呈现以下特点：（1）每次获取最新的APP功能，需要升级APP应用；（2）原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架；（3）手机用户无法上网也可访问APP应用中以前下载的数据。（4）原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）（5）APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。移动Web无所不在，移动Web是目前唯一的支持各种设备访问的平台，与桌面Web一样，移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与桌面任务有效地连接了起来；而开发Native App可以充分利用设备的特性，而这一点往往是Web浏览器做不到的，所以对一个产品本身而言，Native App是最佳的选择。
阅读(...) 评论()ul').hide()" onmouseenter="jQuery('.sitegroup>ul').show()">
绔嬪嵆鍏呭}