iOS Web App 开发心得(三)：App化由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“webapp开发技巧总结”。
iOS Web App 开发心得
（三）：App化
三、App化
1、放到桌面
其实这个最简单啦，点浏览器的加号，就会有一个菜单，添加到屏幕就行。
2、设置图标和启动画面
添加到屏幕后，默认的是一个白色图标，启动画面则是上次运行时的画面截图（所以感觉不到有启动画面）。
为了更像原生的App，我们添加一下图标和启动画面。
图标的添加方法是在head区添加如下代码：
其中，xpadicon.png是图标，必须为png格式，大小为57*57像素，不需要添加圆角和光影效果，iOS自己会处理。
启动画面的添加方法也差不多：
其中，xpadstartup.png是图标，必须为png格式，纵向图片，iphone/itouch的大小为320*460，ipad为768*1004。
要说明的是，启动画面的时间会很短，而且这个时间似乎是不可控的，个人感觉是在页面ready的时候启动画面消失。
另外，在我试验用的itouch3上，图标和启动画面均未生效，iphone4和ipad上有效。
3、隐藏地址栏
为了更像本地App，我们要隐藏掉地址栏，而在隐藏这个之前，我们必须设定程序全屏，否则无效。
全屏：
隐藏地址栏：
4、控制用户的缩放
作为一个网页，事实上可以无限缩放的（当然，缩小到比viewport还小时会自动充满viewport），而作为一个程序，我们有时候不希望这样的事情发生，如下代码可以解决：
上述代码的意思是，viewport的宽度为设备宽度，initial-scale是初始的缩放值。（按照我的理解，viewport的宽度值和initial-scale这两个属性应该是不可以同时存在的，因为定义了一个值会自动推算出另一个值，比如我将viewport的宽度设为屏幕宽度的2倍，那么initial-scale应该自动为0.5，待验证。）后面两个自然是能缩放的最小和最大值了。
如果不想让用户缩放，则可以将最小值和最大值设为一样，都为1.0，或者直接将user-scalable设为no。
5、离线
到这里，我们的App已经很像原生App了。可是，如果断网了怎么办？
于是，最的一步–离线。离线之后，我们的程序就可以在没有网络的时候正常运行，完全和原生App一样了！
上述的特性都是iOS的，但是离线是HTML5的特性。
要实现离线，首先得有一个先决条件：能修改web服务器的MIME（确切地讲，是MIME中有manifest类型）。关于MIME是什么就不详细介绍了。首先，我们需要在web服务器中将.manifest后缀的MIME设
为”text/cache-manifest”。对IIS，在站点属性中可以设置，对apache，则能直接通过修改.htacce文件实现。不详述。
接下来，我们需要创建一个离线文件列表，列表中的文件将被缓存供下次使用。
我建立的名叫cache.manifest，内容如下：
CACHE MANIFEST
# xpad v0.1.0009
# 指明缓存入口
CACHE:
index.html
index.c
jquery.js
xpadicon.png
xpadstartup.png
images/pic.png
# 以下资源必须在线访问
NETWORK:
login.php
# 如果index.php无法访问则用404.html代替
FALLBACK:
/index.php /404.html
#开头的是注释，这个好理解。文件分为三段：CACHE、NETWORK、FALLBACK。CACHE表示要缓存的文件，即可以离线使用的资源，可以看到，html/c/js/pic都可以缓存，当然，其他类型的也可以。
NETWORK表示必须在线访问的，例如登录之类的页面。
FALLBACK表示如果在线访问失败时，用什么文件替换。上面的代码表示
index.php访问失败时用404.html替换。这个可以用在网络不好的时候，例如一个离线应用去访问一个在线页面，但是没有访问成功，这时就可以调用一个已经离线了的页面去，不破坏用户体验。
再接下来，就是告诉iOS，我们的程序需要离线，方法是在访问的页面中的html标签中加入一个属性标记上面说的manifest文件：
访问一次，只要文件传输完毕，我们的应用就成功离线啦！这时断开网络再次打开，依然可以使用！
App化的操作基本都完成啦，可以先喝口茶休息下。
接下来呢？接下来你可能会修改你的页面，但是，悲剧来了，你发现无论你怎么刷新，页面都没有变化，即使清掉缓存也不行。
事实上，更改页面文件并不会导致离线文件也更新，而清掉缓存也不会清掉离线的文件！
更新缓存的条件是：.manifest内容发生变化！所以如你看到那样，我在最前面加入了版本，这样一方面可以标版本，另一方面刚好让程序更新缓存。
我们的Web App在打开时会检测更新，但是，本次打开使用的仍然会是老版本，如果更新完成，再刷新或者再次启动会是新版本，而如果更新过程未完成，则仍然是老版本。这中间不会有任何提示。
（当然，可以用脚本更新，不详述。）
至此，一个完美的Web App就诞生了！
现在唯一的局限就是技术限制了–网页不可能调用系统的API，如文件IO，摄像头等等。要使用这些功能，就得老老实实地下载SDK回来开发原生的App。可是，如果用HTML+js+c，也能调用本地API，和原生App实现同样的功能，是不是很心动？
事实上，已经有这样的框架出现，如PhoneGap等等。有兴趣不妨Google之。因超出本文范围，故就此打住。
刀豆文库小编为你整合推荐7篇APP开发合同，也许这些就是您需要的文章，但愿刀豆文库能带给您一些学习、工作上的帮助。......
APPLE ITUNES APP 软件开发合同甲方：乙方：甲、乙双方经友好协商，甲方委托乙方开发《_________________》，以下简称“本软件”，一致同意签订如下合同。一、合作内容甲方委托乙方开......
APP开发合同（推荐16篇）由网友“阿涛”投稿提供，下面是小编为大家整理后的APP开发合同，供大家参考借鉴，希望可以帮助您。篇1：APP开发合同 甲方名称： 乙方名称：河北xx网络科技有限公司......
Html5与APP开发比较心得引言大量新生移动设备的兴起，改变了当今互联网的格局。在技术的发展上，HTML5会取代 App 应用吗？或者说能够在多大程度上取代呢？在 HTML5 规范中，已经加入......
泽思网络 – 上海APP开发商iOS Web App开发心得（四）1、关于jQuery事实上，jQuery已经针对移动设备推出了jQuery Mobile（2012年8月27日注：jQuery和jQuery Mobile完全不是一个东西），但......
