I have a requirement where I need to migrate a website into an Apache Cordova app with minimal effort. I also need to add an extra feature that is not doable without native permissions.
The existing website contains enormous JSP content. As given here, I cannot use JSP files with Cordova. So, I'm thinking of loading (redirecting to) that website into the app. For the extra feature, I would need a two way communication between the website & the app.
I have done that previously between a native app and locally embedded HTML pages. But since the website is not locally hosted, Is the communication still possible ?
Related
We have an application that uses VueJs and D3. The requirement for our users is that they wont have internet connection, so they can only accept a html file or a bunch of files(zipped folder).
My first question is if we go ahead with Vue, can we use html-webpack-plugin to bundle everything into a single html file?
My second question is: When I google bundling into a single html, Progressive Web Apps show up in search results. Are PWA's web applications that you can just open an html and it works or Or is PWA more about how to handle a webapp when it does not have access to network?
Thanks!
I'm currently working on an application that uses the Phonegap/Cordova framework to display an online and an offline version of a website. If you're not familiar w/ this framework, it offers a simple way of creating multi-platform applications by displaying local files in a full-screen webview.
When launching the application, the Javascript integrated in the local files of the application detects if Internet access if available, and redirects the user to either another local webpage containing a full-screen iFrame of the live website, or a reduced offline version of the website (contained in the local files of the app) if no Internet connection is detected.
I would like to detect when the user logs in using the various forms on the website (being displayed inside the iFrame), but I have no way of knowing which page the user is on, or interact w/ the website content at all because of the same-origin policy.
Would it be possible though to make the Javascript from the local page (which contains the iFrame) interact w/ the Javascript from the remote page (which is being displayed in the iFrame)? This way, I would be able to obtain the login information, and save it for later use (obviously not w/o using a token system), but also it would help for another planned feature (trigger the guidance system).
Thank you.
Look into HTML5 communication, it's pretty simple and sounds like it fits your needs
http://stevehanov.ca/blog/index.php?id=109
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I want to create a web app platform that runs locally on the users computer.
I am considering using google chrome's app process to make this work.
I am having trouble understanding, wether google will let me do this. so the user would have to download the main chrome app , which contains the base html and javascript code, and within the app be able to download and store locally with in the app new html and js code.
So in other words I want to create an app that allows users to download and install apps from my own app store, and have them run within the chrome app.
Does google chrome app development allow this?
if not what are my alternatives for creating an app that needs to run on a browser storing all files locally?
You can download HTML and CSS as much as you want and then use JavaScript to modify the DOM accordingly. It's not set up as any kind of system that lets you substitute pages, and there's no navigation within the app (using A elements), but you are free to modify the DOM.
There's no way to add any JavaScript to what's initially in the app, as eval and the other code-executing functions are disabled. You can certainly add SCRIPT elements to the DOM, but the files they reference have to have been part of the app at the time it was installed.
Having said all that, you can implement the app as an interpreter for some language and then download programs written in that language. It's just that none of the code can be direct Chrome App code, nor can any code you download (regardless of language) make direct Chrome API calls.
Have you looked at the HTML5 Filesystem API? You can fetch a file and reference it later. You also need the add the "unlimitedStorage" permission to manifest.json.
http://www.html5rocks.com/en/tutorials/file/filesystem/
I've just created the required HTML5 Mobile web pages(including the CSS3 and javascript pages). I've got the apk file from build.phonegap.com as well.
But I want it to be dynamic i.e I should be able to add content from my laptop.
I've searched a lot but I'm unable to get the right info on doing this.
I just want to be adding simple text paragraphs from my local server(laptop) to the app on the go. What do I do ?
Sound like you need to set up some type of json / sql web service.
Use your machine's ip to do this.
Suppose your laptop ip is 192.168.1.1
Then from your application just use
http://192.168.1.1/your_appliction/webpage
replace http://localhost/ to http://10.0.2.2/
EDIT:
Treat your laptop as remote server and access the files in it as you normally do in website building.
From another post I think might help...
1- if you are building the whole site from scratch: You can create your site by any CMS like dotNetNuke or joomla which will allow you to login and edit what you want
2- if you are building just this page from scratch : You can build your page with online-editing in mind, in this case I recommend to build two pages one for for viewing content and the other for online-editing you can use any HTML-Editor control like FCKEditor
3- if you are dealing with already built page : it will be easier to build administration page which you can upload the new version of the content page to it, and the administration page take care of replacing the content page
Or maybe even the knockout js plugin could be something to look into http://jsfiddle.net/rniemeyer/LkqTU/
I´m developing a PhoneGap application (HTML5 + CSS3 + Javascript/JQuery Mobile). I´ve started using a single HTML file with multiple pages. I´m using page transitions (Slide) on changing among pages.
The problem occurs when I break the single HTML page in multiple HTML files (one for each page). I cannot load the pages. The framework display "Error Loading Page".
I know that JQuery Mobile framework uses AJAX to load the page contents when using multiple html files. If I deploy the app in a web server (say IIS) everything goes fine. But running in local files - like PhoneGap apps demands -, the framework cannot perform an AJAX request, and consequently the page cannot be loaded "Error Loading Page".
I need to use JQuery Mobile
I need to use page transitions (slide) to improve user experience
I want to use multiple HTML files to not have to deal with a unique huge html file
The app will not be deployed to a web server because it is a PhoneGap App and must run locally in file system.
I´m deploying the app in an android and using the Adobe Build to generate the APK installation file.
Could someone give some advice?
Thanks!
I have solved my problem.
I was thinking that the PhoneGap would behaves like loading a page directly from file system and not allowing AJAX requests. In my tests on desktop I cannot load external links "Error Loading Page". But after publishing the app on the device all the the external links behaves accordingly. In some way the PhoneGap infrastructure can handle AJAX requests locally.
So, to test in my desktop I just put the app in IIS and the external links will work. When the app is published on the device the behavior will be the same.
PhoneGap doesn't run a webserver. All files are loaded via file:// protocol. Thus, any request is considered cross origin.
To solve this, you need to allow requests to all hosts.
<access uri="*" subdomains="true" />
See http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html