How to distribute IOS App without App store (OTA)? - ios
We would like to publish our IOS APP in some thrid party stores or some OTA(over the air) platforms.
The main reason is being the App is only for a specific group of people. I have read about the official Apple Enterprise account way of doing this but I don't think our company is eligible to get that account.
I came across these options below, which allows us to upload our APK (for android) & IPA (for IOs) files and generate a link for users to download the App:
https://www.installonair.com/
https://www.diawi.com/
Has anyone been using any of these platforms to ship their apps? If yes does this still work in the latest IOS 14?
Thanks in advance
Both the diawi and installonair, work with development, ad-hoc and in-house builds. Development and ad-hoc means that you have to add beforehand the UUID of the devices that the app will be installed(also there is a small limit to the total allowed register devices). These are for distributing your app to testers.
And in-house are applications from an enterprise account. This is for when you intent to distribute you app to users internal to your company. If this is your intent then your company is eligible.
Apple does not give you a way to sidestep the official App store for app distribution.
Note that if you want to use OTA distribution you do not have to use services like diawi or installonair which you mentioned. Those services work however they have some limitations. For example if you use free account on diawi then your app will be available to download only for 3 days and cannot have a size larger than 75MB. Therefore if you plan to have your app available to download for a longer time without size limits and other restrictions then it might be better to host it on any https server. You can even host it on free gitlab.com account (with gitlab pages) without those limitations. You just need to create a proper html file and manifest.plist and put them on your server together with ipa file. If you plan to go this way I can recommend following simple and nice looking html which allows you to download a different app version based on the key that user needs to enter when he opens the html page:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width" name="viewport" />
<title>DOWNLOAD</title>
<style>
body {
text-align:center;
font-family: Arial, Helvetica, sans-serif;
background-color: slategrey;
font-size: 18px;
font-weight: bold;
color: white;
}
a {
border: 10px solid;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 28px;
width: 180px;
height: 180px;
}
.container {
position: fixed;
top: 40%;
left: 50%;
margin-top: -90px;
margin-left: -90px;
}
.box {
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
width: 180px;
height: 180px;
}
.download-icon {
box-sizing: border-box;
position: relative;
display: inline-block;
width: 80px;
height: 30px;
border: 10px solid;
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin-top: 78px;
margin-bottom: 18px;
color: white;
}
.download-icon::after {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
width: 40px;
height: 40px;
border-left: 10px solid;
border-bottom: 10px solid;
transform: rotate(-45deg);
left: 10px;
bottom: 20px;
}
.download-icon::before {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
border-radius: 15px;
width: 10px;
height: 50px;
background: white;
left: 25px;
bottom: 25px;
}
.block-icon {
box-sizing: border-box;
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border: 10px solid;
border-radius: 100%;
margin-top: 58px;
margin-bottom: 18px;
}
.block-icon::before {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
width: 50px;
height: 10px;
background: white;
border-radius: 25px;
transform: rotate(45deg);
top: 25px;
left: 5px
}
</style>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha1.js"></script>
<script>
function existsFile(url) {
var http = new XMLHttpRequest();
http.open('GET', url, false);
http.send();
return http.status == 200;
}
var key = prompt("Key:", "");
var hash = String(CryptoJS.SHA1(key));
var url = "https://yourserveraddress.com/apps/" + hash + "/manifest.plist";
if (existsFile(url))
document.write("<div class='container'><div class='download-icon'></div></br>DOWNLOAD</div>");
else
document.write("<div class='container'><div class='box'><div class='block-icon'></div></br>ERROR</div></div>");
</script>
</body>
</html>
To make it work you just need to put ipa files and manifests files in proper folders (named as sha1 hash of your key) on your server and edit url in above html and manifests as needed.
Related
iOS Autofill from SMS passcodes not working on flutter web
According to this page iOS can read the sms codes and offer it on top of keyboard. I use a package in my flutter app, that adds autofill=oneTimeCode in my input. It works well on the iOS native app export, but not works on flutter web export, what's the problem? I also checked the html code that exported by flutter, and there is autocomplete="one-time-code" here: <input name="one-time-code" id="one-time-code" type="text" autocomplete="one-time-code" autocorrect="off" class="flt-text-editing transparentTextEditing" style="white-space: pre-wrap; align-content: center; position: absolute; top: 0px; left: 0px; padding: 0px; opacity: 1; color: transparent; background: transparent; outline: none; border: none; resize: none; overflow: hidden; transform-origin: 0px 0px 0px; caret-color: transparent; text-align: center; font: 1px On, Arial, sans-serif; width: 290px; height: 1px; transform: matrix(1, 0, 0, 1, 50.2, 221.5);"> I do not understand what's the problem Is there any way to change type="text" to type="tel" or type="number" in the exported html code by flutter?
Update: This is a known bug, and flutter team will fix this soon. https://github.com/flutter/flutter/issues/104693
problem with z-index with leaflet with IOS
I have a webpage Find a walk which uses Leaflet to enable site visitors to find a walk in the British Isles from a specific location.
The page generates a search box and map.
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search by city, town or village" />
<div class="result" ></div>
</div>
<div id="walkingBritainMapDivWrap">
<div id="walkingBritainMapDiv" class="walkingBritainMapDiv"></div>
</div>
For all browsers except IOS the lists of results from the search are displayed in front of the map. However with IOS the list of results is hidden behind the map.
I have tried using z-index on the relevant divs but this has no effects. I understand that Laeflet uses z-indez to add layers to the map which m,ight complicate the issue.
The CSS for these divs is :-
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin-bottom: 12px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid red;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
background-color: white;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
.walkingBritainMapDiv {
padding-top: 75%;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
z-index: 0;
}
Any help would be appreciated to solve this problem.
CSS Pseudo Selector :active in React and Static Html displays differently on Iphone chrome browser
I've recently come across this issue that
pseudo selector :active doesn't display the same on React and Static page.
this is what I apply
css code exactly the same
I don't even understand why this selector renders on mobile differently according to the framework and static.
button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
-webkit-appearance: none;
text-transform: none;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
.form_button {
display: block;
position: relative;
padding: 8px 0 8px 58px;
border: 1px solid red;
border-radius: 8px;
margin-bottom: 18px;
width: 200px;
height: 100px;
text-align: left;
}
.form_button:active {
background-color: green;
}
please check out these both link below on Iphone chrome broswer. ( not Android)
React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476
Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej
Does anyone know about this issue?
or any solution for this?
My web on iPad, iPhone, iPod [closed]
Closed. This question needs debugging details. It is not currently accepting answers. Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question. Closed 7 years ago. Improve this question i'm creating my first web site and it's going great, looks good, and works properly. The problem i have is that i just uploaded the files to the web hosting to see how is it looking across different devices, looks great on my Smart TV, on my Android phone, on the MacBook, BUT on the iPhone and the iPad everything looks bad. The slider is no longer overflowing, the widht is not working, even the menu buton is gone and the nav is always showing, please i need some help with this, is there some code to add so this can work on IOs movile devices? I been looking the internet for hours trying to find the solution, i found something that includes this code: -webkit-appearance: none; But nothing happens everything looks bad.Thanks in advance.
You are using CSS properties that need to be prefixed in order to work in -webkit browsers, even in newer versions, such as display:flex, justify-content, transition, flex-direction,...
The practical solution is to write normal (up to date) CSS and than run it through a tool that will add the necessary prefixes for making it compatible with most browsers. It's called auto-prefixing and you can read more about it here. Good auto-prefixing tools are connected to caniuse and can be configured for various specific needs (prefix for last three versions from each browser, or prefix for all browsers with an above X usage percentage, or combinations between the two).
Here are the auto-prefixed versions of your project's CSS files. Replace assets/css/header.css with:
*{
margin: 0;
padding: 0;
-webkit-appearance: none;
}
header{
z-index: 1000;
position: fixed;
width: 100%;
font-family: "roboto";
background-color: rgba(0, 0, 0, 0.7);
}
#btn-menu{
display: none;
}
header label{
display: none;
height: 30px;
width: 30px;
padding: 10px;
}
header label:hover{
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
.menu ul{
margin: 0;
list-style: none;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.menu li:hover{
background-color: rgba(0, 0, 0, 0.8);
}
.menu li a{
display: block;
padding: 20px 20px 10px 20px;
color: #fff;
text-decoration: none;
}
#media (max-width: 768px) {
header label {
height: 60px;
width: 60px;
padding: 10px;
display: block;
}
.menu{
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 30%;
margin-left: -30%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#btn-menu:checked ~ .menu{
margin: 0;
}
}
And assets/css/body.css with:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-appearance: none;
}
body{
z-index: 500;
position: relative;
}
#logo{
padding-top: 50px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#logo-image{
width: 100%;
max-width: 650px;
}
#containerslider{
padding-top: 59px;
position: relative;
margin: auto;
width: 100%;
max-width: 1920px;
overflow: hidden;
}
.slider{
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 400%;
}
.slider .section{
display: block;
height:100%;
width: 100%;
}
.slider img{
display: block;
height: 100%;
width: 100%;
}
.btn-prev, .btn-next{
width: 50px;
height: 50px;
color: white;
font-family: sans-serif; "roboto";
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 50px;
font-size: 22px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.btn-prev{
left: 10px;
}
.btn-next{
right: 10px;
}
.btn-prev:hover, .btn-next:hover{
background: rgba(0, 0, 0, 0.9);
}
.space{
height: 2000px;
}
how to beautify validations in rails
I have a simple scaffold rails application that is doing validataes_presence_of. The validation is making each textfield bordered. I just want the error messages to be displayed on top. How can I make these type of changes or color changes to the validation
Rails applications store their CSS in [application_root]/public/stylesheets. A new rails app will have a file called default.css in this directory. This file contains the following:
#errorExplanation {
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#errorExplanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}
#errorExplanation p {
color: #333;
margin-bottom: 0;
padding: 5px;
}
#errorExplanation ul li {
font-size: 12px;
list-style: square;
}
If you play about with the values of some of the parameters here - in particular border - you might find something that looks more to your taste.
Have you checked rails guide about validation errors?
I would suggest having a look at Formtastic. Easy to setup, works great with scaffold-type apps and has some nice clean HTML and CSS.