We Keep Coding

Ionic 5: best practice to get the built platform

I'm writing an app using Ionic 5, Angular and Cordova. I would like to get the "platform" variable used to build my application (i.e. the argument used in a command like "ionic cordova build android).
Unfortunately, all I found on the web was the Platform service (https://ionicframework.com/docs/angular/platform), useful but not quite what I needed (e.g. platform.is('android') can return true if the application runs on a web app on an android phone, on a browser on an android phone or if I click F12 on chrome...).
What I need is to find the platform the application was built for.
The best way I found to achieve the result, was to add "build:before" hook in my ionic.config.json file
"hooks": {
"build:before": "scripts/build-before.js",
"build:after": "scripts/build-after.js"
}
and change the constant in a service before building
#!/usr/bin/env node
var process = require('process');
var fs = require('fs');
let input=process.argv;
let android="android";
let browser="browser";
let ios="ios";
let platformFile="MYFILE"
module.exports = function() {
let nbArgs=input.length;
let platform;
for(let i=0;i<nbArgs;i++){
if(input[i]==android){
platform=android;
}
if(input[i]==browser){
platform=browser;
}
if(input[i]==ios){
platform=ios;
}
}
let file = fs.readFileSync(platformFile, 'utf8');
let replacement="MYSTART '"+platform+"';";
let result = file.replace(/MYREGEX/g, replacement);
fs.writeFileSync(platformFile, result);
console.log("Service updated with platform: "+platform);
}
Then in the build:after I restore the file as it was (to avoid to commit the file on GIT after each build...).
I added the code in case someone has the same issue and looks for a quick workaround.
My question is: does anyone know of an official/smarter way to achieve the result?
Thanks,

I'm not entirely sure of what your goal is, but detecting the platform where the app is running is way easier than that. For example, if you want to know if the app is being executed on an Android mobile device, you could use the following condition:
if(this.platform.is('mobile') && this.platform.is('android')) {
// ...
}
In a similar way, you can check if the device is a desktop, a pwa, ... or any other combination based on the following list:
https://ionicframework.com/docs/angular/platform#platforms
android: a device running Android
capacitor: a device running Capacitor
cordova: a device running Cordova
desktop: a desktop device
electron: a desktop device running Electron
hybrid: a device running Capacitor or Cordova
ios: a device running iOS
ipad: an iPad device
iphone: an iPhone device
mobile: a mobile device
mobileweb: a web browser running in a mobile device
phablet: a phablet device
pwa: a PWA app
tablet: a tablet device

How to access camera on iOS11 home screen web app?

Summary
We cannot access camera from an iOS11 (public release) home screen web app using either WebRTC or the file input, details below. How can our users continue to access the camera please?
We are serving the web app page over https.
Update, April
The public release of iOS 11.3 seems to have fixed the issue and file input camera access is working again!
Update, March
As people here have said the Apple docs advise web app camera function is returning in 11.3 along with service workers. This is good but we are not sure yet if we want to everyone to to reinstall again until we can thoroughly test on 11.3GM.
Solution, November
We lost hope Apple want to fix this and moved forward. Modified our web app to remove the iOS "Add to home screen" function and asked affected users to remove any previous home screen icon.
Update, 6 December
iOS 11.2 and iOS 11.1.2 don't fix.
Workarounds, 21 September
Seems we could ask existing customers of the web app
not upgrade to iOS11 - good luck with that :)
take photos in iOS camera and then select them back in the web app
wait for next ios beta
reinstall as a Safari in-browser page (after we remove ATHS logic)
switch to Android
File Input
Our current production code uses a file input which has worked fine for years with iOS 10 and older. On iOS11 it works as a Safari tab but not from the home screen app. In the latter case the camera is opened and only a black screen is shown, hence it is unusable.
<meta name="apple-mobile-web-app-capable" content="yes">
...
<input type="file" accept="image/*">
WebRTC
Safari 11 on iOS11 offers WebRTC media capture which is great.
We can capture a camera image to canvas on a normal web page on desktop and mobile using navigator.mediaDevices.getUserMedia per the sample code linked here.
When we add the page to iPad or iPhone home screen, navigator.mediaDevices becomes undefined and unusable.
<meta name="apple-mobile-web-app-capable" content="yes">
...
// for some reason safari on mac can debug ios safari page but not ios home screen web apps
var d = 'typeof navigator : ' + typeof navigator; //object
d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
// try alternates
d += 'typeof navigator.getUserMedia : ' + typeof navigator.getUserMedia; // undefined
d += 'typeof navigator.webkitGetUserMedia : ' + typeof navigator.webkitGetUserMedia; // undefined
status1.innerHTML = d;

