Strange behavior when mobile website is added to iPhone's "Home Screen" as a web app - iphone

I have a mobile oriented web site which is not intended to be run as a mobile web app. When users add the mobile site to their iPhone's home screen links do not work and the site gets broken.
Is there a way to detect a mobile site is running as an iPhone web app (from the Home Screen) and have it automatically launch in Safari instead? In other words, if the user "Add to Home Screen" to have it behave like a bookmark?

Remove <meta name="apple-mobile-web-app-capable" content="yes"> from your HTML. Websites as home screen icons open in Safari unless specifically ordered not to using that meta tag.

Related

Can't open my app from facebook in-app browser iOS 9

I've posted some article at facebook that links my app.
When I clicked link at the facebook in-app browser,
I excepted launch my app, but go to app store. Altough my app is installed.
I tried some meta tags like these:
<meta property="al:ios:url" content="testApp://" />
<meta property="al:ios:app_store_id" content="123456" />
<meta property="al:ios:app_name" content="testApp" />
<meta property="al:web:should_fallback" content="false" />
and
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
I can't figure out at all..
This issue only appeared in iOS 9.x AFAIK.
The app link works well iOS under 9 and safari.
I found some app that works well in facebook in-app browser(i.e whatsapp).
Is this native app problem? or client-side problem?
What am I missing?
Any opinion would be appreciated.
TIA.
Edit
There is an active bug report open for this https://developers.facebook.com/bugs/802238099898150/
As far as I understand, iOS 9 changed the way apps can interact with other Apps using custom URL schemes (Read more here). The basic idea is that Facebook can no longer intelligently open other apps using a custom scheme as they have to register all the schemes they support inside the App plist.
I have tested AppLinks with YouTube, 9GAG, Flipboard and IMdB and none of them work as they used to. The advertised behaviour (found here) is that your App will be opened if your link contains the relevant html app links tags.
Now the only way to open your app is to tap "Share" in the Facebook browser of the page you want to open, and you should see a "Open in 9GAG" line item that will open your app.

Filepicker.io upload fails with mobile safari full-screen

Filepicker.io works fine if I use my single-page angular.js app using a desktop, ipad, or iphone directly from mobile safari. But if I add my website to the iphone homescreen, and run the app using:
<meta name="apple-mobile-web-app-capable" content="yes">
Then the app fails immediately upon choice of picture when selecting from camera. It displays a red bar error, something to the effect of "end results to the screen failed. Please close this window and try again..."
Short version: Use the {container} option to open filepicker.io into an iframe in your page in this case.
More full explanation:
The default mobile behavior is to open in a new window, and the current iOS model will spawn a new safari instance from homescreen apps off window.open(). When Filepicker.io then sends the data back to the calling app, the Safari sandboxing prevents the data from being transmitted, causing the error seen.
To fix this behavior, you can force Filepicker.io open in an iframe in the page by using the {container} property.

How To Detect If User Has iOS App Installed In Browser - Like Example Site In Post

I am wondering how this site detected that I have their iOS app installed when I visited their web site on my phone.
http://drafthouse.com/austin
Sites can implement Safari Smart App Banners. See Apple's documentation for details:
Promoting Apps with Smart App Banners
It is done via something like this:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
These are called Smart App Bannners and are a feature of MobileSafari on iOS 6. You can add these using literally one line of HTML code (a <meta> tag, see the linked docs).

iPhone web app icon: Force native Safari to load (like Grooveshark)

Our iPhone web app has a homescreen icon users can save. It's an audio specific application.
When users save it to their homescreen and then click homescreen icon, the iPhone doesn't open regular Safari. Rather it opens some sort of quasi Safari, one where there is no URL bar to be seen. Actually it's really cool and makes our web app feel a lot like a native app. Unfortunately this version of Safari doesn't play audio when user has their phone sounds off. Regular Safari will play sounds either way.
Thus and like Grooveshark has done we want when user clicks our web app icon to open regular Safari.
Can anyone provide any guidance on this?
If it's opening a standalone application you have to remove the web-app-capable from your meta tags.
<meta name="apple-mobile-web-app-capable" content="yes" />
More informations

Site loses authentication if was open from link on iPhone home screen

I have asp.net mvc site. User need to login for access. I found then when user added link to site on home screen of iPhone and after this user goes via this link. The site is opened in some limited sandbox(not Safari) - you can check there for different. It isn't problem. User log-in and redirected to main page. But when user clicks on any link on main page he is redirected to Safari. Sure user loses authentication in this case. How is possible to solve this?
I see two way:
Redirect user to Safari immediately when site is opened and authenticate there.
Keep to work in this sandbox.
I prefer first way but will be pleasure for any advice.
I have found same problem but frankly I didn't get solution
Add
<meta name="apple-mobile-web-app-capable" content="no" />
To your HTML head section. This will make it open in Safari from the home screen.