今天,我发现淘宝手机app可以把用户喜欢的店铺保存到app的桌面上,感觉很神奇,研究了下怎么做,并记录下来顺便分享下心得。附上demo地址
下面是实际效果:
安装描述文件
safari生成webclip
这种效果就是苹果的webclip,app上要生成它主要有2种方式。
通过安装描述文件的方式生成webclip
- 使用iphone configuration utility生成一个webclip描述文件。
下载iphone configuration utility后配置一个描述文件,导出即可。
- 使用safari安装这个描述文件。
使用[UIApplication sharedApplication] openURL:的方式无法直接打开描述文件,UIWebView也不支持打开这种文件类型。
safari是可以直接安装描述文件的,但是safari和应用是2个独立的沙盒,所以这里需要解决应用和safari共享文件的问题。这里使用的思路是把app作为一个服务器,让safari访问这个服务器获取到描述文件进行安装,因为程序进入后台后还可以运行一段时间,所以这里是可行的。
可以使用第三方库CocoaHTTPServer在app端运行一个服务器。safari中访问 loacalhost:端口号/目录即可打开文件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
|
safari中打开关键代码
1 2 3 4 5 |
|
通过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
1 2 3 4 5 6 7 8 9 |
|
用户打开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。
1 |
|
其他可以做的细节
- html和配置文件,我们都可以通过替换字符串等方式修改最终生成的内容,以此来针对不同用户生成不同内容。
1 2 3 4 5 6 7 |
|
- 端口号不一定要写死,这里仅仅是方便测试。
总结
2种方式都可以达到最终效果,选取哪种方式去实现,可以自己评估优劣。由于本人对服务端和前端不太熟悉,实现还有2点不足之处,希望有人能给出些比较好的方案。
可能由于浏览器缓存的问题,如果之前safari打开过localhost:端口号,下次再进入时可能不会去重定向,导致webclip保存的不是重定向后的url,而是原本请求的url。
重定向返回的response header长度这里也是有限制的,过长会造成截断,这里应该是可以通过代码改进的。