How I can add plugins in my Cordova app? I can't find any examples. I'm trying to install and add plugins in nodejs prompt: npm i PLUGIN_NAME and cordova plugin add PLUGIN_NAME. After that, I'm trying to write a code for this plugin in my index.html file in tag <script></script> and I have many errors in console like that: Uncaught ReferenceError: cordova is not defined(…) or another. I did read many documentation about that and I know that I need to add any records about plugins to config.xml file. But how I can do it? Can you help me with this trouble?
To add plugin, use the following command:
cordova plugin add PLUGIN_NAME
Once the plugin is added, to invoke the plugin code, register deviceready event in your code and invoke the plugin code inside the device ready event listener. Also ensure to include cordova.js file in your HTML which will give 404 error on development but will included once you build your android or browser platform and it will be available during the execution.
Check out this SO Post for more info on this. You can also check out this sample cordova app which uses local notification plugin as a reference for plugin invocation
You need to add reference to cordova.js in your index.html file like following,
<script type="text/javascript" src="cordova.js"></script>
This can appear in head section or at bottom in body section. But refer it before any other js references.
Related
I am working on a Cordova application.
When I run the application for first time after installation, it works fine. But for subsequent runs it throws above error.
Added the cordova file transfer plugin
cordova plugin add cordova-plugin-file-transfer
Included the cordova script in my index.html
<script type="text/javascript" src="cordova.js"></script>
Using the app directory as below
alert(cordova.file.applicationDirectory);
Above line alerts or prints the path correctly when I run my application for the first time, soon after installation. But in the next runs I get the error "Cannot read property 'applicationDirectory' of undefined".
ANSWER IN BELOW COMMENTS
My issue fixed when I used the "file:///android_asset/www/Images/" instead of cordova.file.applicationDirectory+"/Images"
I want to change just a single line in an installed cordova plugin.
However, as the plugin is installed via package.json, any edit I do
on the source file does not get saved as the plugin is freshly
installed every time I make a new build of my app.
Is there some way to:
Copy-paste the whole plugin somewhere outside the plugins folder so I can edit without it getting overwritten.
Remove the plugin name from package.json and
Be able to reference the plugin inside my app so I can use the methods provided by the plugin.
Thank You.
You can clone the plugin and make the changes you want locally. Then you can add the plugin using corodova plugin add /path/to/plugin/folder.
I've been trying everything for the past two days to solve this issue. I'm well and truly stumped. Perhaps someone with greater knowledge than I can shed some light on the issue:
Basically, I'm building an app in AngularJS with the purpose of building Android and iOS apps from it using Cordova. I should specify that I am using cordova-cli on Linux and ngCordova (wrapper around plugins). I am NOT using Ionic Framework.
My app works fine in Chrome. I followed the ngCordova installation guide perfectly: http://ngcordova.com/docs/install/
I used bower to install. Then included the following in the index.html of my Web App project (not the Cordova project):
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
It didn't work. I thought maybe it's because the ng-cordova.js went into my bower components directory. So I changed that script tag to:
bower_components/ngCordova/dist/ng-cordova.js
When I go to my cordova project directory and set up the platforms, plugins etc... and run:
cordova build android
followed by
cordova run android
The app runs on my device (Nexus 5). I use chrome://inspect to see what happens when I click the button which should be using the email composer plugin: I get a cordova not defined error.
I went into the controller and put this in
console.log($cordovaEmailComposer);
I can examine this in chrome://insepct and it has all the correct functions etc.. so ng-cordova.js is running fine (thats where the factory for the plugin is).
I'm 99% sure the issue is that somewhere along the line cordova.js is being lost. When I go into the cordova project in the ProjectName/www/index.html the tag for cordova.js is commented out.
Same in the platforms/android/assets/www/index.html file.
I traced it back and the same is true in WebAppProject/dist/index.html file. It's commented out. So it seems that when I run grunt build cordova.js is being removed. I thought maybe it's because cordova.js wasn't in the WebAppProject so I brought it into the root directory (same locations as index.html) and it still happened.
Can anyone explain how to properly get this working? I'm totally at a loss. I've tried a million different ways of including cordova.js. I even manually uncommented it out in the cordovaproject/www/index.html. The app builds but crashs upon opening (white screen then dies) suggesting a missing script (despite cordova.js being n that directory too...).
Is this the grunt build process? Or am I totally setting up an ngCordova project incorrectly without realising... I would post some code but I'm 99% sure the issue is with cordova.js or the way the project is building upon either grunt build or cordova build.
Any help would be much appreciated. :)
Cheers,
D
Make sure to include ngCordova before cordova.js and after angular.js.
<script src="/path/to/angular.js"></script>
<script src="/path/to/ng-cordova.js"></script>
<script src="/path/to/cordova.js"></script>
I am making a Cordova app using Framework7 for iOS/Android. I'm trying to add the social sharing plugin and the barcode scanner plugin but the plugin functions can not be called. However when I made a Cordova app with plain HTML and JS (without Framework7) the plugins would work. Is there anything I have to modify on the Framework7 side to enable these Cordova plugins to work?
cordova.js file need not be there in your project root directory. Everytime you do a particular platform build, it gets automatically created in the platform build's project root directory.
For instance, if you build android platform using 'cordova build android' command, the cordova.js file will be generated under 'platforms\android\assets\www' folder. This js file is very much required to use any of the cordova plugins as it is the one which is responsible for triggering 'onDeviceReady' event once the cordova is ready and all plugins are loaded. You can also have a look at the generated file once to get more info on the same. Hope it helps.
I'm writing a mobile app with HTML5, Javascript and CSS3.
I'm using phonegap.
So if I use something like this.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
alert("test");
}
I get this error:
cordova : You must have cordova.js included in your projects, to be able to trigger events.
I'm using Ripple to emulate a smartphone. And its right. I don't have cordova.js in my project folder, because I don't know where i get it.
I have downloaded the newest version 2.9.0 of phonegap and using specially cordova-mobile-spec.
There is no cordova.js just a cordova-incl.js. How do I obtain this file?
I wasted a lot of time looking for a solution on the question "Where get the cordova.js?".
I am developing a mobile app using html+css+jQuery mobile and i am building it using the phonegap web build service. The version of phonegap i am working on is 3.1.0.
I was trying to find how to use the Phonegap API on my mobile application and how to call the cordova methods (ex notification.alert). The solution to this is to just add the
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
inside the head of your index.html document. The Phonegap builder will find and include the correct cordova.js file for each build (Android, Win phone, iOS).
Finally, the ondeviceready event is essential to any application. See the Full Example.
Check the cordova.js inside the new project created (by using command line)
OR
CHECK YOUR LIB FOLDE INSIDE THE DOWNLOADED CORDOVA ZIP FILE
FOR IOS CHECK cordovalib folder
ANDROID
Please check libs folder of each platform.
I also wasted a lot of time trying to figure out what was going on here, because not even George's solution was working for me.
Finally I realized that, as my index.html page is not in the root of the www folder, but inside a subdirectory of it, I should be then setting a relative path for the cordova file (i.e. src="../cordova.js").
Hope it helps anyone else having the same [dumb] issue.
If you are trying to run on your browser for testing, it is suggested to build for browser and run from there, because every time you build the right cordova.js file is included according to the platform.
To build for browser:
cordova build browser
To run:
cordova run browser
More options
cordova run browser -- --port=8001 --target=Firefox
To run with plugins here is a quick intro guide https://www.raymondcamden.com/2016/03/22/the-cordova-browser-platform