iOS开发 在桌面生成快捷方式（2 )

在上篇文章中，我介绍了在iPhone桌面生成快捷方式的原理，并介绍了最简单的实现方式，网络依赖严重、用户体验差、开发简单，这是我对这种方式的看法。用户体验差必然会导致我们的产品被用户骂，作为开发者，我们自然就背锅了，这怎么能忍？但是在我们没有实力在APP中搭建HTTPServer之前，我们只能尽力在这种方式上进行优化，让用户体验不那么差。

在这篇文章中，我会介绍一种优化方式，希望能帮到你们。

在阅读这篇文章之前，我希望你们知道什么是data url，如果不知道，那就去百度吧。

上篇文章中我们只有一个网页，在这篇文章中，我们会写两个网页，一个是用来过渡和解析数据的网页，另外一个是正式的网页，这个网页的所有的内容会使用到data url。优化有两种方式，一种是将数据解析集成在APP中，一种是将数据解析放在服务器上的网页中进行，本文只介绍第一种，因为两种方式的实现过程也差不多，而且我是APP的开发者，对APP的开发语言更熟悉，所以就选择了第一种进行介绍，实际开发中可就不一定使用第一种哦~~~

1. 创建过渡网页，放在服务器上的那个

2. 创建快捷方式的展示网页

这个网页文件中的内容将被读取并进行解析，如果不想在数据解析中多写很多代码，那就不要在这个文件中写不需要的东西，例如：注释等。如果写了，那在数据解析的时候就得把不需要的东西过滤掉，否则可能会出问题

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的体验不好，那么用户首先骂的人估计就是我们（虽然有时候产品的设计就是如此，但我们依然背锅），或许，杀我们祭天的心都会有，为了保住小命，在代码的海洋中再漂几年，还是得花费点心思提升用户体验。