I have a website in place and I would like to load it into a webview giving the site a native feel.
Now, this is fairly simple to do using window.location='url' but when the site loads the javascript on the site is not able to access plugin apis. So it seems the site is running within a sandbox... unable to access cordova apis.
Is there a way to provide an externally loaded website access to the cordova apis?
I load my external site using <content src="http://myurl"/> in my config.xml
Yes, you can do it. Upload all the cordova.js and plugin files from the project to your server, then in the pages on your server just include it. Be sure to keep them in the same relative folders as they are in the project.
<script type="text/javascript" src="cordova.js"></script>
(Note that I have done this on versions 3 to 5, but not in 6 yet.)
Related
I have a Cordova application that waits for the deviceready event and, when that event fires, sets the window.location.href to a remote site, say, http://foo.bar.com/lander.html. From that page, I have several links to other pages - say page1.html and page2.html. I want to put a button in page1.html that calls Cordova's navigator.notification.vibrate function.
I have the above set up and everything appears to work, except that navigation.notification is undefined when I click the button in page1.html to try to get the device to vibrate. I have copied cordova.js onto foo.bar.com and am referencing it from page1.html. Do I have to include other javascript source files on foo.bar.com? Will this approach ever work?
Would it work if instead of changing the window location I were to get the content by AJAX and put the content in a div container in the index.html page that underlies the Cordova app?
This is all on iOS if that matters. I included the dialogs and vibration plugins only. I am receiving the deviceready event in the Cordova app and successfully redirecting to the remote site. Please let me know if there are other factors which I need to take into consideration. Thanks.
UPDATE 1: I got vibration working from the Cordova app's local index.html by using navigator.vibrate instead of navigator.notification.vibrate. Changing this on the remote site did not help. I also tried including copies of vibration.js, Cordova.js and cordova_plugins.js from the remote page - still no luck.
UPDATE 2: I found in the Cordova docs where what I'm asking about is discussed: Invoking Cordova JavaScript functions from a remotely-loaded HTML page (an HTML page not stored locally on the device) is an unsupported configuration. This is because Cordova was not designed for this, and the Apache Cordova community does no testing of this configuration. While it can work in some circumstances, it is not recommended nor supported. There are challenges with the same origin policy, keeping the JavaScript and native portions of Cordova synchronized at the same version (since they are coupled via private APIs which may change), the trustworthiness of remote content calling native local functions, and potential app store rejection.
The display of remotely-loaded HTML content in a webview should be done using Cordova's InAppBrowser. The InAppBrowser is designed so that JavaScript running there does not have access to the Cordova JavaScript APIs for the reasons listed above. Please refer to the Security Guide.
Based on this, it sounds possible but like we'd be out on our own. Still, if anybody is successfully doing this, we'd like to give it a try.
I thinhk what you are looking for is a push notification. There is a plugin for this.
http://ngcordova.com/docs/plugins/pushNotifications/
You need a task running on your app though.
Hope this is helpfull.
I am developing Web Application using MEAN(Mongo, Express, Angular, Node) JS stack.
I would like to use PhoneGap to compile my clients for Android/iphone native app. At the same time I want to keep same client-side Views & AngularJS code to remain usable for desktop browsers. I am using bootstrapper for Responsive design and it works fine for me on mobile browsers.
I saw, Phonegap require us to include some of it's own Javascript files, and I will be required to have few more .js files in footer of index.html.
If I pressume, I should not be using server side .jade engine for index.html file, and all my .html should remain in client side.
will index.html created for phoneGap will cause problem, if I use it for desktop browser? Should I have different index.html for browser and phoneGap input. Can grunt help me in customizing index.html files.
What are the other things which I should take care of for my needs?
My advice for you is to separate the projects, Phonegap or Cordova Apps doesn't have a running server, they serve the html files through the file:// protocol.
If I pressume, I should not be using server side .jade engine for
index.html file, and all my .html should remain in client side.
You presumed correctly, no .jade templates should be used, your views should be plain html files or, if you want, load them as scripts so you don't have to load them on page request increasing app performance.
will index.html created for phoneGap will cause problem, if I use it
for desktop browser? Should I have different index.html for browser
and phoneGap input. Can grunt help me in customizing index.html files.
Yes it will, if you try to use an index,html from phonegap on a desktop browser you will get a lot of javascript alerts. Since phonegap.js is expecting to get some events that are fired by cordova when running on the device. And this gets worse if you have Cordova plugins.
I am beginner to phonegap. I want to create layout inside index.html which is driven by javascript and also having cordova to use apis in app. I am able to run hard coded index.html but I want to run as a live site inside phonegap and also want to use cordova plugins inside my live site.
Can anybody help me or any idea to how I use live site or dynamic html through javascript?
Thanks in advance,
Vijay Barnwal
You can load a live website by any of these 3 methods:
Embed an HTML iframe <iframe src="http://example.com"></iframe>, for this to work, you will need to enable Cross-Origin Resource Sharing on your device and on your web server. Read Cordova 3.5.0 Whitelist Guide and for server, I want to add CORS support to my server.
Use metatag to redirect the user to the desired URL.
<meta http-equiv="refresh" content="0; url=http://example.com/" />
If you still need to use all the Cordova functions and plugins, the only way to do it is by loading the website using AJAX into a <div> tag. Read: Ajax/jQuery - Load webpage content into a div on page load? Note: You still need to enable CORS for this to work.
I have a Phonegap app, that would open an external URL with super.loadUrl("http://example.com/index.html")
On that page I have included some Javascript code for a Phonegap Plugin. Is it possible to call a plugin from external Javascript file? I don't see why shouldn't work, but it doesn't.
My plugin is FileTransfer plugin. When I run the app with a local index.html all works fine, but I need to run an external script which calls the FileTransfer plugin. Is that possible? Does anybody tried it before ?
I asked in the Phonegap IRC and they say NO. Of course this could be a big security threat.
I also asked if it would be possible to include internal JS scripts in my external HTML file. And the answer is also NO. The best way is to turn the web app into an native app, and have all the scripts locally.
I am currently writing a simple application using PhoneGap (iOS) and running it in the simulator. The problem is that external URLs seem to refuse to load. For example using a CDN for jQuery
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.min.js"></script>
Will not make $/jQuery available. The same problem is happening for weinre when trying to use it. Is there something I need to change to enable this to work?
Have you added the domains of the external links to the ExternalHosts entry in PhoneGap.plist ?
There is a fairly new whitelisting system in PhoneGap that is causing a bit of confusion with external links
From - http://wiki.phonegap.com/ :
"Also, the latest code has the new white-list feature. If you are referencing external hosts, you will have to add the host in PhoneGap.plist under the "ExternalHosts" key. Wildcards are ok. So if you are connecting to "http://phonegap.com", you have to add "phonegap.com" to the list (or use the wildcard "*.phonegap.com" which will match subdomains as well)."