How do you detect 3G vs. Wifi connection on mobile safari?
I am specifically asking about javascript on a mobile webpage, not an objective-c application. Is there something like Apple Reachability for javascript so I can tell when Edge, 3G or Wifi connection is made or changed?
Answer
Not unless browsers start giving this information away through the DOM which, currently, they don't. There is a navigator javascript objects which holds many things but not what you're looking for. I've also read in the news recently that some cellular carrier was adding cookies to HTTP requests made on their phones. They were found to be adding customer IDs to cookies (huge security breach!!).
Mobile Safari does add some new DOM additions but not what you're asking for.
Short of these options, you can't. Layers of the Internet Protocol are meant to encapsulate & hide the details of the bottom layers. You can't detect Edge, 3G or Wifi any more than you can detect cable, DSL or finer optics.
Finally, even if you could get this information, it wouldn't do you any good unless you had details of every single node in your TCP connection. For example, I could have the following setup :
iPad ---WiFi----> iPhone's Hotspot ---3G---> Carrier ---unknown--->>>
Addendum
In 2012-2013, the W3C was fleshing out The Network Information API which was aimed at providing "an interface for web applications to access the underlying connection information of the device". At the time, the API stipulated that an "estimated" bandwidth for the browser would be obtainable via navigator.connection.bandwidth. As of April 2014, that work has since been discontinued!!
Update: As of 20th October 2015, work continues on this API. You can find the latest Editor's drafts for the Network Information API on the W3C's github pages.