angular link selection doesn't work on IOS safari - ios

I'm doing a responsive app using meteor and angular, and i have a share link functionality. On desktop it is an input field on read only and the user can copy the link. On mobile I want to do display an link with tag. But on iOS safari doesn't react correctly when I long touch the link. Usually there is a menu of option that are displayed, but here just nothing happen.
my simple code : {{url}}
Thanks in advance to anybody that has an idea about this issue.
Update: I just tried wiht <a ng-href="{{url}}">{{url}}</a> on Firefox android and it work perfectly. The issue is really an iOs case

You should use ng-href={{url}} instead.
My guess is that iOS reads first the {{url}} as it is, and when angular updates it to whatever value is stored in the url variable, it does not pick up the new value.
And because the string {{url}} is not valid url, it does not know how to work with that, so it does nothing.
(I am not iOS developer, but still, you should use ng-href for this)

For long touch/press especially for mobile: Check this angular directive link

Related

(React-Native) Set Cookie doesn't work in IOS, but perfectly on Android

Problems
I'm using react-native for our current services, and we are sending cookies to our webpage to send information which is needed to seen in our webview. These process is working PERFECTLY in android devices, but not in IOS. (The most annoying thing is set-cookie works sometimes in IOS in same condition. It just randomly succeeded, and I cannot find the reason why.)
How To Reprouce
First of all, these are the stacks we are currently using.
Application: React-Native
Webview: react-native-webview (https://github.com/react-native-webview/react-native-webview)
Cookie: #react-native-cookies/cookies (https://github.com/react-native-cookies/cookies)
Webpage: React (Already deployed in AWS)
Cookie: react-cookie (useCookie)
And the following is our process we are currently doing.
If the user clicks a button (I will call this button as 'Apply' button), it navigates to screen that includes <WebView />
This is a abstract of our webview screen code (For our security issue, I just abstracted and changed some code for it, so if you think more information for our code, please let me know.)
Rendering Page
enter image description here
WebView Component
enter image description here
Send Cookie
enter image description here
Send Cookie Function
enter image description here
(This function is kinda messy bc this is a collective code from 3 files, and I tried my best to set cookie differently with android. (The same logic with android doesn't work in IOS))
Webpage (Launched in AWS)
enter image description here
I Want My Code To Do This
I want my code to send cookie in loading state, and after loading, when the webview rendered, the webpage get some cookie and based on that cookie, it shows some data.
It PERFECTLY works on Android, but not in IOS. It works randomly in IOS so I have no idea what the heck is wrong with this code and hard to define a problem.
I tried...
Someone said to me to add '.' infront of domain. It worked for the very first time, but after the second trial, it starts to not working again
I also tried clear all cookie data before set cookie using
await CookieManager.clearAll();
, but it works same as the first measure I tried.
I also tried to use webkit. I send all true arguments to use webkit while using cookiemanager, but it has no effect.
I expected to do...
As I write in the above, I hope the cookie is rightly set in both android and ios environment, perfectly works in both platform.

Change the display of Safari with ReactNativeKeycloak in-app browser options

I am trying to change the display of the following login with keycloak page.
https://imgur.com/a/X18bmgC
This shows up with Safari when starting the app.
The problem I have is that the user has to scroll to see the " New user " part of my WebView. And this is a problem.
I'd like to change the display of my WebView to make it look like this if possible :
https://imgur.com/a/DYfpkRS
Here I had to manually unzoom the page.
<ReactNativeKeycloakProvider
authClient={keycloak}
onEvent={onEvent}
initOptions={{
redirectUri: 'mobile://presentation',
inAppBrowserOptions: {
ephemeralWebSession: true,
modalEnabled: true,
},
}}>
This is the code displaying the Keycloak Login page in Safari ( https://github.com/react-keycloak/react-native-keycloak ).
I've checked the different InAppBrowser options here : https://github.com/proyecto26/react-native-inappbrowser#ios-options
When changing the values of each of these options, I can see no differences on the iPhone I'm using. When I change 'ephemeralWebSession' from true to false, I can see the difference. But every other option makes no difference for me. I tried to change 'modalTransitionStyle', 'modalPresentationStyle', 'readerMode' and 'preferredBarTintColor' values, but nothing shows different on the WebView.
I don't understand what I should change to get my WebView to change aswell.
I realize this is about 6 months old as I'm writing this answer, but I had this same issue and came across this in a search.
There is an open issue with InAppBrowser that addresses this: https://github.com/proyecto26/react-native-inappbrowser/issues/292
In short, RN Keycloak calls the InAppBrowser openAuth method to start an ASWebAuthenticationSession instead of a typical web session with the open method. ASWebAuthenticationSession is not customizable, per Apple.
So, the choice is to modify the RN Keycloak package to use the open method, or to do some overriding trickery with Objective-C as found here: https://msolarana.netlify.app/2021/01/06/fixing-aswebauthenticationsession-presentation/

Double message on ios when get geolocation

I have created an ios app (Xcode) with a single WebKit View component that loads an external website. This website tries to get the current geolocation with this Javascript: navigator.geolocation.
This all works fine, but the problem is, I get 2 messages:
First a message for the app: 'Allow "NameApp" to access your location while you are using the app?'
Second a message for the webview: 'https://mywebsite.com would like to use your current location'.
I have seen similar questions about this issue, but they all went about a native/offline Cordova app. I have an online app in my Webview.
How can I prevent this double message? Or a workaround for this problem?
I used the WebViewGold for iOS app template for it & it worked out of the box without second / repeated dialog. Maybe helps other developers/no-code guys.

Open iOS App by http:// link

I found a lot of tutorials about opening an app by a custom url scheme like:
myappname://
Thats nice but it would be great to open an app by registering the real app domain over the http link like
http://www.myappdomain.com/blablabla
So - for example - if a visitor comes to a webpage (on her/his mobile) it is normally opened in the browser, excepts the installed app is listening to the opened URL and opens itself instead of the browser.
How is this done (i've seen this at another app). Any help would be great. Thanks in advance!
It is a new feature in iOS9. It is explained in the WWDC15 talk Seamless linking to your App.
You could also add a small piece of javascript to each page that opens your custom URL-scheme.

custom URL Scheme in iOS 6 not working?

My app uses a custom URL scheme so i send a link to my users in an email which when clicked, launches my app installed on their devices. This was working seamlessly till iOS 6 came into picture.
Now when the users click on the link or even type the address manually in the safari they get an error saying "Safari cannot open the page because it is a local file."
Wondering if anyone else encountered the same or if someone has any pointers in this regard !!
Any help much appreciated...
Update: it works if I only give my app's custom url without any parameters.. e.g. if I do "reader-app://" it launches my app but if i do "reader-app://doc=xyz" it doesn't !
try: reader-app://?doc=xyz (add a question mark after //) this way you'll specify a query string. It works for me, but it presents an alertdialog asking the user if she wants to open the url with my application
Try to remove the - sign from reader-app://.
My URL was not working until I removed underscore sings from URL.
Ex:
my_app:// is not working.
myapp:// is working.
That is just a guess.

Resources