Lawnchair storage with 2 collections on Phonegap Android - javascript

I ran into a nasty problem with Lawnchair (0.6.1). I want to have 2 globally accessible collections/Lawnchairs, both with the webkit-sqlite adapter. This is how I declare them, right after loading Lawnchair and the adapter:
var clientStore = Lawnchair({name: 'clients'}, function () {});
var companyStore = Lawnchair({name: 'companies'}, function () {});
// other global variables
...
In Safari and Chrome on my desktop everything is smooth sailing, same for my iPad and other iOS devices in the emulator using Phonegap (3.0.0). No problems at all, both databases show up in the web inspector and in Weinre. I can use them in any of JQuery Mobile events (version 1.3.2 and 1.4.0 beta). Manually checking the database objects in Weinre confirms that they are indeed using the webkit-sqlite adapter.
But if run the Phonegap app on Android, only the clientStore is accessible and usable. Trying to access the companyStore gives me the following error:
companyStore.all(function (allEntries) {
console.log(allEntries);
...
> TypeError: Cannot call method 'all' of undefined
The only database that shows up in Weinre on the Android device is the clients database. Manually initializing the companies database from the Weinre inspector console after everything loaded up doesn't show any effect on the list of databases on the 'Resources' tab or change anything else (except for the above error visually disappearing).
Trying to access the 'undefined' companyStore programmatically, say when someone switches to a page where all the companies shall be listed, 'crashes' the UI on the Android device. Nothing even gets printed on the console anymore after that. As said, all other platforms work just fine.
Am I just doing something stupidly wrong or did I encounter a bug/feature?
Thanks a ton for the help, this one is driving me up the wall :(.
Edit: using the standard DOM adapter works for me on every platform so far. I guess I'll stick to that one for now. In case someone ran into the same problem, here's how to explicitly use the DOM adapter:
var clientStore = Lawnchair({name: 'clients', adapter: 'dom'}, function () {});
var companyStore = Lawnchair({name: 'companies', adapter: 'dom'}, function () {});

Related

Hook a Javascript event to fire on another application OR suggestions

We have a web based jquery mobile app that records activity of a user. This app is long standing and in use at the moment, so re-writing the application is not an option unfortunatly.
The problem is that we are trying to get GPS location at certain points using the application.. But as it is running in an instance of chrome, the javascript will not record correctly when the phone is locked, or the chrome is minimised.
So to get around that we are writing an Ionic App with Cordova in order to get the GPS coordinates in the background, regardless of the state of the browser.
Currently, this is working great. The issue however is there are certain events in our javascript that require a specific 'type' associated to our GPS logging.
My question is: How do I actually hook onto this javascript event in CHROME from the GPS background ionic/cordova application.
What we have tried so far:
Finding the chrome localstorage via Ionic/Cordova and reading a value from that on a timer.
The issue with this is we can't find the location of the localstorage/cache.
From this question it says its here:
/data/data/com.android.chrome/cache
but we can't find/access it from our ionic app or file browser on the android
https://android.stackexchange.com/questions/85998/android-google-chrome-browser-cache-location
We have also looked for ways to hook the javascript events to fire something inside the other application but we are having no luck there either..
Apologies for the long post.. Its hard to explain. If you have any suggestions on alternative methods to do this kind of cross-application event firing from Chrome to Ionic/Cordova I would be greatly interested to hear your oppinion.
To fix this I created a 'stack' where I could push an object to an array that would be picked up by the cordova app using executeScript as follows:
In the inappbrowser site:
var stackName = stackN1
function addEventToStack(numid, type) {
var stackRow = { 'numb': numid, 'type': type};
var stack = localGet(stackName); //localstorage
if (!stack)
stack = StackInit();
stack.push(stackRow);
localStore(stackName, stack);
console.log('Added to stack ', stack);
return 'Row Added';
}
In the cordova application:
ref.executeScript(
{
code: 'localStorage.getItem("stackN1")'
},
function(rdObj) {
//Iterate and use rdObj here
}

IOS Cordova Push Plugin - Coldstart Crashes App

I am using the the Cordova Push Plugin: http://ngcordova.com/docs/plugins/pushNotifications/
This works fine in Android Platform. But, for IOS, I face the following issue:
I register listener for '$cordovaPush:notificationReceived' event as per the documentation and provide the same implementation as given in the documentation in the link above (given below for ease):
$rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
if (notification.alert) {
navigator.notification.alert(notification.alert);
}
if (notification.sound) {
var snd = new Media(event.sound);
snd.play();
}
if (notification.badge) {
$cordovaPush.setBadgeNumber(notification.badge).then(function(result) {
// Success!
}, function(err) {
// An error occurred. Show a message to the user
});
}
});
There are 3 scenarios:
1. App is running in foreground. In such case, even though the notification arrives (confirmed by log statements), no visible action happens on the device.
I expected the below two statements to execute but they dont.
navigator.notification.alert(notification.alert);
snd.play();
App is running in background. In such case, the statements seem to execute as per expected behaviour.
App is NOT running at all (coldstart). In this case, the notification and sound are played but when user click on notification, the app opens and hangs / crashes.
Has anyone encountered these problems before? What is the best way to solve these? This is only for IOS.
The plugin you are using is deprecated.
i also used it before and there are many issues.
i would reccomend to use the plugin: phonegap-plugin-push
easy to install and will solve your issue
As mentioned by #Nechemya Kanelsky, use the newer version of the push plugin and scenario 1 and 2 will be handled. But with that plugin as well, the 3rd issue still remains, as mentioned here
You can use the fix for 3rd issue, mentioned here

HashNavigation in cordova wp8 hangs app

I have next code
function navigate(_hash){
alert('before');
//try#1
window.location.hash = _hash;
//try#2
// window.location.href=window.location.href.split("#")[0]+"#" +url;
alert('after');
}
navigate('someurl')
the issue is that after changing url hash (both variants) app just hangs. And interesting thing that second alert is not firing. so app just... crashes after some time.
Nothing in js console.
Debug log says
The thread 0x*** has exited with code 259 (0x103).
google found nothing on that. Seems like this is acommon error code.
More details:
i'm using ChaplinJs so just can't get away from hash navigation.
second thought was that chaplin overloads system and we caanot get anywhere, but(!) putting logs and alerts in source of lib in window.on('hashchange',....) also didn't make any effort because we do not get there also.
WP 8.0
tried both Cordova 4.* and 5.*
also tried to modify xhrXelper.cs but it is not related tonavigation itself.
PS: I know that jquery mobile suggests to disable hashchanges onmobile navigation. But i can't :(
PPS: also tried todisable chaplin haschanges
new App({routes: routes, controllerSuffix: '-controller', pushState: false,hashChange:true})
but this also didn't make any good results because it's placing hash to href to check it in interval and app hanged again. So i assume that is a webview problem
More additional info:
continious re-run of app makes it work sometimes (1 run of 10 can make it work). That's very strange.
Emulator and device behave in the same way.
Update: Read somewhere that it's critical to restrict navigting before "deviceready" event.
But this is also not a case.
Update2: create cordova proj from scratch. Added hash change indeviceready cb and it hangs
Update3: same code on 8.1 works perfect

Most efficient and reliable method to detect if app is running in phonegap via JavaScript

What is the most efficient and reliable method to detect if an app is running in phonegap, or simply inside of a mobile/desktop browser with JavaScript? I am attempting to eliminate any of the issues that prevent me from testing/debugging my phonegap apps in any browser (desktop or mobile), and create a truly universal code base for my apps.
I intend on structuring my functions with phonegap specific calls like so:
if (phonegapisrunning) {
// phonegap specific javascript calls here
}
else {
// standard javascript calls here
}
While searching for a solution I came across this thread:
PhoneGap: Detect if running on desktop browser.
While this thread discusses this issue, I do not see a clear answer to which method is the most efficient/reliable. Should I bind to the onDeviceReady() event? Should I check window.device? Is there a more efficient or reliable way to check if an app is running in phonegap via JavsScript?
And this thread which mentions the Ripple Chrome Plugin:
Phonegap web app in regular desktop browsers
The Ripple tools looks like it could be a valuable tool for testing. But I am trying to make my phonegap apps run in a desktop browser without a plugin.
If it is determined that the app is not running in phonegap, I would then use useragent sniffing to determine if browser is desktop or mobile, and further separate any code if needed.
I've seen many answers about checking the user agent. Though those are useful for comparing which platform on which a page was loaded, they still do not differentiate whether running within a cordova app's browser or within a regular web browser. After a whole bunch of digging in the android cordova javascript file, I found that the following variable is set when running in a cordova app:
window._cordovaNative
Looking through the ios cordova javascript, I found:
window._nativeReady
Throw these alerts in your page before you ever load any cordova javascripts or check any user agents, etc. and compare results between loading from a web browser and loading from a cordova app that gets dynamic content:
alert("Android: " + window._cordovaNative);
alert("iOS: " + window._nativeReady);
I guess the other devices' phonegap files have different global variables, but for now, this is going to work great for me -- I hope it works well for you!
My suggestion is to create/call your javascript functions outside of the onDeviceReady Phonegap call.
Or maybe check what version of Cordova / Phonegap is running e.g.:
var string = device.cordova; // or device.phonegap
if (string == null) {
//do non phonegappy stuff here
} else {
//do phonegappy stuff
}
While it may not be the cleanest solution, a simple and reliable method is to create/set a global variable on deviceready:
var isCordovaReady = true;
Then:
if (isCordovaReady) {
// do cordova/phonegap stuff
}
else {
// do non cordova/phonegap stuff here
}
I posted the top answer for: PhoneGap: Detect if running on desktop browser
Although this isn't heavily documented and somewhat controversial I've been able to use this chunk of code for all my projects:
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
document.addEventListener("deviceready", onDeviceReady, false); //phone
} else {
onDeviceReady(); //this is the browser
}
You can modify it a bit to work for your projects like so:
var phonegapisrunning = false;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
document.addEventListener("deviceready", onDeviceReady, false); //phone
//change to true
phonegapisrunning = true;
} else {
onDeviceReady(); //this is the browser
}
Hope this helps !

