在上篇文章中，我介绍了在iPhone桌面生成快捷方式的原理，并介绍了最简单的实现方式，网络依赖严重、用户体验差、开发简单，这是我对这种方式的看法。用户体验差必然会导致我们的产品被用户骂，作为开发者，我们自然就背锅了，这怎么能忍？但是在我们没有实力在APP中搭建HTTPServer之前，我们只能尽力在这种方式上进行优化，让用户体验不那么差。
在这篇文章中，我会介绍一种优化方式，希望能帮到你们。
在阅读这篇文章之前，我希望你们知道什么是data url，如果不知道，那就去百度吧。
上篇文章中我们只有一个网页，在这篇文章中，我们会写两个网页，一个是用来过渡和解析数据的网页，另外一个是正式的网页，这个网页的所有的内容会使用到data url。优化有两种方式，一种是将数据解析集成在APP中，一种是将数据解析放在服务器上的网页中进行，本文只介绍第一种，因为两种方式的实现过程也差不多，而且我是APP的开发者，对APP的开发语言更熟悉，所以就选择了第一种进行介绍，实际开发中可就不一定使用第一种哦~~~
1. 创建过渡网页，放在服务器上的那个
<!DOCTYPE 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" />
<title></title>
</head>
<body>
</body>
<script>
<!-- 这里面是本页面最核心的，可以根据需要在此处设置图片、标题等，如果使用第二种方式，可以在此处调用数据解析的方法，然后进行页面替换 -->
var url = location.search;
url = url.replace("?dataurl=", "") <!-- 这里被替换掉的字符串是针对APP中设置的，使用空字符串替换之后，剩余的就是快捷方式展示页的data url字符串了 -->
window.location.replace(url)
</script>
</html>
2. 创建快捷方式的展示网页
这个网页文件中的内容将被读取并进行解析，如果不想在数据解析中多写很多代码，那就不要在这个文件中写不需要的东西，例如：注释等。如果写了，那在数据解析的时候就得把不需要的东西过滤掉，否则可能会出问题
<!DOCTYPE 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="ZHMFIconImageString">
<title>ZHMFTitle</title>
</head>
<body>
<a href="ZHMFOperation" id="qbt" style="display:none"></a>
<span id="msg"></span>
</body>
<script>
if (window.navigator.standalone == true) {
document.getElementById("qbt").click();
} else {
document.getElementById("msg").innerHTML='<center><img width=400 src="ZHMFImageString" /></center>';
}
</script>
</html>
3. 创建一个Shortcut类，用来封装数据解析
直接把整个类的代码贴出来吧，里面有注释，应该还是很容易看懂的
import UIKit
class Shortcut: NSObject {
override init() {
super.init()
}
convenience init(_ icon: UIImage?, _ title: String?) {
self.init()
self.iconImage = icon
self.title = title ?? ""
}
var iconImage: UIImage? = nil
/// 快捷方式的默认标题
var title = ""
/// 网页打开APP的scheme
var operation = ""
/// 调用此方法开始数据解析，并跳转到Safari
func open() {
let iconStr = image2String(iconImage)
let imageStr = "http://192.168.9.224/images/image_3.jpg"
let urlStr = "http://192.168.9.224/shortcut.html?dataurl="
guard let shortcutStr = creatShortcutString(iconStr, imageStr).addingPercentEncoding(withAllowedCharacters: CharacterSet.urlQueryAllowed),
let url = URL.init(string: "\(urlStr)\(shortcutStr)"),
UIApplication.shared.canOpenURL(url) else {
return
}
UIApplication.shared.open(url, options: [:], completionHandler: nil)
}
/// 创建快捷方式Data URL的字符串，这里面的操作也可以放在过渡网页中使用JavaScript操作，以便随时修改
private func creatShortcutString(_ iconStr: String, _ imageStr: String) -> String {
var str = readHtmlContent()
str = str.replacingOccurrences(of: "ZHMFIconImageString", with: iconStr)
str = str.replacingOccurrences(of: "ZHMFTitle", with: title)
str = str.replacingOccurrences(of: "ZHMFOperation", with: operation)
str = str.replacingOccurrences(of: "ZHMFImageString", with: imageStr)
return str
}
/// 读取网页内容
private func readHtmlContent() -> String {
guard let path = Bundle.main.path(forResource: "content", ofType: "html"),
let data = FileManager.default.contents(atPath: path),
let content = String.init(data: data, encoding: String.Encoding.utf8) else {
return ""
}
var htmlStr = "data:text/html;charset=utf-8,"
htmlStr.append(content)
return htmlStr
}
/// 将图片转为字符串
private func image2String(_ img: UIImage?) -> String {
guard let image = img,
let data = UIImageJPEGRepresentation(image, 0.1) else {
return ""
}
/// 注意下面base64编码的选项，是endLineWithLineFeed，我在此处纠结了很长时间，浏览器解析一直报错，最终换成这个之后搞定
let str = data.base64EncodedString(options: Data.Base64EncodingOptions.endLineWithLineFeed)
return "data:image/jpeg;base64," + str
}
}
4. 在需要创建快捷方式的地方进行调用
let obj = Shortcut()
obj.iconImage = UIImage.init(named: "icon.jpg")
obj.title = "快捷方式"
obj.operation = "shortcut://zhmf.com"
obj.open()
5. 操作原理
这种方式是在用户点击“放到桌面”按钮时打开一个过渡网页，url后面跟一个参数dataurl，参数的值就是快捷方式的data url字符串，在过渡网页中会截取到这个字符串，并替换当前页面，当然如果使用文章开头说的第二种方式，那么就不需要这个参数了，因为这个参数会在过渡页面使用JavaScript生成。
Safari通过data url打开页面后，会引导用户点击下方的按钮 “添加到主屏幕”，此时地址栏就是data url。添加到主屏幕这个功能会将当前页面的url和图标保存到本地，由于本页面使用的是data url，页面所有的内容都存放在url中，所以，在点击快捷图标时，不需要网络也可以执行url里面包含的所有代码，这就达到了生成快捷图标后无需网络也可以通过快捷方式打开APP中某项功能，减少了对网络的依赖，提升了用户体验。
6. 踩坑
在开始优化的时候，我就认为这个页面有两个图片，一个是桌面图标，一个是页面图片。所以我在数据解析的时候，将两个图片全部进行base64编码，放到url中传到过渡页面，结果，页面提示url太长。
其实，HTTP协议对url的长度是没有限制的，但是，浏览器和服务器为了提升性能，会对url的长度进行限制，Safari的长度据说超过80000，Apache的长度限制好像是8000+，IIS大概不到1600+，具体的可以去百度搜索一下。
按照这个长度来说，放一个小图片是没有问题的，也就是图标是可以通过编码放进去的，但是引导图就不行了，引导图太大，虽然我压缩之后没有超过Safari的限制，但远远超过Apache的限制，也就是说把引导图也进行编码放在里面是不太现实的。
受到同事的提醒，我恍然大悟，添加桌面图标基本上只是一次性的操作，用户放到桌面的那时有网络就行了，放到桌面后，很少有人经常重复放到桌面，所以，只需要保证快捷方式能断网执行即可，引导页中的图片完全可以放到服务器，data url里面只需要放一个图片的地址即可，经过测试，完全可行。如果用户没有网络，那就打不开引导页所在的页面，引导图来自哪儿都没有用，如果用户有网络，那就不用担心图片的问题，除非是弱网，在弱网情况下，用户是可以添加的，但是看不到引导图。
当然，如果想在针对弱网也进行优化，可以将引导页使用代码进行编辑放到data url中，再搭配小图（或者直接用代码画图）的形式，也能提升用户体验。
总结
作为APP的开发者，一旦APP的体验不好，那么用户首先骂的人估计就是我们（虽然有时候产品的设计就是如此，但我们依然背锅），或许，杀我们祭天的心都会有，为了保住小命，在代码的海洋中再漂几年，还是得花费点心思提升用户体验。
