Mobile App detection from browser - javascript

I want to detect via JS if a user does or does not have a particular app installed.
I know about the app store tag that will pop the generic "download this app" if they don't have it installed. I'm not asking about that.
I have a concept, but it's incomplete. This would try to target both iPhone and Android devices.
Knowing that a link with a particular prefix can trigger an app to open:
Target a hidden iframe with JS to open a url prefixed to trigger that app
That page would fire a post message back to the parent if it loads, indicating the app was not opened.
If the app exists, the message would never be fired back to the parent, since it would open in the app.
Unfortunately, my client does not want app to open (or attempt to open) automatically, but simply know wether or not it's installed.
Thoughts? Blaring errors in my logic? Work-arounds? Existing solutions?
Thanks

There's likely no way to do this, because generally speaking you aren't allowed to poke around on a user's device from a web page. Even though what apps a user does or doesn't have installed isn't the most sensitive of personal information, it would still be a bit of a security/privacy concern to expose that information to scripts coming from the web. The app store tag is probably the closest you're going to get, since it's an official API to provide similar but protected functionality.

I can think of two ways to try to solve your problem, although none is especially good. Since iOS 6, you can use Smart App Banners to promote an app.
The most obvious solution would be to hide any actions from the user, e.g. by preventing the activity from showing up after issuing the URL request. I don't have any experience with this and cannot tell you to what extent it might be possible to hide it.
To be honest, I have no idea whether the second approach will work on mobile devices. It has been used for desktop applications a lot and allows inter-application communication - including communication between the browser and the app. However, the possibilities might be limited due to the usually high security restrictions on mobile devices. This is a highly theoretical suggestion as I am pretty sure it is unsuitable, whether it is possible or not.
Your app must provide a tiny HTTP server on an unused but fixed port. Your JavaScript code can then use JSONP to communicate with the app (assuming the security restrictions of the browser don't prevent this). If communication fails, you may assume the app is not installed.
Before anyone attempts to criticize this approach, let me say that this is a theoretical possibility, might be unstable and is unsuitable for most apps. The efforts of running an HTTP server are far too high for such a secondary task.

Related

Safety script to clear cache and leave website immediately

I am working on a website for a women's shelter and they want a "panic button" that automatically takes you to another site. This is pretty common, but I need it to also automatically clear the cache, so the abuser can't hit the "back" button or history to see what they were looking at before being interrupted. Any ideas?
I think that the answer is "can't be done as website functionality" unless the user installs a browser plugin. For example, here's what Mozilla Development Network (MDN) says about this:
For security reasons .... there is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.
Non-privileged basically means any javascript that a website might run on the browser.
Now a "panic button" plugin / add-on would be able to do this kind of thing, but:
The user has to install it. (Simple for a moderately tech-savy person ...)
If someone looks at the browser, it will be apparent that it has been installed.
There is also the issue of people how people decide to trust a plugin like this to be properly implemented, and not contain nasty stuff.
A better idea would be to educate the user in using browser incognito mode. However that still leaves traces on the user's computer (depending on your browser, and other things), and in external network logging, etc.

Strange website redirect issue on mobile browser that's influenced by cache

I'm at a loss here.
I have a new Wordpress site at synergration.com.
If you access it on a mobile device (phone, not tablet) it will generally load fine the first time. Once you click on to another page and/or reload the home page it jumps into a redirect loop indefinitely attempting to reload the same page over and over and over...
I've weeded through the code and have been unable to find any JS redirects. I've also contacted the theme developer and they've been unable to help.
This only became an issue when I started hosting on WP Engine. They use some advanced caching that seems to be the culprit here as when I test the mobile site on their staging server (where no cacheing exists) it loads fine.
I contacted WPEngine about it and this was their reply:
This is being caused by our caching systems that run on our platform.
It looks like the theme is handling an internal redirect that detects
the user agent (desktop or mobile) and redirects the visitor to the
appropriate site based on that information. However, the redirect is
getting stuck in cache, causing the mobile version to load in an
infinite loop. Unfortunately, we don’t have an easy solution for this.
If this were only one part of the site, we could just exempt that part
of the site from caching, but because it covers the whole site,
exempting from caching isn’t an option. Our staging area is exempt
from all caching, which is why it’s working normally there. (The old
host was most-likely using a non-cached environment, which is why you
didn’t see this issue there). I would contact the theme developer and
ask them if they’ve ever come across this issue before. There’s a good
chance they have, and they might have a clever solution as a
work-around. You might have the option of disabling the mobile
routing, which would solve the redirect issue, though mobile devices
would load the full version of the site rather than the slimmed-down
mobile version.
As noted above, the theme developer didn't have any solution and I'm back at square one so I figured I'd reach out to stack to see if ya'll had any ideas.
I have two sites on WP Engine with redirect. They are identical gensis child themes and redirect plugins. I have one setup with a DNS redirect to a cname record for a "M.sitename.com" URL and the other redirecting to the mobile site that is having the same issue you noted above. I haven't had an issue with the site that points to the cname record. I am about the change the other site to the cname configuration to see if it makes a difference. I have no ideal why this works, but thought you might find this of value.
It works absolutely fine in my mobile's Opera Mini browser. To answer your question, an alternative way is to just create a mobile subdomain, like m.yourdomain.com. Make this decision public and let mobile users know in advance that that is the site for mobile users. A specific mobile site is loads better than visiting the page and then being redirected. It also saves time.
While developing the mobile site, keep in mind, to use minimal JavaScript. The reason being, that older mobile versions may not support JavaScript and if JavaScript is essential then it becomes a big problem.
Speaking about the theme, if it is getting stuck and developer has no idea, so the best option, FOR NOW, is change the template. Let the developer inspect on his very code. You can by that time use another template, that'll keep the site up running well whether it is on Mobile or anything. Because, small errors can divert lot of traffic from your site. I, to be frank, have no idea about what caching problems WP is having, and I don't expect anyone here to be knowing that, so it really depends on time. Till then, as I said, do try to use some other template for the time-being.
All the best.
I faced similar issue recently. It took good amount of time but I finally figured it out.
To prevent redirect from caching, you have to use 302 redirect. Moreover, you have initialize this redirect in "template_redirect" action of wordpress. If you do it in like "init", it'll be cache too.

Instagram iphone hooks

Instagram has some cool hooks that can be used to open the app from a web url.
e.g. instagram://camera
But when a user doesn't have instagram installed, the browser doesn't know how to handle the url. Is there a way for me to detect if the user has instagram installed (in javascript)?
In Objective-C the [[UIApplication sharedApplication] canOpenURL:url] expression may be used to detect whether a URL is handled by any app in the system. If you use PhoneGap or some similar framework, then look for this method. If you have only a webapp, then I'm pretty sure that this is impossible.
The issue with a web app is that it is sandboxed like a web page, it cannot reach outside of the browser. However, it seems to be possible that you can detect the presence with a timing based method. That is, if the app is not installed, the user will return to, or not be able to leave at all the browser within a certain, relatively short time. Thinking along these lines I found this solution: Check if URL scheme is supported in javascript
You may be able to build a solution using this approach, but the "Cannot Open Page" alert box will always be thrown at your users. Though, this IMHO is not really annoying if you handle it correctly on the web app side.
UIApplication has a method canOpenURL: that you can use to check.
if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:#"instagram://camera"]]) {
}

