ios自动加了html,移动端HybridiOS添加快捷方式到主屏幕_html/css_WEBITnose

关于Hybrid研发模式&＃xff0c;这里就不多说了&＃xff0c;是目前移动端主流的研发模式。当我们的APP内部集成有很多Web实现的功能时&＃xff0c;甚至某些Web实现的模块作为一部分独立的功能&＃xff0c;打开的频率很高&＃xff0c;这个时候&＃xff0c;可以将对应的功能页面以快捷方式添加到桌面上。如果Web功能与APP相对独立&＃xff0c;可以通过此快捷方式直接代开Safari&＃xff0c;用户可以在Safari中完成想要的操作。另一方面如果Web功能的实现与APP高度耦合&＃xff0c;或者出于增加APP的用户粘性角度&＃xff0c;可以通过点击此快捷方式唤醒我们的APP并跳转到我们自己APP中的相应模块。

addBaiduToDesktop.gif

基本实现思想

利用Safari自带的添加到主屏幕功能&＃xff0c;有两种实现方案&＃xff0c; 实现方案一&＃xff1a; 调用Safari访问外部页面&＃xff0c;将外部页面作为快捷页面添加到桌面。优点&＃xff1a;实现简单&＃xff0c;工作量少&＃xff0c;页面灵活可随时更改。缺点&＃xff1a;无网状态下&＃xff0c;无法生成快捷方式。 实现方案二&＃xff1a; 通过应用内部启动httpServer&＃xff0c;调用safari访问localhost&＃xff0c;同时&＃xff0c;在主页通过跳转到新的Data URI页面。优点&＃xff1a;不需要服务器&＃xff0c;没网也能完成操作。缺点&＃xff1a;依赖的类库较多&＃xff0c;而且实现较麻烦。

功能封装及技术实现

方案一比较简单&＃xff0c;就不再多说了。本文主要针对方案二&＃xff0c;其中用到的一些知识包括HTML、cocoaHttpServer、Data URI Scheme等&＃xff0c;关于Data URI Scheme相关知识&＃xff0c;可以参考我的另一篇文章。前端-Data URI Scheme&＃xff1a;http://www.jianshu.com/p/ea49397fcd13 封装方法

针对方案二&＃xff0c;对功能进行了封装&＃xff0c;仅需调用3行代码&＃xff0c;即可实现动态添加快捷方式到桌面。项目地址&＃xff1a;https://github.com/dlgenius/DLAddToDesktop

DLAddToDesktopLib.gif

功能封装 用到的一些类库 CocoaHTTPServer

GTMBase64

使用方式&＃xff1a;1.工程中导入CocoaHTTPServer、GTMBase64类库2.将Demo中的DLAddToDesktopLib文件夹拷贝到工程中

lib.png

3.在需要添加到主页面的按钮事件中加入如下代码 DLAddToDesktopHandler *handler &＃61; [DLAddToDesktopHandler sharedInsance]; NSString *imageString &＃61; [[UIImage imageNamed:&＃64;"webIcon"] dataURISchemeImage]; [handler addToDesktopWithDataURISchemeImage:imageString title:&＃64;"Donglei" urlScheme:&＃64;"DLAddToDesktop://"];

4.别忘记设置项目的URL Types

URL Schemes.jpg

下面是一些主要的方法&＃xff0c; /** * &＃64;brief 创建DLCreateShortcutHandler单例 * * &＃64;return DLCreateShortcutHandler单例 */&＃43;(DLCreateShortcutHandler *)sharedInsance;/** * &＃64;brief 通过Safari添加快捷方式到桌面 * * &＃64;param dataURISchemeImage data URI scheme * &＃64;param title 快捷方式桌面名称 * &＃64;param urlScheme ios APP的URL Scheme * * &＃64;return void */- (void)addToDesktopWithDataURISchemeImage:(NSString *)dataURISchemeImage title:(NSString *)title urlScheme:(NSString *)urlScheme; /** * &＃64;brief 生成Data URL Scheme 形式的图片字符串 * * &＃64;return Data URL Scheme 形式的图片字符串 */- (NSString *)dataURISchemeImage;

