I've been working with PhoneGap for a while now, and since I really had to rush into it, with no real web development experience, I might be doing a couple of things incorrectly in terms of debugging and building.
First of all, I am using the PhoneGap CLI to create my projects.
I build my mobile apps using the PhoneGap Build service, where I upload a zipped version of my www folder.
To debug my apps, I use the phonegap serve command in the CLI, and then I basically just access the URL and use Chrome's Developer Tools to check my JS and HTML. I sometimes use a Chrome extension, called Ripple which usually does the job, but it seems a little buggy (other options?)
Recently, I added the PushBots plugin into one of my applications and I get reference errors in the console while debugging. How can I prevent these types of errors?
Another problem that I usually have is that I get a reference error for cordova.js or cordova_plugins.js. I understood, that the cordova javascript files are dinamically added to the project when building, but it's still annoying in the console. Any way to get around it?
I also added the Onsen UI framework on top of my PhoneGap app, and it gets a little hectic, regarding which instantiating functions to use, to handle the Android back button, for example. (I currently use the index.js from my scripts folder for that, that I've just created manually. PhoneGap didn't create it for me)
My usual folder structure looks like this:
www
> css - contains CSS for the onsen framework
> img - contains some images that are referenced in my code
> js - contains jquery, moment and other libraries that I use in my app
> lib -
> angular - contains angular.js
> onsen - contains the onsen framework
> bootstrap
> res - contains icons and splash screens
> scripts - recently added it myself, with an index.js file
> config.xml
> index.html
> main.html
> appController.js
> loginController.js
> .....
The errors with the plugins start to happen here.
This is my index.js in the scripts folder which i reference in my index.html just after referencing cordova.js that I have copied to the root (www) folder, so I don't get reference errors all the time (I don't get it anymore for cordova.js, now I get it for cordova_plugins.js, so I guess this method is not good)
(function () {
"use strict";
myApp.run(['$rootScope', function($rootScope) {
document.addEventListener('deviceready', function() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
document.addEventListener("backbutton", onBackKeyDown, false);
window.plugins.PushbotsPlugin.initialize("--------", {"android":{"sender_id":"-------"}});
// First time registration
// This will be called on token registration/refresh with Android and with every runtime with iOS
window.plugins.PushbotsPlugin.on("registered", function(token){
console.log("Registration Id:" + token);
});
window.plugins.PushbotsPlugin.getRegistrationId(function(token){
alert("Registration Id:" + token);
console.log("Registration Id:" + token);
});
// Should be called once app receive the notification
window.plugins.PushbotsPlugin.on("notification:received", function(data){
$rootScope.$emit('onNotificationWhileOpen', data);
console.log("received:" + JSON.stringify(data));
});
// Should be called once the notification is clicked
window.plugins.PushbotsPlugin.on("notification:clicked", function(data){
//alert("clicked:" + JSON.stringify(data));
$rootScope.$emit('onNotificationClick', data);
console.log("clicked:" + JSON.stringify(data));
});
window.plugins.PushbotsPlugin.resetBadge();
}, false);
}]);
...All the necessary functions for the callbacks go here...
} ) ();
The plugins are added by the PhoneGap Build framework, so I just have to specify them in the config.xml file. I guess this is why I have problems with it while debugging on the PC, but is there a way to get around this?
Did I make a total mess out of my project by adding the cordova.js reference manually? Is it needed actually, when I have the Onsen framework?
LE :
Just want to make sure that I give as much info as possible. This is how I load my Javascript files into my html files:
<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>
<script src="helpers.js"></script>
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
One thing I would recommend is move the reference to cordova.js further up before your code could potentially make a call to a Cordova API. Like so:
<!--CONTROLLERS-->
<script src="cordova.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>
<script src="helpers.js"></script>
Related
I am having some weird issues getting with javascript running on a friend's machine. I have a form wizard that perform certain checks and operations. I use external jquery and bootstrap libraries with a custom script also. The script works on all browsers I've test so far including old IE , however a friend reports the following errors when accessing the form url.
The strange thing to me is every error is on line 1 and haven't touched any of the libraries.
External Library linking
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/scripts.js"></script>
custom script.js overview
jQuery(document).ready(function() {
...
// javascript code
...
});
Anything I should try or do?
Sentry is showing that certain Facebook users are receiving the error:
FBInstant is not defined
My HTML file includes scripts like so just after the opening <body> tag:
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/app.js"></script>
In app.js, FBInstant.initializeAsync is only called after the entire page has loaded:
window.onload = function() {
FBInstant.initializeAsync().then(function() {
//Load stuff, etc.
});
}
Is fbinstant.6.2.js not being loaded for some reason? This is working for the vast majority of people. It seems to be mostly Chrome users, with a smaller portion of Firefox users as well.
You should always check if it exists before using it, i had the same problem with the JS SDK of Facebook and found out that those people just installed a browser plugin like Ghostery to disable third party plugins.
I am working on a REST API for a web-service. We have chosen to create a formal specification of the API using SwaggerHub. Now I've come to the next step, using the generated Javascript client SDK to talk to the web-service in a web page...
The documentation provided by SwaggerHub is focused on using the generated client SDK in node.js, which seems to behave slightly different from a browser.
I've collected the full SDK in a single bundle using "browserify":
browserify index.js > bundle.js
Then I've added a reference to the bundle to the HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bundle.js"></script>
This seems to work, although I'm unsure exactly how I can test it at this stage.
Then I try to interact with the API declared in the bundle, as soon as the document is ready (this is - except for the encapsulation and the alert() calls - taken from the documentation provided in the generated client SDK):
<script type="text/javascript">
$(document).ready(function() {
alert('Document ready');
var WebApiForStandard = require('web_api_for_standard');
alert('API ready');
var defaultClient = WebApiForStandard.ApiClient.instance;
[...]
I get the "Document ready" message, and I don't get the "API ready" message. When I check the browser console (in Firefox), it shows:
ReferenceError: require is not defined
I assume that this is because require() is something from node.js.
... but I've already asked the browser to load the API bundle, so maybe that isn't a problem. Next try is to omit the require() call:
<script type="text/javascript">
$(document).ready(function() {
alert('Document ready');
var defaultClient = WebApiForStandard.ApiClient.instance;
alert('Client ready');
[...]
But no. Now the browser console reports:
ReferenceError: WebApiForStandard not defined
What do I do then?
i have a web project which works find in web. I want to transfer it into phonegap windows phone project .
Everything works fine but in a search option whenever i click in the search option it shows nothing showing a message "We are having trouble to display this message". N:B: this search option works properly in the web.
here is my search code:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>
var c=getCatalogue();
var bestNew=getBestNew();
$("#recherche").click(function(){
var v=$("#search").val();
window.localStorage.setItem("search",v);
if(v!="") routePage("recherche.html?search="+v);
});
</script>
I think problem is when i pass the value to another page that is "search="+v".
When i use if(v!="") routePage("recherche.html); instead of if(v!="") routePage("recherche.html?search="+v); then it works.
Try downloading and using JavaScript imports locally instead of fetching a remote version if not strictly necessary.
See:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Also phonegap.js should be included:
<script type="text/javascript" src="phonegap.js"></script>
You will need to move the JQuery source to a local file and update your script tag, like you have with materialize.min.js. Loading library JS from the network is not a good idea as it slows your app's startup down and also will cause it to fail when started in a situation where there is no network access.
Additionally Cordova/PhoneGap's Content Security Policy may be blocking remote script loads for security reasons - you don't state which PhoneGap/Cordova version you are using, but this may be a problem for you in Cordova 5. There's a tutorial on dealing with that here. You can configure around this by adjusting the Content Security Policy meta tag to allow script-src from other than "self" but I wouldn't recommend this.
When running in Cordova/PhoneGap you should also wait for the "deviceready" event before trying to do anything, to make sure that the framework is fully initialized and that you have access to call plugins.
Also instead of loading new pages you should architect your app so that it is a single page app and generates page fragments from templates as needed. Try looking at something like Handlebars for this unless you have another preferred solution. I have a complete demo app that uses this approach that you can look at the source for here.
I'm working on Cordova to develop the hybrid mobile application using HTML, CSS and Javascript.
How can we redirect from one page to other pages not like browser application, it must be Cordova application.
It is working good in a browser but if I generate the .apk file and deploy onto the mobile device it is working like web application not like Cordova application.
Here, I'm using coding like window.open(),window.location.href() and window.location.replace().
$(document).ready(function() {
$("#btn4").click(function() {
$lname = $("#lname").val();
$.ajax({
url: 'http://localhost:8080/RESTfulDemoDerby/webresources/com.mss.mmxregistration/session',
data: {lname: $lname},
type: 'GET',
crossDomain: true,
ContentType: 'html/text',
dataType: 'text',
cache: false
}).done(function(response) {
if (response== 'success') {
window.location.href='http://localhost:8383/HTML5Application1/listform.html';
}
else {
window.location.replace("http://localhost:8383/HTML5Application1/login1.html");
}
}).fail(function(request, textStatus, errorThrown) {
// alert(url);
alert(textStatus + " : " + errorThrown.toString());
});
});
});
let me clarify doubt that can we can add a PhoneGap plugin to Cordova application? Because both are different platforms to develop the hybrid application using HTML, CSS and Javascript.
You should take a deeper look into cordova/phonegap and the whole thing about this. The normal way for building an hybrid application with phonegap/cordova would be to set up a single-page-application.
That means, that you use a framework: For example - jquery mobile. With help from this framework you're able to set up a single-page-application.
You can set up persistent toolbars for example. After you did that you can navigate through the pages via a normal Page 2 where #pageID has to be the id from the page you want to navigate to.
Single-Page Application Template would look like this:
<div data-role="page" id="page1" data-title="Page 1">
<div class="content">
Testcontent Page 2 - Go to Page 2
</div>
</div>
<div data-role="page" id="page2" data-title="Page 2">
<div class="content">
Testcontent Page 2 - Back to Page 1
</div>
</div>
data-title="Page 1" is the title which will be automatically changed through JavaScript and jQuery. It'll replace the <h1></h1> Tags content inside your persistent header.
Just Google for Single Page Application Cordova Tutorial or things like that, there a tons of results.
Cordova Documentation 5.0
PLUGINS IN CORDOVA
Cordova wouldn't be as well known as it is, if there were not those great plugins. The list of plugins is nearly endless and from day to day there are new ones.
You can install a plugin via terminal.
cd yourProject
cordova plugin add cordova-plugin-pluginName
where pluginName would be the name of that plugin. For example: console
cordova plugin add cordova-plugin-console
After you added such a plugin to your project, you're going to run the build command (cordova build - integrate the "plugin add process" inside your normal way of building an application.
So now after you added the plugin you want to, you can use the commands the plugin brings with. But attention: You have to wait for the deviceReady event, before you can use your plugins.
Example for the DeviceReady Event
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
You can find detailed information about that event and all the other events inside the cordova events docs.