您的位置: 首页  >  文章  >  服务器搭建苹果ipa包在线安装环境

服务器搭建苹果ipa包在线安装环境

分类: 文章 • 2023-09-23 07:59:05

类似蒲公英的苹果应用在线安装环境，能方便小团队开发分发测试包。
我们利用自己的服务器搭建一个这样的服务。

一、环境要求

1.服务器

  • 域名（可自己买一个域名，作为程序员应该必备一个，域名也不贵，反正贵的也被人买走了！^^）
  • 网页服务：nginx/tomcat,还要Https证书。关于如何在个人服务器部署Https免费证书，可移步小生另一博文：Let’s Encrypt部署Https证书
  • .ipa安装包

二、部署

在此安装包暂命名为：Mytest.ipa

1.编写安装配置文件(Mytest.plist)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>items</key>
	<array>
		<dict>
			<key>assets</key>
			<array>
				<dict>
					<key>kind</key>
					<string>software-package</string>
					<key>url</key>
					<!-- 需要安装的ipa包在服务器的路径 -->
					<string>https://www.example.cn/ipa/mytest/Mytest.ipa</string>
				</dict>
				<dict>
					<key>kind</key>
					<string>full-size-image</string>
					<key>needs-shine</key>
					<true/>
					<key>url</key>
					<!-- 安装时需要显示的小图标在服务器的路径 -->
					<string>https://www.example.cn/ipa/mytest/icon_full_size_s.png</string>
				</dict>
				<dict>
					<key>kind</key>
					<string>display-image</string>
					<key>needs-shine</key>
					<true/>
					<key>url</key>
					<!-- 安装时需要显示的大图标在服务器的路径 -->
					<string>https://www.example.cn/ipa/mytest/icon_display_s.png</string>
				</dict>
			</array>
			<key>metadata</key>
			<dict>
				<key>bundle-identifier</key>
				<string>com.mcrazy.Mytest</string>
				<key>bundle-version</key>
				<string>1.1.4</string>
				<key>kind</key>
				<string>software</string>
				<key>title</key>
				<string>测试客户端</string>
			</dict>
		</dict>
	</array>
</dict>
</plist>

2.上传配置文件(Mytest.plist)至服务器

3.制作前端访问H5网页，触发安装事件

  • H5网页：Mytest.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>  
	<meta charset="UTF-8">
	<title>Ad Hoc .ipa在线安装</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}

		.download_div{
			width: 100%;
			height: 100%;
			text-align: center;
			font-weight: bold;
			/*background: -webkit-gradient(linear,0 0,0 bottom,from(#dbeae0),to(hsla(0,0%,100%,.6)));*/
			font-size: 2em;
		}

		.download_title{
			padding-top: 1em;
			padding-bottom: 1em;
			/*background-color: #d7e2f7;*/
			background: -webkit-gradient(linear, left top, left bottom, from(#d7e2f7), to(#ffffff));
		}
		.img_app_overview {
	    	width: 100%; 
	    	height: 480px; 
	    	display: block;
	    }

		.download_button{
			/*margin-top: -0.3em;*/
			background: -webkit-gradient(linear,left top,left bottom,from(#879ee3), to(#ffffff));
			width: 100%;
		}

		.button{
			/*margin-top: 5em;*/
			margin-left: 0.8em;
			display: inline-block;
			outline: none;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			font: 14px/100% Arial, Helvetica, sans-serif;
			padding: .5em 2em .55em;
			text-shadow: 0 1px 1px rgba(0,0,0,.3);
			-webkit-border-radius: .5em; 
			-moz-border-radius: .5em;
			border-radius: .5em;
			-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
			-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
			box-shadow: 0 1px 2px rgba(0,0,0,.2);
			color:#fff;
		}

		.button_green{
			background: #c8dd95;
            background: -webkit-gradient(linear, left top, left bottom, from(#7a71d0), to(#ffffff) );
            background: -moz-linear-gradient(-90deg, #7a71d0, #ffffff);
		}

		.download_tips{
			font-size: 0.5em;
			margin-top: 1em;
			font-weight: normal;
			margin-top: 3em;
		}

		.button_top{
			margin-top: 3em;
		}

		a:hover, a:visited, a:link, a:active {
			text-decoration: none;
			color: #fff;
		}

		/*mobile*/
		@media screen and (max-width: 1199px){
		    .img_app_overview {
		    	width: 100%; 
		    	height: 250px; 
		    	display: block;
		    }
		}
	</style>
</head>
<body>
	<div class="download_div">
		<p class="download_title">测试安装包v1.1.4</p>
		<img class="img_app_overview" src="img_app_overview.png" alt="Mr.chao">
		<div class="download_button">
			<button class="button button_green button_top" onclick="downloadClientApp();"><a href="javascript:void(0);">点击安装app</a></button>
			<!-- <button class="button button_green button_top"><a href="{{androidAUrl}}">Android客户端下载</a></button> -->
			<div class="download_tips">
				<strong>微信扫描</strong>下载,<strong>请点击右上角</strong>,<br />选择“<strong>在浏览器中打开</strong>”即可安装下载
			</div>
		</div>
	</div>
	<script>
		var downloadClientApp = function() {
			// 在此用到配置文件(Mytest.plist)的外部链接
			window.location.href='itms-services:///?action=download-manifest&url=https://www.example.cn/ipa/mytest/Mytest.plist';
		}
	</script>
</body>
</html>

4.安装

  • 将H5网页部署在服务器上，需要有能Https访问证书

  • 手机浏览器访问H5安装界面

http://www.example.cn/ipa/download/Mytest.html
服务器搭建苹果ipa包在线安装环境

  • 点击安装

  • ending…

相关推荐