技术实现 HTML 相关

苹果Safari本身支持网页添加到主屏幕功能&＃xff0c;苹果官方文档参考&＃xff0c;https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

封装的库中&＃xff0c;HTML头文件有如下代码 DLCSTitle

其中&＃xff0c; apple-mobile-web-app-capable是用来定义应用全屏展示的。

apple-mobile-web-app-status-bar-style&＃xff0c;在定义了。apple-mobile-web-app-capable的前提下&＃xff0c;设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效。

viewport&＃xff0c;width用于指定宽度&＃xff0c;initial-scale指定初始化的缩略比例&＃xff0c;minimum-scale指定缩小的比例&＃xff0c;而maximum-scale则是放大的比例&＃xff0c;当然这些缩放都取决于user-scalable——决定用户是否能缩放页面。

rel&＃61;&＃39;apple-touch-icon&＃39; href&＃61;&＃39;DLCSImageData&＃39;&＃xff0c;添到主屏幕的图标&＃xff0c;有两种属性值apple-touch-icon和apple-touch-icon-precomposed&＃xff0c;区别就在于是否会应用iOS中自动给图标添加的那层高光。

另外&＃xff0c;HTML中可以加入下面代码对添加到桌面的快捷方式设置启动页&＃xff0c;使其更像一个APP&＃xff0c;

但我们封装的代码中并没有加入此功能&＃xff0c;关于没有实现的原因&＃xff0c;其实很简单&＃xff0c;由于我们的技术实现方案是首先通过访问本地地址&＃xff0c;然后跳到一个Data URI Scheme形式下的HTML页面&＃xff0c;而添加到主屏幕的也是这个Data URI Scheme形式下的HTML页面&＃xff0c;Data URI 是拼接在地址栏里的&＃xff0c;图片数据经过Data URI形式编码处理&＃xff0c;会生成一个很长的支付串&＃xff0c;启动页图片一般都比较大&＃xff0c;又经过了base64编码&＃xff0c;加上我们添加到主屏幕的icon也经过了这样的处理&＃xff0c;有可能会超出Safari对URL长度的限制&＃xff0c;导致无法打开页面的问题&＃xff0c;还有主要的原因就是data URI Scheme 移动端的性能很低&＃xff0c;不适合内嵌大图。但如果采用方案一&＃xff0c;我们是通过访问外部页面来实现添加到主屏幕功能的&＃xff0c;可以考虑实现此功能。 CocoaHTTPServer 相关

CocoaHTTPServer封装的很好&＃xff0c;用起来也很简单 //config HttpServer _myHTTPServer &＃61; [[HTTPServer alloc] init]; [_myHTTPServer setType:&＃64;"_http._tcp."]; [_myHTTPServer setPort:port]; //setWebPath NSString *serverWebPath &＃61; [self getServerWebPath]; BOOL created &＃61; [[NSFileManager defaultManager] createDirectoryAtPath:serverWebPath withIntermediateDirectories:YES attributes:nil error:nil]; if(created){ [_myHTTPServer setDocumentRoot:serverWebPath]; }

通过以上代码我们就建立了一个本地服务器&＃xff0c;然后调用start开启本地服务即可&＃xff0c; - (void)startServer{ NSError *error; if([_myHTTPServer start:&error]) { DDLogInfo(&＃64;"Started HTTP Server on port %hu", [_myHTTPServer listeningPort]); } else { DDLogError(&＃64;"Error starting HTTP Server: %&＃64;", error); }} 业务逻辑实现相关

这里没有复杂的业务逻辑&＃xff0c;主要是读取HTML文档、替换HTML文件中相应字段、存储HTML文档到HTTPServer的WebPath下&＃xff0c;再通过Safar打开本地服务。大家可以去阅读我的源码。

项目地址

项目地址&＃xff1a;https://github.com/dlgenius/DLAddToDesktop

Thanks

iOS中为网站添加图标到主屏幕以及增加启动画面 http://blog.csdn.net/lgd5979/article/details/7877998...