傲视苍穹iOS《Objective-C》VIP专题iOS开发专题网络

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

2016-04-01  本文已影响4047人  DongLei

转载请注明出处

感谢三楼Wind_is_warm提的需求,针对Wind_is_warm的问题,程序增加了判断用户是否安装有目标APP的能力,如用户手机装有目标APP,点击桌面快捷图标,会直接跳转到应用,如用户未安装目标APP则会跳转到目标APP的下载页。

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

addBaiduToDesktop.gif

基本实现思想

利用Safari自带的添加到主屏幕功能,有两种实现方案,

实现方案一:

调用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

功能封装

用到的一些类库

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

lib.png

3.在需要添加到主页面的按钮事件中加入如下代码,以下示例代码以跳转微信为例,如集成到自己的APP中,需将urlScheme和appDownloadUrl,需改为自己需要的参数。

DLAddToDesktopHandler *handler = [DLAddToDesktopHandler sharedInsance];
NSString *imageString = [[UIImage imageNamed:@"webIcon"] dataURISchemeImage];
[handler addToDesktopWithDataURISchemeImage:imageString
                                      title:@"Donglei"
                                  urlScheme:@"weixin://"
                             appDownloadUrl:@"https://appsto.re/cn/S8gTy.i"];

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
 *  @param  appDownloadUrl       应用下载地址
 *  @return void
 */
- (void)addToDesktopWithDataURISchemeImage:(NSString *)dataURISchemeImage title:(NSString *)title urlScheme:(NSString *)urlScheme appDownloadUrl:(NSString *)appDownloadUrl;


/**
 *  @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头文件有如下代码

<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="text/html charset=UTF-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <link rel='apple-touch-icon' href='DLCSImageData'>
    <title>DLCSTitle</title>
</head>

其中,

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

<link rel="apple-touch-startup-image" sizes="2048x1496" href="">

但我们封装的代码中并没有加入此功能,
关于没有实现的原因,其实很简单,由于我们的技术实现方案是首先通过访问本地地址,然后跳到一个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打开本地服务。大家可以去阅读我的源码。

项目地址

项目地址:https://github.com/dlgenius/DLAddToDesktop

Thanks

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

上一篇下一篇

猜你喜欢

热点阅读