iOS添加快捷方式到桌面

2023年12月5日发(作者：)

iOS添加快捷方式到桌面

前言

最近在乘车码里面做了一个需求，添加快捷方式到桌面，点击桌面图标打开app进入对应页面。功能很小，但是涉及的知识点很多，涉及

openURL、HTML、JavaScript、Data URI Scheme、Base64 等。通过这个需求顺便将这些知识都学习了，然后整理出来。

原理

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

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

1. 添加到桌面时保存的就是引导页面 url，点击打开的时候为啥不是打开引导页面，而是直接跳转到 app里面，这个如何实现？

2. 没网的情况下点击图标，打开页面如何能加载页面内容并打开app呢？

第一个问题的解决办法是这样的，从 app 里面打开引导页面默认是非全屏的，但是从手机桌面点击 icon 打开是全屏的，因此可以根据是否是全

屏来执行对应脚本，如果是全屏那么久执行脚本跳转到app，如果非全屏则添加相应的 HTML 内容，呈现引导页。判断是否是全屏的 JavaScript

方法是 lone，为 true 是全屏，为 false 则非全屏。

第二个问题解决办法是这样的，引导页面需要在没网的情况下也能加载，那么显然是首先就要保存在我们app里面，在app里面通过 openURL 打

开的页面没办法直接打开这个app里面的引导页面，因此我们写一个一个中转的HTML页面保存在我们服务器上，得到这个服务器上 HTML 的

url。然后使用 Data URI Scheme 技术，将我们本地的 HTML 页面转成一个字符串放到服务器HTML 的 url 问号后面。当通过到 openURL 打

开这个拼装好的 url 后，成功加载这个页面。然后通过 JavaScript 方法，获取到我们本地引导页 HTML 转的字符串，使用

e()直接将当前页面替换为本地页面，然后添加到桌面的就是添加的本地页面，这里保存的链接就是通过 Data URI

Scheme 将本地页面生成的字符串。

步骤

1. 开发引导页面

引导页面 HTML 代码如下

代码中包含的一些字符串含义如下：

TransitCodeIconImageData：快捷方式在桌面的图标

TransitCodeAppTitle：快捷方式的名称

TransitCodeAppScheme：跳转页面对应的 scheme，比如 hellobike:///transitcode/home

TransitCodeLaunchImageData：引导页背景图

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

这里通过 lone 可以知道引导页是否是全屏展示，如果是全屏那么跳转到 app 对应页面，非全屏则插入具体 HTML

内容，展示引导内容。

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

代码如下

- (NSString *)oppcreateDesktopWithPreUrl:(NSString *)preUrl iconUrl:(NSString *)iconUrl launchImageUrl:(NSString *)launchImageUrl appTitle:(NSString *)title schem

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 *)s

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:@"/"];

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 = @"/resource/app/transitcode/";

preUrl = [NSString stringWithFormat:@"%@?dataurl=", kSafeStr(preUrl)];

NSString *title = @"哈啰乘车码";

NSString *scheme = @"hellobike:///transitcode/home";

NSString *iconUrl = @"/resource/app/transitcode/";

NSString *launchImageUrl = @"/resource/app/transitcode/";

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页面很简单，加载后主要就是通过上面拼接的链接获取本地引导页内容，然后加载引导页，代码如下

通过 方法可以获取到拼接好的url内容，然后拿到我们拼上去的内容，使用 e 方法来重新进行内容替

换，就可以展示我们本地的引导页了。此时展示就是非全屏展示，跟从快捷键打开不一样。

4. 根据引导页指示操作

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

5. iOS 14 特殊处理

iOS14 不再支持 Data URI，所以有些问题，需要将所有资源都写到 html里面，然后放到文件系统上，通过连接直接打开，不能通过读本地文件

的方式来处理。因此代码里面可以判断一下系统，分别处理，如下

if (@available(iOS 14.0, *)) {

urlStr = @"/resource/app/transitcode/-";

} else {

...

}

后记

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