iOS 添加快捷方式到桌面

时间 2020-07-08

原文原文链接

前言

最近在乘车码里面作了一个需求，添加快捷方式到桌面，点击桌面图标打开app进入对应页面。功能很小，可是涉及的知识点不少，涉及 openURL、HTML、JavaScript、Data URI Scheme、Base64 等。经过这个需求顺便将这些知识都学习了，而后整理出来。javascript

原理

操做过程其实很简单，就是在 app 里面经过 Safari 浏览器打开一个引导页面，而后点击添加到主屏幕，以下图html

，再点“添加”就行。后面点击图标直接打开app，跳转到对应页面。这个过程里面涉及两个问题前端

添加到桌面时保存的就是引导页面 url，点击打开的时候为啥不是打开引导页面，而是直接跳转到 app里面，这个如何实现？
没网的状况下点击图标，打开页面如何能加载页面内容并打开app呢？

第一个问题的解决办法是这样的，从 app 里面打开引导页面默认是非全屏的，可是从手机桌面点击 icon 打开是全屏的，所以能够根据是不是全屏来执行对应脚本，若是是全屏那么久执行脚本跳转到app，若是非全屏则添加相应的 HTML 内容，呈现引导页。判断是不是全屏的 JavaScript 方法是 window.navigator.standalone，为 true 是全屏，为 false 则非全屏。java

第二个问题解决办法是这样的，引导页面须要在没网的状况下也能加载，那么显然是首先就要保存在咱们app里面，在app里面经过 openURL 打开的页面没办法直接打开这个app里面的引导页面，所以咱们写一个一个中转的HTML页面保存在咱们服务器上，获得这个服务器上 HTML 的url。而后使用 Data URI Scheme 技术，将咱们本地的 HTML 页面转成一个字符串放到服务器HTML 的 url 问号后面。当经过到 openURL 打开这个拼装好的 url 后，成功加载这个页面。而后经过 JavaScript 方法，获取到咱们本地引导页 HTML 转的字符串，使用 window.location.replace()直接将当前页面替换为本地页面，而后添加到桌面的就是添加的本地页面，这里保存的连接就是经过 Data URI Scheme 将本地页面生成的字符串。web

步骤

1. 开发引导页面

引导页面 HTML 代码以下objective-c

<!DOCTYPE html>
<html>
<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <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="TransitCodeIconImageData">
    <title>TransitCodeAppTitle</title>
</head>
<body>
    <a href="TransitCodeAppScheme" id="qbt" style="display:none"></a>
   <span id="msg"></span>
</body>
<script> if (window.navigator.standalone == true) { var lnk = document.getElementById("qbt").click(); } else { document.getElementById("msg").innerHTML='<center style="position:absolute;left:0;top:0;width: 100%;height: 100%;"> <img style="z-index:1;width:100%" src="TransitCodeLaunchImageData" /> </center>'; } </script>
</html>
复制代码

代码中包含的一些字符串含义以下： TransitCodeIconImageData：快捷方式在桌面的图标 TransitCodeAppTitle：快捷方式的名称 TransitCodeAppScheme：跳转页面对应的 scheme，好比 hellobike://hellobike.com/transitcode/home TransitCodeLaunchImageData：引导页背景图浏览器

通用这几个字符串代替实际内容，主要是为了后面统一替换，也方便其余业务方使用，否则写死了就只能乘车码一个业务使用了。服务器

这里经过 window.navigator.standalone 能够知道引导页是不是全屏展现，若是是全屏那么跳转到 app 对应页面，非全屏则插入具体 HTML 内容，展现引导内容。app

2. 使用 Data URI Scheme 技术将引导页转为一个字符串

代码以下学习

- (NSString *)oppcreateDesktopWithPreUrl:(NSString *)preUrl iconUrl:(NSString *)iconUrl launchImageUrl:(NSString *)launchImageUrl appTitle:(NSString *)title scheme:(NSString *)scheme {
    if ([preUrl length] == 0) {
        return nil;
    }
    NSString *contentHtmlString = [self contentHtmlWithIconImageString:iconUrl launchImageString:launchImageUrl title:title appScheme:scheme];
    contentHtmlString = [contentHtmlString base64EncodedString];
    NSString *DataURIString = [NSString stringWithFormat:@"data:text/html;charset=utf-8;base64,%@",contentHtmlString];
    NSString *urlString = [NSString stringWithFormat:@"%@%@", preUrl, DataURIString];
    return urlString;
}

