We Keep Coding

React Native Samsung Universal Link stopped to work after upgrading to Android 12

Using a Samsung S10e on Android 12, I was able in the past to open our React Native application (https://github.com/pass-culture/pass-culture-app-native) through Universal Links.
We removed first all apps, all other browsers than chrome (such as samsung browswer), and then we did a factory reset using this menu:
It still can't open the app through universal link. All our other test devices from our team are able to open those universal links.
I tested from the email app (Gmail), slack, and so on, nothing work.
This is our assetlinks.json:
https://app.passculture.app/.well-known/assetlinks.json
This is a video demonstrating the bug:
https://user-images.githubusercontent.com/77674046/166442082-9e0189d6-248d-4046-9acd-34d46250c41f.mp4
We recently upgrading the device from Android 11 to Android 12, and it seems Google modified the behavior of applinks:
App links and our configuration seems to be OK.
This is our assetlinks : https://app.testing.passculture.team/.well-known/assetlinks.json
This is the error:
adb shell pm get-app-links app.passculture.testing
app.passculture.testing:
ID: 7b7458c4-f595-4840-839c-a6c1089b7b12
Signatures: [F2:59:8C:3F:07:B3:8E:6D:D0:20:A8:1B:A1:02:7B:82:41:53:88:D8:84:0E:CB:22:87:CC:CD:12:F0:8E:32:7F]
Domain verification state:
app.testing.passculture.team: legacy_failure
Consequence are that adb shell am start -a android.intent.action.VIEW \ -c android.intent.category.BROWSABLE \ -d "https://app.testing.passculture.team" only open the web instead of the native application.
Since Android 12 changed the applinks behavior, this is how we are testing but since it stays in legacy_failure, we still open the web :
https://developer.android.com/about/versions/12/behavior-changes-all
This is related ressources we have found:
https://doordash.engineering/2022/01/25/your-deep-links-might-be-broken-web-intents-and-android-12/
https://developer.android.com/training/app-links/verify-site-associations#auto-verification
App Link not opening in Android 12 by default. Possible SHA256 issue
Android App Links manual verification not working
https://zarah.dev/2022/02/08/android12-deeplinks.html
Does anybody can tell what is going on with Android 12 and applinks and how it can be fixed ?

There was a change in the policy for universal link from Android 12 (sdk 31), Google requires to use Android App Link, if you dont use it the app doesnt open. This article could help you: https://doordash.engineering/2022/01/25/your-deep-links-might-be-broken-web-intents-and-android-12/

We had to perform two change in order to fix our Android 12
AndroidManifest.xml
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" />
<data android:host="www.example.com" />
</intent-filter>
Example: https://github.com/pass-culture/pass-culture-app-native/blob/master/android/app/src/main/AndroidManifest.xml
It is required on android 12 to split android:scheme and android:host in two tags, as in the documentation: https://developer.android.com/training/app-links/verify-site-associations / https://developer.android.com/training/app-links#web-links
assetlinks.json
Server side, we needed to verify our site association (assetlinks.json) pass the google validation tool.
namespace must be android_app
package_name must be the one from the builded app (in our case, we used com.passculture instead of app.passculture.webapp)
sha256_signature must be the one from your keystore (in our case, we used the wrong one, using the one provided by google play, it worked)
All those points needed to be exactly like this, otherwise the autoVerify:true would have not work.

react native expo app ACCESS_BACKGROUND_LOCATION needs to be added to the manifest Problem

i'm building an expo app with the managed flow (so i don't have a direct access to the manifest in android) and i did read and even memorize the documentations and it said that i need to add the permission to the android.permissions in my app.config.json file which i did as follows:
"android": {
"permissions": [
"ACCESS_BACKGROUND_LOCATION",
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION"
]
},
and it's still telling me the same thing , even though according to the doccumentations this is the only thing i need to do to include the permission. but for some reason either the android device is ignoring this or expo is not adding it in the manifest they're building in the background or for whatever reason the app acts just as if i didn't add these lines to the config file.
things i tried :
i tried multiple ways including removing the fine location permission (because somewhere somebody said that the new android update accepts only one location permission ; either fine location or background location) . and that of course didn't work.
building a standalone version of my app (because somebody said that Expo go doesn't allow background location on android)
i've seen multiple issues opened on both github and expo forums about this problem , most noticeably :
1- issue raised on github
2- issue raised on expo forums
i also of course read the following
expo permissions docs
android config docs on expo
the code i'm using to ask for the permission:
try {
// at the following line it just breaks and jumps to the catch block
const { status } = await Location.requestBackgroundPermissionsAsync();
console.log(
"###################### requestBackgroundPermissionsAsync ######################"
);
console.log(status);
console.log(
"###################### requestBackgroundPermissionsAsync ######################"
);
if (status === "granted") // ... the rest of the code
} catch (error) {
console.log(error);
}
the code just breaks with an error at this line and tells me the following :
You need to add `ACCESS_BACKGROUND_LOCATION` to the AndroidManifest.
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:103:50 in promiseMethodWrapper
at node_modules/#unimodules/react-native-adapter/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-location/build/Location.js:142:7 in requestBackgroundPermissionsAsync
at node_modules/expo-location/build/Location.js:142:22 in requestBackgroundPermissionsAsync
at screens/home/GoToLocation.tsx:156:25 in onGoToLocation
at http://192.168.8.102:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:191029:39 in onGoToLocation
at node_modules/react-native/Libraries/Pressability/Pressability.js:691:17 in _performTransitionSideEffects
at node_modules/react-native/Libraries/Pressability/Pressability.js:628:6 in _receiveSignal
at node_modules/react-native/Libraries/Pressability/Pressability.js:524:8 in responderEventHandlers.onResponderRelease
the question is : is this like a bug in expo, and they need to fix it or is it something that i'm doing wrong? and if i'm doing something wrong. PLEASE HELP.

after batteling with it for a couple of days it turned out to be a bug in the new version of the expo go app 2.22.3 which doesn't read or register this type of permission at all . so i just downgraded to the version 2.21.5 and it worked just fine.
this was confirmed by one of expo's maintainers on the issue opened on github
github issue and confirmation
anyways , it seems they're working on it but up until it's fixed just use the older version of the app if you're testing with android.

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!

Deeplinking mobile browsers to native app - Issues with Chrome when app isn't installed

I have a webpage, lets call it entry.html.
When a user enters this page, a javascript code (see below) is attempting to deep-link the user to the native iOS / Android app.
If the deep-link fails (probably if the app isn't installed on device), user should "fall back" to another page- lets call it fallback.html.
here is the javascript code that is running on entry.html:
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
this is a standard deep-linking method that is recommended all over the network; try to deep-link, and if the timeout fires it means that deep-link didn't occur- so fallback.
this works fine, as long app is installed on device.
but if the app isn't installed, this is the behaviour when trying to deep-link:
Mobile Safari: I see an alert message saying "Safari cannot open this page..." for a moment, and then it falls-back properly to fallback.html- which is the expected behaviour.
Mobile Chrome is my problem.
when the app isn't installed, browser is actually redirected to the myapp:// url, which is of course, invalid- so i get a "not found" page, and fall-back doesn't occur.
Finally- my question is:
How can I fix my code so FALL-BACK WILL OCCUR on mobile Chrome as well? just like mobile Safari?
note: i see that LinkedIn mobile website does this properly, with Safari & Chrome, with or without the app installed, but i couldn't trace the code responsible for it :(
note2: i tried appending an iframe instead of window.location = url, this works only on Safari, mobile Chrome doesn't deep-link when appending an iFrame even if app is installed.
Thanks all!
UPDATE:
i found a decent solution, and answered my own question. see accepted answer for my solution.

for whoever is interested, i managed to find a decent solution to solve these issues with deeplinking Chrome on Android.
i abandoned the myapp:// approach, i left it functioning only in cases of an iOS device.
for Android devices, i'm now using intents which are conceptually different than the myapp:// protocol.
I'm mainly a web developer, not an Android developer, so it took me some time to understand the concept, but it's quite simple. i'll try to explain and demonstrate MY solution here (note that there are other approaches that could be implemented with intents, but this one worked for me perfectly).
here is the relevant part in the Android app manifest, registering the intent rules (note the android:scheme="http" - we'll talk about it shortly):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
now, after this is declared in the app manifest, i'm sending myself an email with "http://www.myapp.com" in the message.
when link is tapped with the Android device, a "chooser" dialog comes up, asking with which application i want to open the following? [chrome, myapp]
the reason this dialog came up upon tapping on a "regular" url, is because we registered the intent with the http scheme.
with this approach, the deeplink isn't even handled in the webpage, it's handled by the device itself, when tapping a matching link to an existing intent rule defined in the Android app manifest.
and yes, as i said, this approach is different by concept than the iOS approach, which invokes the deeplink from within the webpage, but it solves the problem, and it does the magic.
Note: when app isn't installed, no chooser dialog will come up, you'll just get navigated to the actual web page with the given address (unless you have more than 1 browser, so you'll need to choose one... but lets not be petty).
i really hope that this could help someone who's facing the same thing.. wish i had such an explanation ;-)
cheers.

It is very important to make sure that when you try to open a deeplink URL with JavaScript that the URL is properly formatted for the device and browser. (If you do not use the appropriate deeplink URL for the browser/platform, a user may be redirected to a “Page Not Found”, which is what you experience.)
Now you must note that Chrome on Android has a different URL format than the old standard Android browser 1! You need to annotate the deep links using href="android-app://" in the HTML markup of your web pages. You can do this in the section for each web page by adding a tag and specifying the deep link as an alternate URI.
For example, the following HTML snippet shows how you might specify the corresponding deep link in a web page that has the URL example://gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
For more details, see the references here:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
And here's a deep link testing tool for Android: https://developers.google.com/app-indexing/webmasters/test.html
Hope that helps.
1 Since the old AOSP browser was replaced by chromium, this is now the default way to handle deep links for recent Android versions. Nonetheless, Android still requires a conditional soltion, because older OS versions still use the AOSP browser.

I have created a Javascript plugin, which supports most of the modern browsers on mobile. But it requires to have deep linking landing pages to be hosted on cross domain(different than universal link url) to work on ios9 Facebook using universal linking. There is also different way to get that working on the Facebook iOS9 using Facebook SDK. I am sharing this if anyone might find this helpful. Currently it does not fallback option, but if falls back to the App Store.
https://github.com/prabeengiri/DeepLinkingToNativeApp

I am Using this Code to for deeplinking.
If the app is installed the app will open up..
If the app is not installed then this remains as it is..
If you wish to add any other condition for app no install then just uncomment the setTimeout code .
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''){
var fallbackUrl ='http://scootsy.com/';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log('Iframe Removed...');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>

setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
window.location = 'app://';
Need to check document.hasFocus() here because if app is open then playstore url is also open in browser

I also had similar issue, there is a possible alternative for this. If the app is not installed on user's device we can redirect that to some other url.To know more about it Check Here
Example:
Take a QR code

In my case its working fine in opera and chrome browser my deeplink url is
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
For other browser create iframe and append the url.
Note -: iframe url append having issue with old device and in firefox its opening app dialog .

Using Phonegap CLI - Barcode scanner not working

I developing an app for iOS and Android using PhoneGap 3.4.0 from the command line interface, and want to make use of the BarcodeScanner plugin. The problem is that the scanner does not actually do anything when called by my app. The camera does not come up. By using console.log with Safari developer tools, I can tell that the scan function does exist and is getting called... it just isn't doing anything.
I installed the scanner plugin like this:
phonegap plugin add https://github.com/wildabeast/BarcodeScanner
In the index.html, included the javascripts like this:
<script src="phonegap.js"></script>
<script src="barcodescanner.js"></script>
In config.xml, added this:
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
When I set scanner variable like this it logs that there is a BarcodeScanner, and it does have a function scan, but then when I call the function scan nothing happens. (the camera does not open).
var scanner = cordova.plugins.barcodeScanner;
console.log(scanner) // => BarcodeScanner
This is how I'm calling the scan function:
scanner.scan( function (result) {
... my code here...
} );
Any ideas? I'd really appreciate any help or pointers in how to get the barcodeScanner to work with PhoneGap.

I´m having the exact same problem.
After I updated my App to support arm64 (iPad Air), I ran into this issue.
A work-a-round:
Push the hardware On/Off button.
Turn on the device again.
Try starting the barcodeScanner.
This worked for me - but the App will not leave my desk before the issue has been fixed properly.
The issue now exists on all of my devices (iPad Mini, iPhone 4S, iPad Air).

The problem was that the version from wildabeast was not compatible with PhoneGap >= 3.2.0.
Use this branch instead: https://github.com/phonegap-build/BarcodeScanner
Install with
phonegap local plugin add https://github.com/phonegap-build/BarcodeScanner
To get it to work, I had to create a brand new app, copy the www folder over, and then install the plugin.