苹果手机通过Safari浏览器访问web方式安装In-House应用

需求背景

公司内部员工使用的iOS客户端应用希望对内开放，不需要发布于AppStore直接能够让内部用户获取，对于Android应用来说这个问题很好解决，直接下发安装包然后就能安装了；但是对于苹果生态来说，这种方式是行不通的，因为苹果本身有一套完备的应用安装体系，除了具备一定特性之外的应用，都必须通过在AppStore上发布然后被用户获取。但是苹果依然对企业内部应用（In-House应用）有所特别对待，即可通过web方式来获取和安装，那么我们需要做的，就是熟悉这一套实现流程。

开发准备

本项目主要说明后台服务端实现，前期还有很多准备工作，可能涉及到的是苹果开发者账号、企业证书生成、企业证书签名的ipa、应用相关的bundle-identifier等，这些事项基本都是iOS客户端开发同学来操作的，后台项目需要用到的内容都可以找他们提供。

要点说明

iOS APP

1、必须是由$299购买的企业证书签名过的In-House应用，$99购买的证书签名是无效的。

2、需要提供应用或者证书相关的bundle-identifier信息，因为plist中需要使用。

plist

1、plist文件必须使用固定且完整的xml格式。

2、plist文件中的ipa文件路径无须是https协议下的。

3、plist文件必须通过https协议访问，而且是苹果受信任的企业证书。

方案步骤

1、通过web后台来管理和维护iOS版本。

2、web后台提供iOS应用的上传功能，上传的同时生成和app配套的plist文件。

3、app文件上传成功，web后台维护记录成功之后，会得到safari浏览器访问的路径。

4、Safari浏览器访问到获取应用的路径之后会打开下载页面，点击按钮是通过itms-services协议访问的plist文件。

5、访问该文件之后，手机将会自动弹窗提示当前网站想要安装XXX应用。

6、安装应用完成之后，首次尝试打开应用时，系统会提示该应用未受信任，需要前往手机「设置-通用-描述文件与设备管理」下信任该应用，信任之后将可以正常打开和使用。

功能开发

1、web后台上传和维护app应用（展开以显示代码）

 <!-- Captain&D -->
 <!-- https://www.cnblogs.com/captainad/ -->
 <div class="modal inmodal" id="myModal_editApp" tabindex="-1" role="dialog" aria-hidden="true">
     <div style="width: 1000px" class="modal-dialog">
         <div class="modal-content animated bounceInRight">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal"><span
                         aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                 </button>
                 <h5 class="modal-title" id="configTitle" data-lang="">增加/修改应用版本</h5>
                 <input type="hidden" id="versionId" >
                 <input type="hidden" id="appTypeId" >
             </div>
             <div class="modal-body">
                 <div class="row">
                     <div class="col-sm-6">
                         <div class="form-group">
                             <label>对外版本号</label>
                             <input type="text" id="versionName" class="form-control" placeholder="下载时显示的apk名称，无需加.apk后缀">
                         </div>
                         <div class="form-group">
                             <label>对内版本号</label>
                             <input type="text" id="versionCode" class="form-control">
                         </div>
                         <div class="form-group">
                             <label id="appfile_title">应用文件</label>
                             <div id="file-pretty">
                                 <div class="form-group">
                                     <input type="file" name="accountFile" id="appfile" class="form-control" >
                                 </div>
                             </div>
                         </div>
                         <div class="form-group">
                             <label>发布版本</label>
                             <div class="checkbox checkbox-success">
                                 <input id="checkbox2" type="checkbox">
                                 <label for="checkbox2">
                                     勾选并保存修改之后，当前版本将发布成博客原创Captain&D在线可用的最新版本
                                 </label>
                             </div>
                         </div>
                         <div class="form-group">
                             <label>是否强制升级</label>
                             <div class="checkbox checkbox-success">
                                 <input id="checkbox4" type="checkbox">
                                 <label for="checkbox4">
                                     当前版本启用之后，用户打开客户端后会立即强制升级成博客原创Captain&D当前版本
                                 </label>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6">
                         <div class="form-group">
                             <label>升级日志</label>
                             <textarea class="form-control" id="upgradeLog" rows="12" style="resize: none"></textarea>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <p style="color:red;display: none" id="errMsg">
                     </p>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-success" id="saveEdit" >保存</button>
                 <button type="button" class="btn btn-white" data-dismiss="modal" data-lang="close">关闭</button>
             </div>
         </div>
     </div>
 </div>

