【第186期】创建webApp快捷方式

【早读君聊聊】今天分享的内容是早读君昨日刚在项目会刚了解的，虽然这种安装方式有见过，但确实不知道是叫webclip。所以今天就普及了解下。。

ps：项目的辛酸泪~~只能另取方案了~~

正文从这开始~~~

发现淘宝手机app可以把用户喜欢的店铺保存到app的桌面上，感觉很神奇，研究了下怎么做，并记录下来顺便分享下心得。附上demo地址

下面是实际效果:

安装描述文件

safari生成webclip

这种效果就是苹果的webclip,app上要生成它主要有2种方式。

1）通过安装描述文件的方式生成webclip

使用iphone configuration utility生成一个webclip描述文件。

下载iphone configuration utility后配置一个描述文件，导出即可。

2）使用safari安装这个描述文件。

使用[UIApplication sharedApplication] openURL:的方式无法直接打开描述文件，UIWebView也不支持打开这种文件类型。

safari是可以直接安装描述文件的，但是safari和应用是2个独立的沙盒，所以这里需要解决应用和safari共享文件的问题。这里使用的思路是把app作为一个服务器，让safari访问这个服务器获取到描述文件进行安装，因为程序进入后台后还可以运行一段时间，所以这里是可行的。

可以使用第三方库CocoaHTTPServer在app端运行一个服务器。safari中访问 loacalhost:端口号/目录即可打开文件。

safari中打开关键代码

通过safari自带功能生成webclip

safari带有一个为当前网页生成webclip的功能，现在我们就需要使用这个方式来生成webclip。

这种方式的工作流程是这样的：先使用app打开safari并显示指定的网页内容（一般是指导用户怎么使用safari生成webclip,并打开safari的js控制），然后用户打开js权限，保存webclip,下次用户点击桌面上的webclip后即可再次打开该网页，触发js,跳回app。

因为用户点开webclip的时候需要获取到网页的所有信息，又因为我们的应用不是长时间在后台运行的，所以需要把所有网页的内容以url的形式中保存在webclip中,这种技术叫做data-url技术。

我们需要app把网页内容通过data-url的形式传给safari,我尝试过使用openurl的传输方式，这种方式不能传输太长的数据，行不通。所以这里的思路也是把app变成一个服务器，safari访问的时候返回302让TA重定向，重定向的url返回我们要传输的data-url,safari重定向后即可显示我们指定的网页内容。这里我们可以用基于CocoaHTTPServer之上封装的库RoutingHTTPServer。

配置并传输data-url

用户打开js

通过safari保存webclip

data-url中加入js

通过safari打开的html是处于safari mode,而直接通过webclip打开的html是处于app mode,可以理解为safari mode是嵌入在safari中的网页，app mode的网页是单独的网页，通过这个状态我们可以控制什么时候调用js,来控制最终是展示当前网页还是跳转到我们指定的app。这里我写的是 sample:// ,可以按照需要替换成app的scheme,即可跳转到app。

其他可以做的细节

html和配置文件，我们都可以通过替换字符串等方式修改最终生成的内容，以此来针对不同用户生成不同内容。

端口号不一定要写死，这里仅仅是方便测试。

总结

2种方式都可以达到最终效果，选取哪种方式去实现，可以自己评估优劣。由于本人对服务端和前端不太熟悉，实现还有2点不足之处，希望有人能给出些比较好的方案。

可能由于浏览器缓存的问题，如果之前safari打开过localhost:端口号，下次再进入时可能不会去重定向，导致webclip保存的不是重定向后的url,而是原本请求的url。

重定向返回的response header长度这里也是有限制的，过长会造成截断，这里应该是可以通过代码改进的。

推荐早读君每晚必看的一个国内著名前端社区的公众号：w3ctech。