前言
最近在乘车码里面做了一个需求，添加快捷方式到桌面，点击桌面图标打开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. 根据引导页指示操作
引导页面有详细流程图，按图操作保存即可。
5. iOS 14 特殊处理
iOS14 不再支持 Data URI，所以有些问题，需要将所有资源都写到 html里面，然后放到文件系统上，通过连接直接打开，不能通过读本地文件的方式来处理。因此代码里面可以判断一下系统，分别处理，如下
if (@available(iOS 14.0, *)) {
urlStr = @"https://m.hellobike.com/resource/app/transitcode/-IaHIzGBXTYMi9crK8H4K.html";
} else {
...
}
后记
这个需求功能很简单，但是涉及的知识还是不少，涉及到前端方面属于自己比较薄弱的方面，因此需要多积累一些相关知识才更好完成相关需求。