We have quite similar problem. So far the only workaround we were able to do is to remove the meta tag for it to be "apple-mobile-web-app-capable" and let users to open it in Safari, where everything seems to work normally.

Update: While some earlier published changelogs and postings led me to believe that Web Apps using a manifest.json instead of apple-mobile-web-app-capable would finally have access to a proper WebRTC implementation, unfortunately this is not true, as others here have pointed out and testing has confirmed. Sad face.
Sorry for the inconveniences caused by this and let's hope that one lucky day in a galaxy far, far away Apple will finally give us camera access in views powered by (non-Safari) WebKit...
Yes, as others have mentioned, getUserMedia is only available directly in Safari but neither in a UIWebView nor WKWebView, so unfortunately your only choices are
removing <meta name="apple-mobile-web-app-capable" content="yes"> so your 'app' runs in a normal Safari tab, where getuserMedia is accessible
using a framework like Apache Cordova that grants you access to a device's camera in other ways.
Here's to hoping Apple removes this WebRTC restriction rather sooner than later...
Source:
For developers that use WebKit in their apps, RTCPeerConnection and RTCDataChannel are available in any web view, but access to the camera and microphone is currently limited to Safari.

Good news! The camera finally seems to be accessible from a home screen web app in the first iOS 11.3 beta.
I have made a repo with a few files, which demonstrate that it works:
https://github.com/joachimboggild/uploadtest
Steps to test:
Serve these files from a website accessible from your phone
Open the index.html in iOS Safari
Add to home screen
Open app from home screen. Now the web page is open in full screen, without navigation ui.
Press the file button to select an image from camera.
Now the camera should work normally and not be a black screen. This demonstrates that the functionality works again.
I must add that I use a plain field, not getUserMedia or somesuch. I do not know if that works.

Apparently is solved in "ios 13 beta 1":
https://twitter.com/ChromiumDev/status/1136541745158791168?s=09
Update 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

This seems to be working again in iOS 11.4 if you are using a file input field.

Recently I faced the same problem, the only solution I came up with was to open in the app in browser instead of the normal mode. But only on iOS!
The trick was to create 2 manifest.json files with different configurations.
The normal one for android and one for everything is Apple, manifest-ios.json, the only difference will be on the display property.
Step 1: Add id to the manifest link tag:
<link id="manifest" rel="manifest" href="manifest.json">
Step 2: Added this script to the bottom of the body:
<script>
let isIOS = /(ipad|iphone|ipod|mac)/g.test(navigator.userAgent.toLowerCase());
let manifest = document.getElementById("manifest");
if (isIOS)
manifest.href = 'manifest-ios.json'
</script>
Step 3: in the manifest-ios.json set the display to browser
{
"name": "APP",
"short_name": "app",
"theme_color": "#0F0",
"display": "browser", // <---- use this instead of standard
...
}
Another problem appears such as opening the app multiple times in multple tabs, sometimes.
But hope it helps you guys!

In Iphone, Ipad and using Safari Browser - An alert "Open with myapp"

In iOS using Safari Browser, an alert "Open with xyz app" is showing before redirect on app if app installed and an alert "Invalid address" then "Open with app store" if app not installed.
Is there a way to redirect on app if installed otherwise on app store without showing any alert? Like yelp.com?
Currently I am trying it using java script but it is showing an alert.
document.location.href = "myapp://url?url=" + encodeURIComponent(window.location.href);// "myapp://?url=" + encodeURIComponent(window.location.href);
setTimeout(function () {document.location.href = "appstoreurl";}, 2000);
Can anyone help me to resolve this issue?

Yes you can.
For this you need to setup Universal Links.
You should read the documentation here:
https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html
The way you are doing it is "deprecated" since iOS 9

$window.location.reload no longer working android 4.4+ Ionic Angular

The app is built using the ionic framework.
Its been installed on a new device that's using Android 4.4.
Based on this question I used this code to reload the page:
$scope.reloadRoute = function() {
$window.location.reload();
}
This does not appear to work in Android 4.4+
I have tried the other suggestions from that answer, but they do not work for our case.
I tried this:
location.href = location.origin;
It doesn't work. I need it to reload.

Start app with android chrome, first time download it

If the app is in my phone, it will start it,but if it's not, download it.
here is the code:
window.location = 'intent://' + schemeUrl + '#Intent;scheme=' + scheme + ';end';
setTimeout(function() {
self._gotoDownload(startTime);
}, self.openTime);
It works well in other browsers, but'in chrome, if my phone has not install this app,it will open a error page.I try to use iframe to load the 'intent...', but it still not work.

Well,after so many days,there is still nobody give me the answer.But I found the answer just now. See theopen an app in chrome in android
works well in my test, thanks.