Get a tablets(iPad or Droid) mac address?

Synopsis: I am developing a HTML5 web app that will allow tablets(iPad or Droid) to login to a server and perform various functions. The client would like a way to check the devices mac address when logging in. From what I have read, most solutions use activex objects that will not work for webkit browsers.
Question: Does anyone know a solution that would hook into a HTML5 web app seamlessly(Idealy update a hidden form element with the value upon logging in)?
Thanks!
I don't think there's going to be a straightforward way to do this. The web server won't be exposed to a client's MAC address unless they're on the same physical segment...you'll only see the MAC from the most recent router hop in general.
If anything exists, it's going to be a browser plugin (show-stopper on iOS). And it would probably need more than the default permissions available (I don't suspect you can enumerate network interfaces in Java, for example, without asking for elevated permissions).
If you're looking for HTML/JS only then I don't think that this is possible. It won't be exposed.
The problem is that the packets you recieve back will only contain the MAC address of the node on the last hop.
This may be possible via a plugin, but then this limits you on iOS, and possibly also Android as you'd need to provide them a way of getting the plugin first (unless you used a plugin that was installed by default).
Edit: Not that I support an app for every little thing, but it shows that easy to press app buttons sometimes tend to do better than web apps (regardless of being able to make browser shortcuts to home screens). If it is suitable, you could consider loading this within a web view on the target device from within an app, from which you can then of course access MAC addresses and whatever else you may need.
MobiThinking: Mobile applications: native v Web apps – what are the pros and cons?
Forbes: Mobile Web App vs. Native App? It's Complicated