2、从页面上传附件相关处理方式（展开以显示代码）

 <!-- Captain&D -->
 <!-- https://www.cnblogs.com/captainad/ -->
 $("#saveEdit").click(function () {
     if(validateParam()) return;

     // 先进行存在性校验
     var formdate = new FormData();
     formdate.append('id', $("#versionId").val());
     formdate.append('versionName', $("#versionName").val());
     formdate.append('versionCode', $("#versionCode").val());
     $('#loading-modal').modal("show");
     $.ajax({
         url: "versionmng/existsSameAppVersion",
         type: "post",
         data: formdate,
         processData : false,
         contentType : false,
         success: function(data1){
             if(data1.code == 200) {

                 // 正式发起保存请求
                 var checked = $("#checkbox2").is(':checked');
                 var checked1 = $("#checkbox4").is(':checked');
                 var formdate = new FormData();
                 var fils = $("#appfile").get(0).files[0];
                 console.log(fils);
                 formdate.append('appFile', fils);
                 formdate.append('id', $("#versionId").val());
                 formdate.append('appType', $("#appTypeId").val());
                 formdate.append('versionName', $("#versionName").val());
                 formdate.append('versionCode', $("#versionCode").val());
                 formdate.append('upgradeLog', $("#upgradeLog").val());
                 formdate.append('appStatus', checked ? 1 : 0);
                 formdate.append('forcedUpgrade', checked1 ? 1 : 0);

                 $.ajax({
                     url: "versionmng/addAppVersion",
                     type: "post",
                     data: formdate,
                     processData : false,
                     contentType : false,
                     success: function(data){
                         if(data.code == 200) {
                             $("#myModal_editApp").modal("hide");
                             $("#errMsg").html("");
                             $("#errMsg").css("display", "none");
                             swal("Successfully", "新增/修改App应用版本信息博客原创Captain&D成功", "success");
                             initload(pageObj);
                         }else {
                             swal("Failed", data.msg, "error");
                         }
                         $('#loading-modal').modal("hide");
                     }
                 });

             }else {
                 swal("Failed", data1.msg, "error");
                 $('#loading-modal').modal("hide");
             }
         }
     });
 })

3、Captainad通过上传资源到云服务器的方法（展开以显示代码）

 /**
 * 增加应用版本
 * Captain&D
 * https://www.cnblogs.com/captainad/
 */
 public Result addAppVersion(HttpServletRequest request, @RequestParam(value = "appFile", required = false) MultipartFile file) {

     ···

     // 文件处理
     if(file != null && file.getSize() > 0) {
         // 检查文件类型
         String filename = file.getOriginalFilename();
         String suffix = filename.substring(filename.lastIndexOf("."), filename.length());
         log.info("file format: {} {}", filename, suffix);
         if ("1".equals(appType) && !".apk".contains(suffix) || "2".equals(appType) && !".ipa".contains(suffix)) {
             return Result.builder()
                     .code(ResultLanguage.getResultMessage(ResultMessage.WRONG_APP_FORMAT).getCode())
                     .msg(ResultLanguage.getResultMessage(ResultMessage.WRONG_APP_FORMAT).getMsg()).build();
         }
         String appName = "";
         if("1".equals(appType)) {
             appName = versionName.replace(" ", "_").replace(".apk", "").concat(".apk");
         }else {
             appName = versionName.replace(" ", "_").replace(".ipa", "").concat(".ipa");
         }

         try{
             Map<String, String> fileMap = fileOperationService.uploadFile(appName, "/captainad/app/", file.getInputStream());
             if(null != fileMap && !fileMap.isEmpty()) {
                 for(Map.Entry<String, String> set : fileMap.entrySet()) {
                     String downloadUrl = set.getKey();
                     String appMd5 = set.getValue();
                     requestMap.put("downloadUrl", new String[]{downloadUrl});
                     requestMap.put("appMd5", new String[]{appMd5});
                 }
             }else {
                 return Result.builder()
                         .code(ResultLanguage.getResultMessage(ResultMessage.APP_UPLOAD_ERROR).getCode())
                         .msg(ResultLanguage.getResultMessage(ResultMessage.APP_UPLOAD_ERROR).getMsg()).build();
             }
         }catch (Exception e) {
             log.error("上传客户端App文件存在异常。", e);
         }
     }
 }

