Cordova - Access device functionality from remote HTML - javascript

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.

Related

iOS HTML5 FileSystem API alternative

I have an application built that utilizes the HTML5 FilesSystem API, but it only works for Chrome.
Does anyone know of an existing plugin or a technique for replicating this functionality in iOS?
The catch is that I am rendering "mini-sites" for offline use. So I would need to be able to:
Download the files for the micro-site
Store them locally
Access them later. Right now, I'm using an iframe to render the page
My solution (right now) is to do the following.
Because I am caching microsite files that I am pulling from a 3rd party, I set
up a folder on a webserver and built out a PHP-based "caching"
service that routinely compares the content I have stored on the 3rd
part site to the same content stored locally to my server. It updates
the content where necessary.
The app, when it is run from iOS, will asynchronously load each of the microsites in an iframe (create a frame of size 1 x 1px with the appropriate src). The iframe self-destructs after
loading is completed.
Step 2 allows my service worker to cache all of the micro-sites locally, along with the main site.
I have other code in place to keep the local iOS cache "fresh".
This works, but it is nowhere near as ideal as the Chrome File System API, so any alternative suggestions would be great!
Thanks,
Wayne

Show local pdf inside webapplication [w/o remote server]

I'm developing a HTML5/.net POC in which I have a local HTML5 webapp shown inside a .net (C#) WebBrowser control.
The page is developed in asp.net MVC, downloaded as a single .htm file (using Chrome's SingleFile extension) and saved in a DB (or stored in a filesystem, doesn't matter), loaded and shown inside a .net webbrowser control.
[almost] Everything works: the page is rendered correctly, i can invoke js functions from C#, etc.
But now I have to show some pdf inline inside the page. The pdf is not served from a remote server (there's no server at all), but will be loaded from the filesystem (e.g. a temp file). The idea I have is to make a js function like showPdf(path, pageNum) in the html5 app and call it from .net.
The problem is that it looks there's no way (at least I couldn't find it) to load local pdf, both using Mozilla's pdf.js or html tags, I get "Not allowed to load local resource" in Chrome console/"Access denied" alert in IE.
Is there some kind of component I can try/option I can set to allow the browser to load local pdfs?
The WebBrowser component uses IE to render the page, so maybe some kind of IE option/key registry I can change (the machines that will eventually use this webapp are known, we can configure them as we want)?.
You could try a traditional anchor element (<a href="file:...">) and then enable the File Protocol Navigation feature control for your app. (And, though it may seem obvious, it's probably worth confirming that IE feature controls do not to enable functionality in other browsers.)
I don't know that this would work, but it seems like a possible solution given the question.
Note that accessing file objects may permission to access local file system objects may be disabled by other policies or security measures. More info/research may be needed.
Hope this helps...
-- Lance
I forgot to write here how I solved it:
well, it was a webapp shown inside a WinForm WebBrowser control, so I used this article to call a C# method from JS. The C# method used the default OS pdf reader to show the pdf inside the form.

How to detect URL scheme and prevent the default navigation to that URL in phonegap hybrid application

I have the following requirement for my application (Android, iOS):
When the application launches it displays a login.html page (which is part of the application). After logging in, the application's webview should be occupied with home.jsp from an external domain. When user clicks on logout button in home.jsp it has to navigate back to login page . On click of logout when we usewindow.location.href="login.html" then it tries to find the page on xxx domain.
Is there a way to detect this navigation URL and override the URL from javascript or phonegap properties in the application?
When I inspect window.location.href in an android emulator I get file:///android_asset/www/index.html
But I think Nathans idea of moving it to the server is a good one. You could also have one on the device if you really need to. (PErhaps you should ask the person specifiying the app achitecture how they would do it :) )
The answer is going to vary depending on how you've implemented the mentioned WebView where home.jsp is being displayed in. You did not provide any code or any specific information so the answer is going to be the same - somewhat vague...
If you've opened a new WebView, then you can't control it from JavaScript. You'll need to control it via Java or Objective-C code (you did not mention which environment you're developing for...).
For example, if you'll look in the your-app\android\native\src\com\your-app\your-app.java file, you'll see how the native layer loads the application's index.html file after the Worklight JavaScript framework has been loaded.
Similarly, you could re-use this approach in your own application to close and re-load login.html.
If you're in fact doing the mentioned re-direct from the comments, meaning you're re-using the current webview but replacing its content with external content, then I think it is expected that you've lost the context of the application, and when looking for login.html - it doesn't find it... because you've moved from app-context to web-context. They do not know each other.
I think you should not do this re-direct. Instead, you need to open a new WebView using a Cordova plug-in, and in this new WebView to display your external content.
In this Overlayed WebView, you can detect any urls that are clicked on and if the sign-out URL was detected, then close the WebView.
You can see parts of this in action in the Integrating server-generated pages in hybrid applications tutorial and accompanying sample project.
In the sample project, you can see the functions provided (where you can add yours) in android\nativeResources\src\com\IncludeExternalPages\IncludeExternalPages.java.

PhoneGap/cordova issue with RequireJS's text plugin

I'm trying to get a simple web project running via PhoneGap. The site uses RequireJS to load modules asynchronously. It also has Handlebars templates which I'm loading via the RequireJS text plugin.
The site works fine when served from a local HTTP server. However on the device it fails to render. Debugging on PhoneGap is tricky (though can be done to some extent), but as far as I can tell, the issue is related to the loading of these templates using the RequireJS text plugin.
The weinre-based debugger provided by PhoneGap shows an error string in the console:
JSCallback Error: Request failed.
Can anyone recommend a solution?
the text plugin can create problems when, for example, the templates are hosted on a different domain from the one which is running the javascript. in that case, due to security restrictions in cross origin requests, the plugin will assume that you are downloading the compiled version of your templates, and append .js to the file locator.
if you have control of the server, you can check if the wrong path is requested.
Use safari to debug the site on your mobile device / simulator, and it should tell you exactly which request is failing in the network tab.
See http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/

How to write live testing app for HTML and JS and capture page load events

I'm writing an in-browser Chrome app that will allow users to edit HTML and JS code and then be able to test their changes live.
My current method of doing this is to create a new window with JavaScript, create an IFrame in that window, and then inject the user's HTML or JS code into the IFrame. The problem with this though, is that the page load events of the IFrame can't be used by the script being live-tested. My app could manually call testWindow.iframe.contentWindow.onload, but that wouldn't work with the various events and methods used by the different JS libraries for their "domready"-style events.
Perhaps this is not possible, and I'll just have to send the code to the server and have the server output it. I noticed apps like jsfiddle actually just ask what library and event you want.
Any ideas on how I can have live-testing in my app and still fire page loading events for the JS being tested?
You could use dispatchEvent on the iframe, which you know will be supported since you are making a Chrome app. Alternatively, for absolutely certain cross-browser compatibility (or some other reason) you could also send the script to your server (using Ajax) to be stored in a database, then linked to in the new window.
Just heard a lightening talk on http://vowsjs.org/ this evening. Haven't used it yet but I plan to explore this for testing web apps.

Categories

Resources