PhoneGap application not .live('tap') events on iOS

I have an application that is using jquery, jquerymobile and spine.js running on phonegap (0.9.5.1) and have been having some issues getting it to work properly on iOS.
The application should be launching the camera when a div is tapped. In my controller I have it so that it does something similar to the following:
myController = Spine.Controller.create({
events: {"tap .take-picture": "takePic"},
takePic: function(){
var self = this;
navigator.camera.getPicture(function(data){
self.doStuffWith(data);
},
null,
{quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA})
},
doStuffWith: function(data){
// Doing stuff with said data
}
});
What is really confusing me, is that this code works properly on Android. Are there some kind of iOS quirks that make it so that tap events aren't sent off properly?
I think that you are trying to use the Android phonegap js within the iPhone app. You need to make sure that you are including the right phonegap.js for the platform you are developing. Although they share the same name, each version of phonegap is tailored to its host OS.
This could be several things:
You are testing this in the iOS Simulator. There is no Camera in the Simulator, you don't have a fail callback specified, but there is a bug (I believe) in the API where it doesn't call the fail callback if the source type is not available anyway. You should see this ("Source Type Not Available") in the Run Log (Cmd-Shift-R).
On a device, I tested your code separately, and ran it in deviceReady(), it runs - so the API call seems to be correct. I added a touch handler to a button to call the code also, so it appears tap events are working. So based on these tests (on a device):
(a) the API call works
(b) tap events work
Which leads me to the conclusion that the bug is outside of those two possibilities.

Categories