4、通过拼接字符串生成plist文件

 /**
 * 生成iOS应用对应的plist文件
 * Captain&D
 * https://www.cnblogs.com/captainad/
 */
 private String genIosPlist(CaptainadAppVersionInfo captainadAppVersionInfo){
     StringBuilder builder = new StringBuilder();
     builder.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
     builder.append("<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">");
     builder.append("<plist version=\"1.0\">");
     builder.append("<dict>");
     builder.append("    <key>items</key>");
     builder.append("    <array>");
     builder.append("        <dict>");
     builder.append("            <key>assets</key>");
     builder.append("            <array>");
     builder.append("                <dict>");
     builder.append("                    <key>kind</key>");
     builder.append("                    <string>software-package</string>");
     builder.append("                    <key>url</key>");
     builder.append("                    <string>").append(captainadAppVersionInfo.getDownloadUrl()).append("</string>");
     builder.append("                </dict>");
     builder.append("            </array>");
     builder.append("            <key>metadata</key>");
     builder.append("            <dict>");
     builder.append("                <key>bundle-identifier</key>");
     builder.append("                <string>").append(getSetCacheService.getConfigValue("ios_bundle_identifier")).append("</string>");
     builder.append("                <key>bundle-version</key>");
     builder.append("                <string>").append(captainadAppVersionInfo.getVersionCode()).append("</string>");
     builder.append("                <key>kind</key>");
     builder.append("                <string>software</string>");
     builder.append("                <key>title</key>");
     builder.append("                <string>Captainad App</string>");
     builder.append("            </dict>");
     builder.append("        </dict>");
     builder.append("    </array>");
     builder.append("</dict>");
     builder.append("</plist>");
     String plistName = captainadAppVersionInfo.getVersionName().concat(".plist");
     try {
         InputStream is = new ByteArrayInputStream(builder.toString().getBytes("UTF-8"));
         Map<String, String> fileMap = fileOperationService.uploadFile(plistName, "/captainad/app/plist/", is);
         if(null != fileMap && !fileMap.isEmpty()) {
             for(Map.Entry<String, String> entry : fileMap.entrySet()) {
                 log.info("生成的plist的文件地址：{}", entry.getKey());
                 return entry.getKey();
             }
         }
     } catch (Exception e) {
         log.error("生成plist文件时出现异常。", e);
     }
     return null;
 }

5、数据库表设计（展开以显示代码）

 -- Captain&D
 -- https://www.cnblogs.com/captainad/
 CREATE TABLE `captainad_app_version_info` (
   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
   `version_name` varchar(64) DEFAULT NULL COMMENT '外部版本号',
   `version_code` varchar(64) DEFAULT NULL COMMENT '内部版本号',
   `upgrade_log` text COMMENT '更新日志',
   `download_url` varchar(128) DEFAULT NULL COMMENT '版本路径',
   `app_md5` varchar(32) DEFAULT NULL COMMENT '文件MD5',
   `app_status` int(11) DEFAULT NULL COMMENT '版本状态（0-关闭，1-启用）',
   `release_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '发布时间',
   `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
   `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
   `forced_upgrade` int(11) DEFAULT '' COMMENT '是否强制升级（0-否，1-是）',
   `app_type` int(11) DEFAULT NULL COMMENT '应用类型（1-Android，2-iOS）',
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='App版本管理';

6、safari通过访问路径之后的路由处理（展开以显示代码）

 /**
 * 进入App下载安装页面
 * Captain&D
 * https://www.cnblogs.com/captainad/
 */
 @AuthorityVerify
 @RequestMapping("ios")
 public String toDownloadIosAppPage(HttpServletRequest request) {
     String version = request.getParameter("version");
     String httpsHost = getSetCacheService.getConfigValue("file_cloud_visit_host_https");
     String plistUrl = httpsHost.concat("/captainad/app/plist/").concat(version).concat(".plist");
     request.setAttribute("plist", plistUrl);
     return "/appmng/ios_app";
 }

7、应用下载页面的plist路由协议写法

 <!-- Captain&D -->
 <!-- https://www.cnblogs.com/captainad/ -->
 <!-- 下载安装in-house应用关键代码 -->
 <div class="wrapper wrapper-content">
     <div class="row">
         <div class="col-sm-12">
             <div class="middle-box text-center animated fadeInRightBig" style="margin-top: 90%;">
                 <!--<h3 class="font-bold">这里是页面内容</h3>-->

                 <div class="install-btn">
                     <br/><a href="itms-services://?action=download-manifest&url=${plist}" class="btn btn-success btn-lg m-t">
                     <i class="fa fa-apple"></i>  Install Tesla app for iOS</a>
                 </div>
             </div>
         </div>
     </div>
 </div>

图片参考

1、应用列表

2、应用详情

3、扫描安装图示（项目暂时无法截图，故参考自网络，打码处理，侵删）

4、信任应用（项目暂时无法截图，故参考自网络，打码处理，侵删）

遇到问题及解决思路和方法

1、Safari点击之后出现无法连接到xxx.xx.com现象。

• 检查下发的plist文件能否访问。
• 询问Https证书是否是有效的并且受信任的。
• 检查访问的plist文件的链接是否是https协议的。
• 检查下发的plist文件xml格式是否正常，可以在线格式化下，看是否报错。

2、能够连接但是无法下载安装。

• 检查plist文件中链接的ipa文件是否可达。
• 检查文件格式是否为ipa，检查ipa文件名与plist文件名是否一致。

参考资料

1、https://www.jianshu.com/p/89d22b430330

2、https://www.cnblogs.com/star91/p/5018995.html