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

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

一、环境要求

1.服务器

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

二、部署

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

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



<plist version="1.0">
<dict>
	<key>itemskey>
	<array>
		<dict>
			<key>assetskey>
			<array>
				<dict>
					<key>kindkey>
					<string>software-packagestring>
					<key>urlkey>
					
					<string>https://www.example.cn/ipa/mytest/Mytest.ipastring>
				dict>
				<dict>
					<key>kindkey>
					<string>full-size-imagestring>
					<key>needs-shinekey>
					<true/>
					<key>urlkey>
					
					<string>https://www.example.cn/ipa/mytest/icon_full_size_s.pngstring>
				dict>
				<dict>
					<key>kindkey>
					<string>display-imagestring>
					<key>needs-shinekey>
					<true/>
					<key>urlkey>
					
					<string>https://www.example.cn/ipa/mytest/icon_display_s.pngstring>
				dict>
			array>
			<key>metadatakey>
			<dict>
				<key>bundle-identifierkey>
				<string>com.mcrazy.Myteststring>
				<key>bundle-versionkey>
				<string>1.1.4string>
				<key>kindkey>
				<string>softwarestring>
				<key>titlekey>
				<string>测试客户端string>
			dict>
		dict>
	array>
dict>
plist>

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

  • 用nginx或tomcat提供外部访问,下面在前端安装网页上就要用到此外部访问url: https://www.example.cn/ipa/mytest/Mytest.plist

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

  • H5网页:Mytest.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.4p>
		<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);">点击安装appa>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安装界面

https://www.example.cn/ipa/download/Mytest.html
服务器搭建苹果ipa包在线安装环境_第1张图片

  • 点击安装

  • ending…

PS:如果不想买域名,需要搭建这样一个安装环境。可以借助GitHub平台实现。只要要把上述的配置文件、资源文件、界面等托管在GitHub上的仓库里边,这样每个资源文件就能得到一个github的域名+https证书的url路径。免费受欢迎。

你可能感兴趣的:(IOS开发,Web/H5,Linux)