Detect in-app (webView or mini) browser on mobile - javascript

I have an Angular 9 app. I want to show some message when user open it on gmail in-app browser. I did't find a way difference between gmail in-app browser and Safari on iPhone. I've tried those approaches: detect ipad/iphone webview via javascript, check for indexeddb, Navigator.canShare() and they didn't help. navigator.userAgent are same on those browsers. Please help to find differences.

#maksym do you wish to differentiate the user sessions when your website is opened in the web driver of Gmail IOS app?

On iPhone, the viewport height is slightly different (iPhone 8: 1445 in Safari, 1461 in Gmail).
If:
user email domain is Gmail
iOS mobile user agent match
Gmail viewport size match (different per device)
assume user is in Gmail app
show interstitial page prompting user to click Safari link in bottom right, & also smaller sized link warning to 'Continue in Gmail app' if you want.
Note: This would not work for custom domains, or you would have to map them somehow.

You might consider promoting the Add To Home Screen (ATHS) process prior to the user completing registration. As long as it’s optional and doesn’t really block the user from completing registration itself, you have nothing to lose.

Related

Is it possible to open a new URL in Safari from Chrome if the page is being viewed on an iOS device?

Let’s say I have a webpage and it has a button with an HREF attribute. I want the HREF of that button to be opened on Safari browser if the button is being clicked from an iOS device, even if the user is accessing the page on Google Chrome.
As of now, I only need to handle this situation for Chrome and not any generic browser. The way I see it, there are two parts to the problem:
Identifying the OS of the Client Machine: This I might be able to do easily.
Opening the Popup on Safari from Chrome: This is the tricky part I am not sure if it is possible.
I am looking for possibilities of accomplishing the second part.
Short Answer: no.
Long Answer: Some iOS apps have defined URL schemes that can be used to access the app directly from the browser. For example, twitter://timeline. But Safari for iOS does not have one.
You can detect the OS the user is using and if it Chrome then suggest the user to open it in Safari and also provide the link where to download it from. Or you can also suggest the user to make safari their default browser. ( Also provide a link on how to do that to them).

Browsers security in fullscreen players

This question is just something that I want to know (nothing is broken in code yay)
In the most browsers going to fullscreen causes the security adnotation coming (in most cases) from the top of the display.
I can not understand why it is suspicous, could you share your knowledge about why it is less secure to view (fe) the video in fullscreen mode?
The browser chrome is a trusted security indicator, and full-screen mode hides that indicator.
If a page could enter full-screen mode without the browser notifying the user, a malicious page could enter full-screen mode, draw Chrome's address bar, and look exactly like a Google login page to trick the user into giving their password.

How to force Opera Mini users to view my website from other browsers on their phones?

I run a couple of blogs and I do not want my sites to be viewed from a Opera Mini mobile browser. I want to force my links to open on other browsers present on their devices other than Opera Mini. Basically, when my link gets clicked on by Opera Mini users, I want my site to open on other browsers present.
I have tried all I could but to no avail. I shall appreciate every help I can get over this.
You can check the USER AGENT of Opera Mini and show a message to the users.... but you can't open automatically another app from browser website, there are security restrictions.
Here you can find the useragent string for Opera Mini: http://www.useragentstring.com/pages/Opera%20Mini/
Here a good answer for check the user agente via javascript: Getting the User Agent with JavaScript

Google+ Sign-in Button in iOS

I have integrated google+ signin into a php-based web application. It works great in desktop browsers but in iOS6 Safari pressing the signin button does not trigger the appropriate behavior. If I open the app subsequently, it does work, suggesting an issue with caching. I've created a stripped down version, (similar to the one on the google site) of this at http://www.purpool.com/po/test.html . (It doesn't include any of the javascript handlers needed to complete the authentication.) Does anyone have suggestions as to fixing this?
I might add that in iOS6 Chrome the button works but the full authentication process (the opening of a new tab where the user agrees to the service, etc..) does not work as smoothly as it should.
Thanks for your help.
Peter

Facebook iphone-version as app outside safari on iOS?

I don't like web-apps for iPhone because they have to run inside the Safari instanace and have the Safari-toolbar at the bottom.
But today when I opened the web-app version of Facebook on my iPhone I got big eyes! This one opens in its own instance in the task manager and it fills the whole screen except the indicator bar on the top of the screen. THIS is the kind of web-app I like, and I'm really interested in how this works! But I've tried to search and I can't find any information about this feature.
To reconstruct the Facebook web-app I'm talking about:
Go to facebook.com or more exactly http://touch.facebook.com/?w2m in Safari on iPhone.
Click the middle button in the bottom bar in Safari and "Add to home screen"
Open the new Facebook web-app from the home-screen.
Every other web-apps I've saved on the home screen this way (e.g. different Google tools) opens in a new tab in Safari. But Facebook opens as a "stand alone" application in a new instance and without the Safari "shell" around.
I know that it is possible to script the onload of the document to scroll down so the address-bar is "hidden", but that's not what Facebook does!
This is done using a specific meta tag.
<meta name="apple-mobile-web-app-capable" content="yes" />
There are a number of these that let you set the status bar style, splash screen, home screen icon, etc.
Do note - JavaScript performance is significantly worse in standalone web apps like this, and you have to be careful about the user experience considering there's no back button.

Categories