Check internet connection in Android WebView (Cordova) - javascript

I know there is a lot of questions and answers about this in Stackoverflow, I read a lot of them, but none of them work.
I clarified in the title Android WebView because it is the most important target, but I would like this works in other devices too. I tested the following code on a app built with Intel XDK installed on a SM-G355M with Android 4.4.2 and on Safari installed on an iPhone 5C with iOS 9.3.4;
All I get in both cases is the same value, true (sometimes I get false even I have an internet connection).
I tried:
navigator.onLine, it gives always the same value.
document.addEventListener("online", ... doesn't trigger
ajax doesn't work, anyway doesn't affect to the server?
Code: https://nanilab.com/stackoverflow/webview-internet-connection.php(This link is now broken)
Option 1:
function option1(){
var isOffline = 'onLine' in navigator && !navigator.onLine,
text = isOffline == true ? ' without connection ' : ' connected ';
$('.option-one span').text(text);
$('.option-one i').text('checked').hide().fadeIn(200);
setTimeout(function(){
option1();
}, 1000);
}
Option 2:
window.addEventListener("offline", function(){ $('.option-two span').text(' without connection'); }, false);
window.addEventListener("online", function(){ $('.option-two span').text(' connected'); }, false);
Option 3:
function option3(){
$.ajax({
url: '/stackoverflow/blank.php',
success: function(data){
print(' connected ');
},
error: function(jqXHR, textStatus, error) {
print(' without connection ');
}
});
function print(text){
$('.option-three span').text(text);
$('.option-three i').text('checked').hide().fadeIn(200);
setTimeout(function(){
option3();
}, 2000);
}
}
app built with Intel XDK installed on a SM-G355M with Android 4.4.2
https://youtu.be/wHJHG5dP_eM
What I am doing wrong?

Apache Cordova (was called PhoneGap) is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.
document reference cordova
In your problem (Option 1):
navigator.onLine
...is not working because (on android) it is broken {the "raw" version, Cordova enabled webview is different}(as you have found out), you have to built your WebView App with the Cordova Framework. Cordova was developed EXACTLY to solve this problem. The GAP in PhoneGap is the gap between the "virtual machine", "sandbox" and access to the hardware, AND it's cross-platform.
Android Permissions:
app/AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
Cordova Permissions:
app/res/xml/config.xml
<feature name="NetworkStatus">
<param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />
</feature>
Quick Guide Cordova installation
goto web page for installation instructions
https://cordova.apache.org/docs/en/latest/guide/cli/
goto web page and download nodejs for your system
https://nodejs.org/en/download/
example file
node-v4.5.0-x86.msi
run (install it)
success.
on Windows:
C:\>npm install -g cordova
And away you go!
I have built your code into cordova, I'm getting there (hopefully, hard problem), here's some image's of what I have so far [not in WebView exactly yet, {see the navigator.userAgent output in the second image}] (notice the event listener is working ;O), but not good enough:o( ).

In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. To learn more, see the HTML5 Rocks article, http://www.html5rocks.com/en/mobile/workingoffthegrid/

Related

Can't requestQuota for files since Chrome 86

I recently tried to update one of my former webapp project in which I need to download files from a server and store them on the device (to access it later).
In order to achieve this I use the navigator.persistentStorage (or navigator.webkitPersistentStorage) and its requestQuota function as seen in https://developer.mozilla.org/en-US/docs/Web/API/LocalFileSystem#using_persistent_storage
The issue is that, when I test my application locally (accessing the index.html via file:///) the requestQuota triggers the "Do you want to allow" chrome popup but when I select "Yes" I get a failure with following DOMError :
{
message: "The implementation did not support the requested type of object or operation."
name: "NotSupportedError"
}
On the other hand, when I access the application deployed on its distant server everything works like a charm.
Beeing aware of the restrictions of the file API in local (https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction#file), I ran thoses tests with a custom chrome :
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --ssl-version-min=tls1 --allow-file-access-from-files --allow-file-access --disable-web-security --user-data-dir="C:\tmp\chromeDev"
To test it outside of my application environment, I tried the simple line in chrome inspect :
navigator.webkitPersistentStorage.requestQuota(1024*1024,
r => console.log('success'),
e => console.log('failure : ' + e)
);
On a random local index.html openened in chrome (with file:///) --> "failure".
On a random website (with https://) --> "success".
I downgraded my Chrome and found out all of this problem only occurs since Chrome 86.
Ideally I should upgrade my application to use IndexedDb API, but in the short run a fix or workaround would be quite welcome :)
Thx

Why is Service Worker not running on Chrome for Android?

Currently I'm trying to build a web app using the Samsung Tab A. I thought this device would support Service Workers, cause following Can I Use says Chrome for Android 55 is required to run SW.
The tablet is running Android 6.0.1 (no more updates available) and Chrome 55.0.2, but unfortunately when the code shown below runs, the 'no sw' alert pops up.. The SW works fine in Chrome on desktop (mac OS).
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then((registration) => {
alert('sw');
console.log('ServiceWorker successful, scope: ', registration.scope);
}).catch((err) => {
alert('no sw');
console.log('ServiceWorker failed: ', err);
});
}
Am I doing something wrong, or is it not possible to run SW on this kind of tablet? What else is needed if Chrome 55 isn't enough? I think there is some lack of information about this topic since I can't find the answer on this .. :(
Thanks in advance!
EDIT: I'd already enable multiple flags via chrome://flags without any success..
I was using ngrok to serve my webapp locally to my tablet. Did forget to use https..
Go to chrome://flags and add the url like http://localhost:3000/ to the unsafe input
if you don't know just follow the picture bellow.
https://i.ibb.co/Tvwv6VN/Screenshot-20220727-223110.jpg
after this re launch your chrome or any browser.

Cordova android 4.x backbutton event not fired when resources is not local (using http)

Its working in my current 3.7.1 version, but when I upgraded to 4.x, the back button is not working, to reproduce (working with non http source) :
cordova create test
cd test, change the index.js :
onDeviceReady: function() {
app.receivedEvent('deviceready');
document.addEventListener("backbutton", function() {
alert('back');
});
},
cordova platform add android
cordova build android
but if the config.xml was changed for example :
and rebuild again,the back button is not alerting, what I try to resolve :
#index.html add
Try inspect device using chrome and there's no error, and device ready event is fired
Anybody can help ?
Thanks
#polymerAngular,
I've got some demo Apps, that are exclusively for testing Phonegap Events. You can test all in pairs or singularly. The Backbutton works with 3.5.0.
All Events: https://github.com/jessemonroy650/Phonegap-Events-test
Backbutton: https://github.com/jessemonroy650/Phonegap-PhysicalButton-test
2nd response for #polymerAngular
Apparently Phonegap Build does NOT support 4.x from Cordova. I have asked Phonegap Support for verification and clarification on this forum post at nitboi
Need verification and clarification on phone-gap-version
http://community.phonegap.com/nitobi/topics/need-verification-and-clarification-on-phone-gap-version?rfm=1
I will update after they respond.
TIA
Jesse

PhoneGap app's XMLHttpRequest POST data lost

I'm porting an ajaxed, mobile-optimized website to PhoneGap, but have been unsuccessful in getting any POST to the server. From what I've read, xhreq POSTS are supposed to be possible in PhoneGap.
The specifics: I'm targeting the Android platform using the latest Cordova 3.3.1-0.1.2, the latest Android SDK, and a Galaxy S3 updated by Verizon to Android 4.3. Connectivity is over wifi to my local server. In every attempt, the POST arrives at the server as a GET, with no post data (verified using tcpdump to inspect packets). The mobile-optimized web site works fine in the browser on the same phone, also over wifi.
I've isolated the fail case by creating a brand new Phonegap project, nothing more than:
$ cordova create Hello
$ cd Hello
$ cordova platform add android
Then in index.js, at the end of the onDeviceReady handler, adding a snippet I first tested in a simple browser page (domain substituted here):
// TEST POST CAPABILITY
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState==4 && (req.status==200 || req.status==0)) {
console.log("POST Response: " + req.responseText);
}
};
var t = new Date().getTime(); // Just to foil any caching
req.open("POST", "http://mydomain.com/services/rpc?t=" + t, true); // async
req.setRequestHeader('Content-type','application/text; charset=utf-8');
var postContent = JSON.stringify({id:t, method:"misc.log", params:[{log:"POST Test"}]});
req.send(postContent);
And then run on the phone with:
$ cordova run android
It fails like the fuller app, arriving at the server as a GET with no post data. I verified a couple of configuration item defaults to make sure they were as required:
In config.xml:
<access origin="*" />
In AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />
Any ideas as to what might be going wrong, or other things to look in to?
Thanks.
Your content type should be set to
"application/json".
JSON.stringify() creates JSON content.
Next, can you tell us how your server process is determining the request type. Can you post the relevant code?
I would start by adjusting the content type value. See if that makes a difference.
Hope that helps.
The problem was an ip forwarding one, just not the one I'd originally suspected (forwarding to & from port 80 to my local server on port 8080, which I've used for years as a convenience to allow not having to add :8080 into the browser url all the time).
It was this:
In the MX records for "mydomain.com", I had www.mydomain.com pointing to my server's IP address, but the root mydomain.com (the host address I was using in the url to XMLHttpRequest), redirecting to www.mydomain.com.
This worked in a normal browser session, as if you type in mydomain.com, it just goes to www.mydomain.com, then runs from there - and it would use all relative paths in the xhreq's.
In PhoneGap, however, which requires the full path be specified, the POSTs were not making it through the redirect. It was also causing sluggish image loading behavior and some bizarre communication hangups after many loads - I just hadn't realized the problem had the same root cause (rather I was getting worried about WebView performance).
The great news is that POST is working fine now, and the WebView appears to be plenty speedy for my needs.
To summarize the solution: make sure that the subdomain (or lack thereof) in fully qualified urls passed to XMLHttpRequest (as required in PhoneGap) are mapped to an ip address (A record), and not redirected, in the MX records for your domain.

Trigger.io: : Unhandled intent result

I am using Trigger.io to develop an application.
After using file.getImage and selecting an image from either the gallery or camera (on Android) I get this error message (Using trigger.io toolkit to run the app).
W Forge : Unhandled intent result, should have been handled by Forge.
The app promptly crashes and restarts.
relevant code:
forge.file.getImage({}, function(file) {
forge.request.ajax({
type: 'POST',
url: "http://example.com/upload/photo",
files: [file],
success: function(e) {
console.log('success');
console.log(JSON.stringify(e));
},
error: function(e) {
console.log('failure');
console.log(JSON.stringify(e));
}
});
What does this error mean?
I'm seeing this issue on older devices too. Apparently it's a common issue on both Phonegap and Native android apps also. More can be seen on this thread:
PhoneGap camera restarts the application
The following plugin was developed for Phonegap which resolves the issue. I would be great if something like this could be developed for Trigger.io
http://code.google.com/p/foreground-camera-plugin/
This problem is caused by the camera taking up memory on older Android devices causing it to unceremoniously shut down some apps to free up more memory.
We're working on providing more elegant handling of this situation or at least better debug output to tell you what's going on. The problem in this case was occurring on an Android 2.3 device, and could be worked around by shutting down some open apps / processes.
Update: we released a new foreground camera module to address this issue in our v1.4.41. platform version:
http://current-docs.trigger.io/modules/camera.html#modules-camera

Categories

Resources