前言

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

原理

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

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

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

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

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

步骤

1. 开发引导页面

引导页面 HTML 代码如下

<!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 内容，展示引导内容。

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. 根据引导页指示操作

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

后记

这个需求功能很简单，但是涉及的知识还是不少，涉及到前端方面属于自己比较薄弱的方面，因此需要多积累一些相关知识才更好完成相关需求。