iOS Web App 如何变成本地应用 (转)

1、放到桌面

其实这个最简单啦，点浏览器的加号（2012年8月27日注：新版safari中已经不是加号了，而是iOS中经常表示“更多操作”的箭头），就会有一个菜单，添加到屏幕就行。

2、设置图标和启动画面

添加到屏幕后，默认的图标是一个纯白色图标，启动画面则是上次运行时的画面截图（所以感觉不到有启动画面）。为了更像原生的App，我们添加一下图标和启动画面。

图标的添加方法是在head区添加如下代码：

<linkrel="apple-touch-icon"href="icon.png"/>

其中，icon.png是图标，必须为png格式，大小为5757像素（2012年8月27日注：iPad1/2为7272，iPhone3为5757，retina屏对应2，即iPad3为144144，iPhone4(s)为114114），不需要添加圆角和光影效果，iOS自己会处理。（2012年8月27日注：也可处理好圆角和光影，让iOS不再自动添加效果。）

启动画面的添加方法也差不多：

<linkrel="apple-touch-startup-image"href="startup.png"/>

其中，startup.png是图标，必须为png格式，纵向图片，iphone/itouch的大小为320460，ipad为7681004。

要说明的是，启动画面的时间会很短，而且这个时间似乎是不可控的，个人感觉是在页面ready的时候启动画面消失。另外，在我试验用的itouch3上，图标和启动画面均未生效，iphone4和ipad上有效。（2012年8月27日注：关于启动画面是否可以横屏的问题，我找了很久没有找到对应的方法，但上次WebRebuild广州站，有演讲嘉宾说可以实现，待考。）

3、隐藏地址栏

为了更像本地App，我们要隐藏掉地址栏和系统工具栏，而在隐藏这个之前，我们必须设定程序全屏，否则无效。（2012年8月27日注：这里之前理解有误，第二个设定其实是底栏样式。）

全屏：

<metaname="apple-mobile-web-app-capable"content="yes"/>

设定顶栏颜色为黑色（也可设为white或者black-translucent）：

<metaname="apple-mobile-web-app-status-bar-style"content="black"/>

4、控制用户的缩放

作为一个网页，事实上可以无限缩放的（当然，缩小到比viewport还小时会自动充满viewport），而作为一个程序，我们有时候不希望这样的事情发生，如下代码可以解决：

<metaname="viewport"content="width=device-width; 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。

5、离线

到这里，我们的App已经很像原生App了。可是，如果断网了怎么办？于是，最后的一步——离线。离线之后，我们的程序就可以在没有网络的时候正常运行，完全和原生App一样了！

上述已经说过的特性都是iOS独有的（2012年8月27日，事实上有很多已经变成事实标准了，比如viewport控制），但是离线是HTML5的特性。

要实现离线，首先得有一个先决条件：能修改web服务器的MIME（确切地讲，是MIME中有manifest类型）。关于MIME是什么就不详细介绍了。（2012年8月27日，关于这点也不太准确，在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# 指明缓存入口 
CACHE: 
index.html 
index.css 
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/css/js/pic都可以缓存，当然，其他类型的也可以。

NETWORK表示必须在线访问的，例如登录之类的页面。

FALLBACK表示如果在线访问失败时，用什么文件替换。上面的代码表示index.php访问失败时用404.html替换。这个可以用在网络不好的时候，例如一个离线应用去访问一个在线页面，但是没有访问成功，这时就可以调用一个已经离线了的页面去，不破坏用户体验。

再接下来，就是告诉iOS，我们的程序需要离线，方法是在访问的页面中的html标签中加入一个属性标记上面说的manifest文件：

 

访问一次，只要文件传输完毕，我们的应用就成功离线啦！这时断开网络再次打开，依然可以使用！

App化的操作基本都完成啦，可以先喝口茶休息下。

接下来呢？接下来你可能会修改你的页面，但是，悲剧来了，你发现无论你怎么刷新，页面都没有变化，即使清掉缓存也不行。

事实上，更改页面文件并不会导致离线文件也更新，而清掉缓存也不会清掉离线的文件！（2012年8月27日注：事实上，这里发生的情况是带有manifest属性的页面即使没有被写到manifest文件中，也会被离线下来，导致入口文件根本更新不到。）更新缓存的条件是：.manifest内容发生变化！所以如你看到那样，我在最前面加入了版本，这样一方面可以标版本，另一方面刚好让程序更新缓存。

我们的Web App在打开时会检测更新，但是，本次打开使用的仍然会是老版本，如果更新完成，再刷新或者再次启动会是新版本，而如果更新过程未完成，则仍然是老版本。这中间不会有任何提示。（2012年8月27日注：简单地说，就是最少要启动两次才能应用新版本。）当然，可以用脚本更新，不详述。

小结

至此，一个完美的Web App就诞生了！

现在唯一的局限就是技术限制了——网页不可能调用系统的API，如文件IO，摄像头等等。要使用这些功能，就得老老实实地下载SDK回来开发原生的App。可是，如果用HTML+js+css，也能调用本地API，和原生App实现同样的功能，是不是很心动？事实上，已经有这样的框架出现，如PhoneGap等等。有兴趣不妨Google之。因超出本文范围，故就此打住。

 

=======================================

对于UIWebView不支持html5 cache的问题，可以参考：

http://stackoverflow.com/questions/1540240/html5-cache-manifest-in-a-uiwebview