How do you detect 3G vs. Wifi connection on mobile safari? - javascript

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?

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 1: 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.
Update 2: In June 2020, Apple declined to implement the Network Information API in Safari due to privacy concerns

Although you cannot use data from a browser to detect if the user is on Wifi or a cellular connection - capturing the user's IP may be one way to differentiate between a Wifi and Cellular connection.
In this article about how cellular impacts your IP address (http://classroom.synonym.com/wifi-change-ip-17586.html) it states the following:
While on Wi-Fi, your device's public IP will match all other computers on your network, and your router assigns a local IP. While using a cellular connection, your cell carrier assigns a public IP. Connecting to the cellular Internet does not use a router, so your device won't have a local IP.
IF ip = localIp, then connection = wifiConnection
IF ip = publicIp, then connection = cellularConnection
Here's a screenshot of my IP when I'm on cellular:
Here's a screenshot of my IP (right after turning off cellular) on Wifi:
This could be one answer to the problem without browser help.

At the moment this limitation has improved, but there are still restrictions with the Network Information API supported in the different browsers ( mobile or not ), https://caniuse.com/#search=network
If this helps you, In our case as our specific mobile application is hybrid and developed using Ionic, we have been able to do it on either iOs or Android using this cordova plugin: https://github.com/apache/cordova-plugin-network-information that works like a charm.

Related

How to work around lack WebRTC support in a browser?

Some browsers (mobile Mi Browser, for instance) don't support WebRTC - they have no RTCPeerConnection API. So the users of your WebRTC web app have to open it in another one.
Is there a way to make your WebRTC app work without an explicit browser-change action from the user, especially on a mobile device?
I tried to investigate the following:
Deep Link. Looks like we can't redirect the user to another browser using deep link (I haven't found Chrome deep link for mobile).
Send WebRTC sources to browser / use third-party WebRTC lib. This won't work either, you need WebRTC support in the browser source code.
WebRTC is a framework based on a set of standards. It includes not only capability to get information about user input/output devices, but also set of network protocols which based on UDP (from getting client's IP to transfer arbitrary data through data channel using SCTP protocol). So, as you already may guess, it's impossible to support in a browser which doesn't have it, this is why point (2) will not work.
In case of point (1 - Open Chrome). On iOS exists custom protocol to open URL in chrome "googlechromes://stackoverflow.com", but it's better to explicitly say user that current browser doesn't support required functionality; And provide links on list of popular browsers for download (Chrome, Firefox, etc.); And already on these websites user will be redirected to the proper store for downloading native app.

Web Bluetooth cannot detect my Mobile phone (Galaxy Note 9)

I am testing web blue tooth through
https://whatwebcando.today/bluetooth.html
one of the use cases there is from the browser, it should be able to detect BLE devices and extract the battery service, which should provide a facility to determine battery level of bluetooth connected device,
However during scanning, the site cannot detect my mobile phone, I have read that Web bluetooth only supports BLE
is this compatibility issues? Upon reading i see that Blue tooth 5 of galaxy note9 is supports BLE or am i wrong?
As far as I know, Galaxy Note 9 supports BLE. As per to the documentation, even though the Web Bluetooth API specification is not finalized yet, the Google Chrome team still in progress for the implementation. It is suggested to use the navigator.bluetooth.requestDevice function that takes a mandatory Object that defines filters. These filters are used to return only devices that match some advertised Bluetooth GATT services and/or the device name. From this, you can check if your device is compatible with Web Bluetooth API specification.
Your phone does not advertise BLE packets automatically. You should have an app that starts BLE advertising.
Your Phone needs to simulate a BLE device and send advertisements of the specific service. In this case the batter_service.
You can use the BLE Peripheral Simulater for testing

Detect if browser supports local mDNS querying

It appears that some browsers support querying for local mDNS addresses (of the type http://hostname.local/), while others don't.
It looks like iOS supports this in it's networking stack itself, so all browsers on iOS support .local addresses. On Android, it appears that all DNS queries are sent to Google's overlord servers, so .local addresses are just not possible to resolve. However, Firefox on Android for example implements it's own DNS querying for .local type addresses, so there are at least some Android browsers that support .local addresses. As far as I can tell, on the desktop, mDNS support depends on the OS. Mac supports mDNS out of the box, while Windows and Linux support it if Bonjour/Avahi is installed.
My web app runs as a single-page-app served from a static server on a local intranet, and I need to communicate directly with other servers in the network using CORS (no proxy). To be able to locate and address the servers, considering that DHCP might not assign them a static IP, I need to know if mDNS querying is supported in the user's browser, and fail gracefully if it isn't.
How can I feature-detect, in client-side Javascript, if mDNS is supported in the user's browser? I don't mind if the solution is a little hacky, if it solves the problem.

Mobile Phonegap applications on a local network

I've created a game using html5 and websockets that is played with both a pc and a mobile device (multiple mobile devices can also be played):
The game has a Stage - The PC or a tablet device.
And several players — Other mobile devices
The current connection between the Stage and Players is with a number (the Stage shows a number and a player can join through that number), however, I'm searching for a way that the Players can join just by being in the same local network as the Stage - meaning auto-discovery through a local network.
I've been searching WebRTC and other p2p solutions but I can't find anything. Is there something else I can use or is it completely impossible?
You can try this cordova-plugin-networkinterface plugin that supports Android, Blackberry 10, iOS and Windows devices.
There's no javascript only way to the local ip address from inside a browser. There do seem to be a good number of cordova/phonegap plugins that purport to do this:
http://plugreg.com/plugin/weconstudio-it/phonegap-plugin-ipaddress
https://github.com/jcesarmobile/my-phonegap-plugins/tree/master/iOS/NetworkInterfacesPlugin
As well as the one pointed out in the comment above. It looks like it's either android or IOS. Someone should write one that works on both!
If it was me. I would probably work with the browser headers on the Stage: REMOTE_ADDR, HTTP_CLIENT_IP, etc. There are some fine points to doing this: http://roshanbh.com.np/2007/12/getting-real-ip-address-in-php.html
On a local network, you'll be able to get the real IP address of each device. Private networks fall into a particular address space:
10.0.0.0 - 10.255.255.255
172.16.0.0 - 172.31.255.255
192.168.0.0 - 192.168.255.255
So your Stage will know when its clients are connecting to it on a LAN. Does that get you where you need to go?

How can I access to USB stick from website?

I'm planning to make a login system by USB, so if you put in a USB-drive and open a specific webpage, the website asks the USB-drive for the code (e.g. by a JavaScript file, a redirect or something like that).
The problem is, because of sandboxing, you can't load or redirect to local files. I don't know a solution for this problem. Can you guys help me? I don't need specific code, just an example or something in that way.
Maybe you can read up on USB-HID. Wikipedia:
The USB human interface device class (USB HID class) is a part of the USB specification for computer peripherals: it specifies a device class (a type of computer hardware) for human interface devices such as keyboards, mice, game controllers and alphanumeric display devices.
Here are some references:
USB HID (Human Interface Device)
node-hid - Access USB HID devices from node.js
DepthJS: 'Allows any web page to interact with the Microsoft Kinect using Javascript'.
A related Stackoverflow question:
Write data to USB HID using Javascript, HTML5, or any cross platform language (supports Android)
One other possibility is to check out the Chrome HID (Human Interface Device) APIs:
Interacting with USB HID devices from web apps – via Chrome Apps, see below
Relevant Chrome API docs
Please note that for the time being, you cannot interact directly with the USB device (i.e. you cannot access any WebAPI offering that kind of fine-grained control).
Building a Chrome App (different from a Chrome Extension) may help; This article may point you in the right direction, since it also provides sample code.
The only way I can think of is putting a html file on the usb stick that essentially generates some sort of login token and gives you a link or a form to a login processor. You can then access the webpage by opening the local file first which will redirect you to the actual webpage.
This local script may include a javascript from the server to get some challenge-response-data which it hashes somehow (perhaps in combination with a password) and puts it into the form data.
Web PKI authentication from Modern Browsers may be achieved by using Browser Extension. One such extension is Signer.Digital browser extension. Use below Javascript promises from the APIs provided by Signer.Digital extension.
SignerDigital.getSelectedCertificate() to register user's certificate
SignerDigital.signHash(hash) to sign token at browser and verify at server
For all Javascript APIs refer to SO Answer https://stackoverflow.com/a/63173083/9659885
Disclaimer : I work for a company supporting the application below
Hello, you may try to use Nexu open-source application for communication with smartcards or USB tokens. It also support PKCS 12 keystores.
For example, the application is connected to the DSS webpage on the website of European Commission : see the link.

Categories