phonegap hypride online and offline app - javascript

I'm developing a Sencha-touch app which I'm packaging with Phonegap. To make developing easier, I only use Phonegap as shell to load my online website. This all works fine and I don't need to build and distribute the app every time something changes. I only need to update my online website.
Except now I want to use some PhoneGap events (resume, deviceready etc). In order to get these events working I need to include the gordova.js file in the index.html.
My problem is that the index.html is on my server and not in the Phonegap www folder. So when I try to include gordova.js in the index.html like:
<script type="text/javascript" src="cordova.js"></script>
The application search the cordova.js on my webserver and can't find the file. I know I could place the cordova.js file on my server, but the cordova.js file difference for each platform and then I don't know which (platform) cordova file I need to load.
Is there a way to include offline files (in the Phonegap www folder) in my online loaded index.html file? Or do you've other suggestions?
Thanks Stefan

Place index.html file in the assets\www directory and let it be the starting point of your application.
In the index.html file which will be located in the assets\www directory you need to add the following code in the head tag. The window.location will redirect to your website URL.
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the Codova API
window.location="http://your.website/index.html"; }
</script>
You need to enable CORS. To enable CORS on the client follow the below steps.
Tell Cordova that it is safe to load your website in the config.xml properties (you can remove the subdomains part if you don't have any)
<access origin="http://your.website" subdomains="true"/>

Related

Cordova based apk installion & developed file location

I am now learning cordova and i wanna know something.
Example, I have index.html & index.js in my cordova project.
I will build app and install it in my phone.
So the question is those two files index.html & index.js will be in app package folder inside phone local storage?
Thanks
Yes, the files show up in a hidden area on Android and iOS. Anyone with a rooted phone can see them. Don't store security keys in your code.
All Cordova really is is on Android and iOS is a reference to the embedded browser available on both systems and hook to load whatever page you specify in the config.xml. You can even set the config.xml starting file to be your webpack dev server. Therefore your html and JS files have to exist somewhere for the web browser to open them.

Cordova plugins not working when using Framework7

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.

How to install a mobile template in apache cordova 6.1.0

So I am running Apache Cordova on Ubuntu trying to create a multi-platform hybrid application. So far I am done with the steps of:
Installing Codova
Assigning the Andoird Home, configuring the sdk and the avd
Being able to export the project on the browser and as an apk file
Testing the apk file and making sure it's working fine on a real device
After unzipping the mobile template written in (HTML/CSS/JS) into the application's directory and removing the default index.html to make sure the full files of the templates are functional, everything seem to be working fine.
The question is, is this normally how it should work? or is there something that I have to do within the cordova's app directory's default files (like the default index.html) in order to not miss with the installed cordova plugins like (camera, geolocation .... etc) ?
In other words, do I treat the cordova's app's www directory just like I treat a regular website files on a server, or are there other steps?

How to host an Ionic app in web?

I created a very simple simulator of my app in my landing page website. The way i do it locally is in the index.html of my landing page i run (ionic serve) the app through an iframe like this:
<iframe src="http://localhost:8100/#/tab/home"></iframe>
My problem is how do I reference the source when i upload it in my web hosting.
my file structure looks like this
x myLandingPage
>index.html //landing page
x mysimulator
x www
x templates
>index.html //ionic app
edit: Ionic 1.2 officially supports deployment as a website!
Let's assume your site is hosted at example.com domain and that you have a folder called myLandingPage at the root of your server and that you can access it online via http://example.com/myLandingPage/index.html. In that case you would use the following iframe tag in your index.html file:
<iframe src="mysimulator/www/templates/index.html"></iframe>
So, once you upload your app to your hosting, you won't have to run ionic serve, because when you do that locally you actually start a local web server which then serves this content. Once you upload your files to your server that step is then of course not needed.
Hope this helps. Btw, I see one thing that looks a bit off from the standard Ionic setting and that is the placement of your index.html file inside the templates folder. Usually it is in the www folder. So, in case you misplaced the file in the file structure it could be that the src will be
<iframe src="mysimulator/www/index.html"></iframe>
but I hope you get the point and will be able to find your way.

Where do I find cordova.js?

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

Categories

Resources