-(NSString *)contentHtmlWithIconImageString:(NSString *)iconImageString launchImageString:(NSString *)launchImageString title:(NSString *)title appScheme:(NSString *)scheme{
    NSString *contentHtmlPath = [self getcontentHTMLTempletPath];
    NSString *contentHtmlString = [NSString stringWithContentsOfFile:contentHtmlPath encoding:NSUTF8StringEncoding error:nil];
    /*替换字符串*/
    contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeIconImageData" withString:iconImageString];
    contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeLaunchImageData" withString:launchImageString];
    contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeAppTitle" withString:title];
    contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeAppScheme" withString:scheme];
    return contentHtmlString;
}

- (NSString *)getcontentHTMLTempletPath{
    NSString *path = [[JYTransitCodeBundle() resourcePath] stringByAppendingPathComponent:@"/content.html"];
    return path;
}
复制代码

能够简单理解 Data URI Scheme 技术就是讲一个文件，图片或者HTML文件等等，经过 Base64 加密等转为字符串放到 HTML 里面直接加载，这样就不用请求服务器了。这里咱们须要将上面介绍的本地的引导 HTML 页面转为一个字符串，后面要将这个字符串拼到服务器HTML url 后面。

看代码能够知道，经过 getcontentHTMLTempletPath 方法拿到本地 HTML 文件路径，而后将里面内容进行替换为乘车码快捷方式相关内容。而后将 HTML 内容转为 base64 编码。最后经过将 base64 编码按照特定格式拼接便可，这里是 [NSString stringWithFormat:@"data:text/html;charset=utf-8;base64,%@",contentHtmlString]；以 data:text/html;charset=utf-8;base64, 开头，后面咱们能够看到存储的时候也是保存的这个。

3. 打开服务器 HTML 页，用本地引导页替换

用上面生成的字符串拼到服务器 HTML 页面url （这里我是直接将 HTML 文件放到 cdn 上面而后拿到连接）后面，代码以下

- (void)addShortcutToDesk {
    NSString *preUrl = @"https://m.hellobike.com/resource/app/transitcode/Wqwc6vYfE-hrud7-nBDeU.html";
    preUrl = [NSString stringWithFormat:@"%@?dataurl=", kSafeStr(preUrl)];
    NSString *title = @"哈啰乘车码";
    NSString *scheme = @"hellobike://hellobike.com/transitcode/home";
    NSString *iconUrl = @"https://m.hellobike.com/resource/app/transitcode/OZtmwCABaAMfiaE2IAC6E.png";
    NSString *launchImageUrl = @"https://m.hellobike.com/resource/app/transitcode/SRJ3IqkkcZIn2MPAzVmS4.png";
    NSString *urlString = [self oppcreateDesktopWithPreUrl:preUrl iconUrl:iconUrl launchImageUrl:launchImageUrl appTitle:title scheme:scheme];

    UIApplication *application = [UIApplication sharedApplication];
    NSURL *URL = [NSURL URLWithString:urlString];

    if (@available(iOS 10.0, *)) {
        [application openURL:URL options:@{}
           completionHandler:^(BOOL success) {
        }];
    } else {
        [application openURL:URL];
    }
}
复制代码

这里服务器保存的 HTML页面很简单，加载后主要就是经过上面拼接的连接获取本地引导页内容，而后加载引导页，代码以下

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
<script type="text/javascript"> const dataurl = ''; var url = location.search; if (url && url.length > 1 && url.indexOf('?dataurl=') !== -1) { url = url.replace("?dataurl=", ""); window.location.replace(url); } else { window.location.replace(dataurl); } </script>
</html>
复制代码

经过 location.search 方法能够获取到拼接好的url内容，而后拿到咱们拼上去的内容，使用 window.location.replace 方法来从新进行内容替换，就能够展现咱们本地的引导页了。此时展现就是非全屏展现，跟从快捷键打开不同。

4. 根据引导页指示操做

引导页面有详细流程图，按图操做保存便可。

后记

这个需求功能很简单，可是涉及的知识仍是很多，涉及到前端方面属于本身比较薄弱的方面，所以须要多积累一些相关知识才更好完成相关需求。