We Keep Coding

Mobile App detection from browser

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.

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.

phonegap for iOS (iPad 2, iPad3) - Background worker and continuous refresh

I am developping an app for Ipad (2 and 3).
The app needs a continuous synchronization with a remote web app. Point is, my app needs to keep "listening" whenever there is connectivity in order to receive updates (lots of data), alerts,... etc.
PS: Before going further I would like to highlight that my app is not targeted to the appstore and moreover it can't rely on push notifications.
What I am confused about is the multitasking on the ipad. I would like my app's local db to stay synchronized by communicating with the remote web app. And hence my questions are:
Does any of the ipads have a real multitasking? (like android's where you can have "services") Meaning that my app or at least a small part of it would still operate even if it is not active on the screen.
How can I achieve that using phonegap standard framework?
If the above points show that at some extent it's not possible. Is there still a possibility to extend phonegap with a plugin and make this happen?
If the above three points are unfortunately fully negative; how would you address the problem by keeping in mind that the syncrhonization involves a lot of data and is mandatory to cover the app's usability?

Does any of the ipads have a real multitasking? (like android's where
you can have "services") Meaning that my app or at least a small part
of it would still operate even if it is not active on the screen.
IOS only has limited background services - in that your app goes into a background state when not active. Really only limited to receiving push notifications. As Phonegap uses a webview and javascript that is only active when the app is active in the foreground.
How can I achieve that using phonegap standard framework?
If you want to keep data connection open you might have to look at development of an application for a computer tablet, rather then an IOS device.
If the above points show that at some extent it's not possible. Is
there still a possibility to extend phonegap with a plugin and make
this happen?
No.
If the above three points are unfortunately fully negative; how would
you address the problem by keeping in mind that the syncrhonization
involves a lot of data and is mandatory to cover the app's usability?
You only option (if you can only use phonegap) is to have the app active all the time, and set a constant sync using Jquery & XML/JSON data. Of course this depends on what type of data you are going to show. For showing a page of data - similar to a webpage you won't have any problems - as long as you understand once you change apps that data won't be synced.

I would like my app's local db to stay synchronized by communicating with the remote web app.
If I were you, I'd be questioning why would I need to do that? Why not just make the app works online? You can have all the assets locally, and just setup some sort of API to retrieve whatever data you need to display on demand.
Otherwise, you'll need to hack your way through to do all the things you wanted, plus you need offline / online syncing. Since you have most data available offline, I assume the app also works offline? And you'll have a really bad time working on offline / online syncing...

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

Do mobile web browsers and mobile web apps share the same localStorage

I am working on a site for mobile devices. The site is available through normal web browsers and also through an app which is just a browser shell and brings up the mobile site. In our efforts to speed up the loading of the site in mobile we have reduced requsts, made use of data uris, etc. Recently we have started using localStorage to save styles and JavaScript data to the device.
Why you may ask?
In our testing, mobile browsers maintain their cache throughout their session and when the browser is closed and re-opened. The app maintains its cache as long as it is being used, but when it is closed and re-opened it re-requests everything, thus slowing down that initial load.
The problem is, we have styles and JavaScript that are specific for if you are in the browser or in the app for a few small things. We've seen a few things break around these subtle differences and my best theory is that localStorage is shared between the browser and the app. And a user that uses both the site and the app may have problems if the localStorage was set by one and needs something else for the other.
I can't find any documentation that confirms this theory or not, and short of creating an app just to test this I figured I'd ask if anyone has any ideas?

If you trust Apple...
Like cookies, storage objects are a shared resource common to web
content served from the same domain. All pages from the same domain
share the same local storage object. Frames and inline frames whose
contents are from the same origin also share the same session storage
object because they descend from the same window.
Because the storage resource is shared, scripts running in multiple
page contexts can potentially modify the data stored in a storage
object that is actively being scrutinized or modified by a script
running on a different page. If your scripts do not notice these
changes, you may not get the results you expect.
If you are populating your app with data from the same place as the web app, I would suspect there are some keys being modified by the other one. I know that using sessionStorage.clear() will wipe out keys if the web app and offline app load data from the same domain.

As Chiguireitor said it depends on what mobile OS the user is using, but in my experience iOS 4 & 5 share the same localStorage whether you're accessing the mobile app through the Safari browser or as a homescreen web app. And of course if you package it with something like Phonegap it acts as its own app therefore its localStorage is not shared.