What is the best way for a website to check if a user has installed a client app?

Let's say I've got a website that works better if a client has installed and logged into a desktop application. I'd like to be able to do 2 things:
Alter the website if they haven't installed the app (to make it easy for them to find a link to the installer)
If they've installed the app on a couple of machines, determine which machine they are browsing from
I'd like something that works on Windows and OSX, on any of the major browsers. Linux is a bonus.
A few thoughts:
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
Could I just let the client serve HTTP on localhost and do some javascript requests to fetch a local ID? I know google desktop search did something like this at one point. Is this a standard practice?
Thanks!
You can register a protocol from your desktop application (see this). This can be used, for example, to open your desktop application with arbitrary data from the website. You could then have your desktop app send a HTTP request to your webserver, telling it what machine you are on.
You can have a browser plugin (activex for IE or Netscape plugin for the rest of the browsers) that can communicate with the application. When the webpage is loaded, it can try to instantiate the plugin and if it succeeded, it can use it as a proxy to the application. If it fails, then either the app is not installed or the plugin was explictly disabled by the user. Either way, your website should degrade its functionality accordingly.
Update: Forgot to answer your questions:
Flash does it exactly this way. Flash is a browser plugin that is created by the web pages.
You can have a machine ID generated at the application/plugin install time and your plugin can pass that machine ID to the webpage when it is created.
On the topic of using local webserver:
I would stay away from having a local webserver, mainly because of security considerations. It takes quite a lot of work to make sure your local webserver is locked down sufficiently and there are no XSS vulnerabilities that other malicious websites can exploit to make it do stuff on their behalf.
Plus, having a webserver means that either it has to run as a system-wide process, or if it runs as the user, you can have the website interact with only one user's instance of the application, even though multiple users can be logged on and running it at the same time.
Google Desktop Search suffered from both the XSS security vulnerability (though they fixed it) and the limitation of only one user being able to use it on a machine (I don't know if they fixed this one yet, though chances are they did).
Websites can detect if you've got Flash installed.
Actually, I believe a browser can detect if you have the Flash plugin for the browser installed, and webpages can offer "installed" and "uninstalled" option that the browser can choose.
Otherwise, you are asking for a means, by putting some code in a webpage, of being able to analyze a user's home computer, and report what it learned to you website.
Can you say Major Security Hole?
If you can pick a development environment for the desktop app, then check out AIR from Adobe. It lets you develop desktop applications using either html/javascript, Flash, or Flex.
It has API calls you can use from a browser based flash app to see if the desktop based AIR app is installed, what version, etc. You can even launch it and pass parameters from the web app to the desktop app.
http://www.rogue-development.com/blog2/2008/03/interacting-with-an-air-app-from-a-browser-based-app/
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
it's quite a bit simple, your browser tries to render some additional files, with some specific formats such as flash .swf and I the browser doesn't find installation, then will be start downloading, or you will get the option to download that program.
Flash also uses AC_RunActiveContent.js please take a look at this js, people usually put this on their webpages
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave cabs/flash swflash.cab#version=8,0,0,0','width','981','height','635','id','build5','align','middle','src','build5','quality','high','bgcolor','#ffffff','name','build5','allowscriptaccess','sameDomain','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','build5' ); //end AC code
}

Categories