移动端Hybrid-iOS添加快捷方式到主屏幕_html/css

来源：动视网责编：小采时间：2020-11-27 16:38:37

移动端Hybrid-iOS添加快捷方式到主屏幕_html/css

移动端Hybrid-iOS添加快捷方式到主屏幕_html/css_WEB-ITnose:关于Hybrid研发模式，这里就不多说了，是目前移动端主流的研发模式。当我们的APP内部集成有很多Web实现的功能时，甚至某些Web实现的模块作为一部分独立的功能，打开的频率很高，这个时候，可以将对应的功能页面以快捷方式添加到桌面上。如果Web功能与APP

推荐度：

点击下载本文 文档为doc格式

导读移动端Hybrid-iOS添加快捷方式到主屏幕_html/css_WEB-ITnose:关于Hybrid研发模式，这里就不多说了，是目前移动端主流的研发模式。当我们的APP内部集成有很多Web实现的功能时，甚至某些Web实现的模块作为一部分独立的功能，打开的频率很高，这个时候，可以将对应的功能页面以快捷方式添加到桌面上。如果Web功能与APP

调用Safari访问外部页面，将外部页面作为快捷页面添加到桌面。优点：实现简单，工作量少，页面灵活可随时更改。缺点：无网状态下，无法生成快捷方式。

实现方案二：

通过应用内部启动httpServer，调用safari访问localhost，同时，在主页通过跳转到新的Data URI页面。优点：不需要服务器，没网也能完成操作。缺点：依赖的类库较多，而且实现较麻烦。

功能封装及技术实现

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

封装方法

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

DLAddToDesktopLib.gif

功能封装

用到的一些类库

CocoaHTTPServer

GTMBase64

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

lib.png

3.在需要添加到主页面的按钮事件中加入如下代码

 DLAddToDesktopHandler *handler = [DLAddToDesktopHandler sharedInsance]; NSString *imageString = [[UIImage imageNamed:@"webIcon"] dataURISchemeImage]; [handler addToDesktopWithDataURISchemeImage:imageString title:@"Donglei" urlScheme:@"DLAddToDesktop://"];

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

URL Schemes.jpg

下面是一些主要的方法，

/** * @brief 创建DLCreateShortcutHandler单例 * * @return DLCreateShortcutHandler单例 */+(DLCreateShortcutHandler *)sharedInsance;/** * @brief 通过Safari添加快捷方式到桌面 * * @param dataURISchemeImage data URI scheme * @param title 快捷方式桌面名称 * @param urlScheme ios APP的URL Scheme * * @return void */- (void)addToDesktopWithDataURISchemeImage:(NSString *)dataURISchemeImage title:(NSString *)title urlScheme:(NSString *)urlScheme;

/** * @brief 生成Data URL Scheme 形式的图片字符串 * * @return Data URL Scheme 形式的图片字符串 */- (NSString *)dataURISchemeImage;

技术实现

HTML 相关

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

封装的库中，HTML头文件有如下代码

     DLCSTitle

其中，

apple-mobile-web-app-capable是用来定义应用全屏展示的。

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

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

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

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

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

CocoaHTTPServer 相关

CocoaHTTPServer封装的很好，用起来也很简单

 //config HttpServer _myHTTPServer = [[HTTPServer alloc] init]; [_myHTTPServer setType:@"_http._tcp."]; [_myHTTPServer setPort:port]; //setWebPath NSString *serverWebPath = [self getServerWebPath]; BOOL created = [[NSFileManager defaultManager] createDirectoryAtPath:serverWebPath withIntermediateDirectories:YES attributes:nil error:nil]; if(created){ [_myHTTPServer setDocumentRoot:serverWebPath]; }

通过以上代码我们就建立了一个本地服务器，然后调用start开启本地服务即可，

- (void)startServer{ NSError *error; if([_myHTTPServer start:&error]) { DDLogInfo(@"Started HTTP Server on port %hu", [_myHTTPServer listeningPort]); } else { DDLogError(@"Error starting HTTP Server: %@", error); }}

业务逻辑实现相关

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