I've been working on a jQuery mobile web app written in Ruby on Rails, and would like to make it available as a native Android app. I've setup the phonegap project to load my url, and everything seems to be working, but I've been reading that Google will reject the app if it's simply a webview container to an external url. Has anyone had any experience with this?
From what I can tell, I'll need to rewrite the web app to use ajax calls to populate the page, as opposed to relying solely on web requests to my web server. Can anyone offer any insight into this? Would they accept a PhoneGap app that simply loads an external url? Any help is appreciated.
Update1: I've also read that being able to handle no internet connection is one of the main reasons they will approve/reject your app. I think this could be handled in the android app with some logic that checks for an internet connection, and if it exists, load the external url, if it doesn't load a local html splash page. Would this idea be ok?
Update2: Would it be an option to have a "skeleton" of the app as basic html files within the phone gap app, which just uses ajax to pull down all of the main html? That way the app would still function without an internet connection, but you could also make large changes to the content of the pages which would be pulled down in every request. Is that a viable option?
I've never heard of an app being rejected from the Play Store due to just being a WebView container. But even if they wont reject your app for this, you shouldn't be building a PhoneGap application this way. You'll end up with an app that will feel like it's just a WebView container, and an app that breaks easily when connectivity gets spotty. Remember that even in good reception, latency on a phone is high, so reducing the number of requests you have to make (for static files and assets) is paramount.
Ideally, when porting a web site to a PhoneGap application, you should be decoupling your interface as much as possible. Fewer variables should be passed down from the controller to the views, and more data should pass through AJAX calls. When your front end code (all of the files in app/views) can be served statically, moving to a PhoneGap app is easy.
Ensure that the actions in your controllers all have responses for JS (format.js), not just HTML. Your views should be making AJAX calls to rails to get the data that fills in pages via AJAX. Then you can bundle your views (and your assets) into your PhoneGap app.
Related
I'm trying to build an application, "Journal for Drivers".
I would like to add new information to the driver in this application. This information will be in text format (or text with images)
My question is, if I want to add a news update to the application, a news for drivers, can it be solved for example by some storage on a server, where the application automatically downloads this news? Or do I have to write the entire app in Android Studio and update the original version of the app?
There are three main ways to accomplish this:
You can create a webpage and use webview component to load this website in your application. In this case you will have full control on the data (backend) while you can change the ui of this webview on the fly without releasing new versions of your application. called also hybrid application (which is part native you still need to create apk with this webview) and web part which will be where most of your code exists.
You can create a native application which will be written in native only (java or kotlin) in this way you will need to release a new version every time you will change anything in your application. (including logic change or ui change).
You can create PWA project which will simulate a "native" application in this way you control 100% of the code and it will based on web. You can open a url on your mobile browser and you could "install" a mobile version of the webpage on your mobile device which will simulate a "native" application it also other platforms such as iOS, windows and Mac (if I'm not mistaken)
This can achieved via an endless number of strategies. One such strategy uses deep links along with an API for this. For this to work, you will need to set up an online server which will serve as a back end. This is where you will post your news updates to an endpoint or endpoints. This can be implemented in many ways. For example, you may just hardcode your updates to the html, or more likely you will store each article to some sort of db. When a user of the app goes to view an article, it will send an HTTP request to the server asking for the article. The server will then retrieve said article from the db, process it in whatever way needed, and send it back to your app.
Using this method, you only need to change your article on the back end (or better yet add your article to db and update a pointer that points to current article).
I have been playing around with PhoneGap for a little while, and getting it set up to work correctly with Google Drive API is proving to be far more difficult than setting up a website which does the same.
I am wondering if it would be more to my advantage to cease trying to make the full app work with phonegap, and instead use phonegap to access a hosted site.
Note that I do not wish to open the site in the default browser. The goal would be to make it appear to be an application (no borders, url, back button, etc), but have the web server handle everything behind the scenes.
I know PhoneGap has an In-App-Browser available. Is this something that is possible with it? Or does it only function for more limited use?
Thanks
You can definitely use a WebView for your app, which display the webpage but give you the ability to control the layout around it. Running a WebView instead of native code may cost some performance but it's doable.
I'm trying to do some simple website application for displaying my website and add some specific functionality to it.
My idea is to do something like Facebook app for mobile. Simply I need to display a website and replace File input - users should be able to capture a picture from camera or pick it from gallery (multiple select) and attach it to a post.
TL;DR;
Check images in the bottom.
What I have tried:
Using Cordova with Camera and Image picker plugin and displaying webpage in InnAppBrowser
Taking pictures with camera and picking pictures from gallery and then uploading them to server - there is a lot of examples of it.
What troubles I have found:
InnAppBrowser is forced fullscreen so I cannot resize it and place some buttons for picking pictures under it.
What do I need:
I just need to somehow attach images (from gallery or camera) to form file input or upload them to some kind of api instead - the api would process images on server and return some IDs which I can use instead of file input in the form on page to attach images to the post. Some hidden input where I would just insert IDs of uploaded images to be attached to the post (I'd write some if conditions into my PHP script).
I need my application to be multi-platform (Android, IOS, WP) so that is the reason I'm using Apache Cordova. I've tried lot of solutions and I've searched like for 5 hours. But I wasn't able to find anything useful.
Have somebody some experience in this way? Did somebody make some kind of that application?
If you can suggest any solution (it is not important to be a Cordova but it must be multiplatform) I'd be glad!
Thanks for your time!
Images
There is screen of desktop version with normal file input:
There is my vision of mobile application version with camera and image picker option right under web browser:
I guess I was not clear. The technical answer is Cordova/Phonegap are not for creating website applications. This means technically there is no "correct way" to do what you are asking.
For a website applications, all the pages are rendered from the website and controlled from the webpage/webbrowser.
For a mobile application, all the pages that the application can directly control are rendered on the mobile device. However, pages can be rendered (and/or created) from either the server or the mobile application, but the control of the page stays with the side that rendered (or created) the page. There is clear line between the two sides that can be moved, but at the *peril* of the programmer. (There are no points for being clever here, only added security issues.)
However, the Cordova and Phonegap do have plugins.The entire purpose is to use plugins to make certain task easier. However, there is a clear line between the phone and the website. To be clear on this last part, this means that all of the "plugin services" on the phone (accelerometer, contact list, etc.) are directly available to the application, and not the website. However, some of the "services" are also available as HTML5 APIs, such 'camera' and 'geolocation' – mixing the two is dangerous. The HTML5 APIs should remain on the webserver side, if used. The UX is different for HTML5. (I will not discuss HTML5 APIs any further, as they are beyond the scope of this discussion)
To make your idea work, you will need the following "core" (or equivalent third-party) plugins
file-transfer
camera (or equivalent)
inappbrowser
On the file-transfer and camera, you can do everything from the webserver, if you want. Then the only task for the end-user is to select the appropriate folder and image. If you do this from the server-side, then you CANNOT use the plugins.
If you want to use the plugins, then you cannot use a server-side generated webpage. You must create the form on the mobile device. This means the page and the form reside on the mobile device. However, if you write your webpage correctly you can dynamically add or delete elements. This means on the mobile side you have control over every step of the user experience and can enhance that experience.
On the inappbrowser, a common trick is to put the website in an iframe. However, you have no direct control on the iframe. Another common trick is to submit to the server via an API – then have the visible webpage update separately. Another common trick is to have a webpage with a websocket that could handle the webpage update. However, this could also be done with a push to the webpage, or have the webpage do polling of the server. Again, the App has NO direct control of the webpage.
This entire thread makes the following assumptions.
There is no "correct way" to do this task.
The images (photos) are stored on a website, and are publicly available for viewing.
It also assumes that no HTML5 APIs will be used.
If I interpreted your problem statement correctly, I believe what you are looking for is access to device native services - camera & gallery - from your mobile website.
A solution that fits your design requirements is for the browser to provide such services. Unfortunately WebKit and other browsers limit such support to things like Geoposition.
The way for Cordova to help you here is if your mobile website is an stand alone HTML5/CSS/JS application that can use CORS XHR or WebSockets to communicate with webindependent Web Services.
If you can bottle your website into a set of static html/js/css files that display content from dynamic web services then you are set. That same javascript can then call navigator.camera.getPicture(success, fail, options) and file-transfer the result to a waiting web service.
That camera api is not available to the InAppBrowser just as it is not available to WebKit Chrome/Safari/Edge. Trying to control the Mobile App via the InAppBrowser is most likely to fail due to security constraints.
What you might get away with is re-imaging your browser application as a series of discrete services that return raw html snippets suited for a new mobile app. Then write your Cordova app as the top level container that manages the navigation amongst the html snippets. This server-side rendering would be most useful if it was significantly challenging enough to overwhelm the mobile platform / web services pattern (think custom video server or expert system).
#Jakub,
Cedric has essentially stated it plainly. I will restate. You understanding about Cordova/Phonegap is not correct.
From: Top Mistakes by Developers new to Cordova/Phonegap
You have hit issue #5.
I QUOTE:
From Phonegap FAQ
A PhoneGap application may only use HTML, CSS, and JavaScript. However, you can make use of network protocols (XmlHTTPRequest, Web Sockets, etc) to easily communicate with backend services written in any language. This allows your PhoneGap app to remotely access existing business processes while the device is connected to the Internet.
In addition, Apple frowns on using apps as wrappers for websites.
Quote Apple iTunes Guidelines - 2.12
Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
To be clear, your idea may be valid, but you will likely need to rethink your internal workflow. You likely want to keep the same UI and UX.
i am still developing android static app in which all the content are static , all the content which is deign by me nothing is taken by website but now
#
i am starting to develop web app that is, all content coming from website .
i searched lot of thing i got only "WebView" in which whole website will show in my WebView .
So there is a Problem, i want to get a specific content from any website like Event images from website and show in my Activity.
Please help me to start web app development.
is there any api ??
Thanks in advance.
#
In my understanding, what you want to create is an Application that will show content from a website, but not using WebView.
For those webs that do not provide an API (your own website, for example), you may want to have a look at JSOUP and give it a try.
For those webs that have API (for example: twitter), you should read its document and try some HTTP request.
You'll need to write APIs which'll allows you to make requests from your android code to the server code. Using these requests you'll be able to fetch data stored on a web server in a friendly format that can be used to display content on your android app.
I see you have clear some concepts, like Web app, browser, events. But remember the Logic from webApp is with javascript, so the Webview download the HTML to the device and if you have activate javascript in the webview thats work fine, remember you have some restriction with the hardware and process with webapps.
But android developer has a tutorial to create web apps.
When you create a native app doesnt mean is static, you can use Json, XML, Rest API, Web services, etc. to comunicate with a web server.
I recommend see how connect android app with external resources and webserver, here is an example.
I have a number of Drupal 7 websites (http://drupal.org) that have a mobile theme with JQuery mobile (http://jquerymobile.com/) for users browsing with smart phones or tablets. Although this provides a great mobile experience I would like to create an app for the Android and Iphone that uses a few built in features for content creation (mainly just the camera on node creation). I have eclipse and the android emulators all installed and have an installation of Phonegap working for Android testing. Here is where I need some advice on the best approach to my particular problem.
Basically each app can be almost entirely just a webview (easy), but I do need 2 features which should add enough uniqueness to make it able to get approved in the MAC app store.
Ability to add nodes using a REST service (along with phonegap) have access to the use phone’s camera to populate an image field.
A start or front-page has a fast login, and allows instant access to add content (all assets stored locally on phone, so even if the phone is offline, this page will still come up).
Ability to go from the regular mobile site (webview) back to the local node creation page (with access to the camera) or frontage.
Ability to pass something to the webview so I can hide content creation links that access the web version of node creation forms (which would not have the camera for example).
Here is where I’m confused. I don’t want to recreate the entire site and retrieve all the data using services (lots of tutorials and stuff I’ve seen are doing this including DrupalGap - http://drupal.org/project/drupalgap). That seems like a ton of redundant work that will require lots of continuous updates when the site is upgraded and changed with no real gain other than speed (For this it’s ok that it won’t be as fast).
For my mobile apps, when a user wants to view their profile, look at various pages etc, that should all happen in a webview, I only need services and the typical approach to mobile development for the front page, authentication and node creation. The rest should happen in a webview. So what is the best way to switch between adding nodes and authentication using a service and just going to a regular webview? Should I try embedding a webview in a page and having a small menu on the top that doesn’t’ change which links to the add content and login?
How do I setup the session for both the webview content and the service? Or how I can I force authentication through REST and then pass that on to the webview?
You don’t have to answer each one of those directly, I would just like some tips to get me started in the right direction. So far I’m thinking I create a “frontpage” for the app with all it’s assets stored locally on the phone, which has a login which authenticates through a web service (REST). After you login it shows the link to add nodes and a link to view the webview. The big question is how I use the same session for both and how to navigate between the 2 well?
I accomplished the goals stated above, by have the login use a REST service via jquery mobile in a regular html page (like this tutorial http://tylerfrankenstein.com/code/android-app-with-drupal-7-services-phonegap-and-jquery-mobile) this is also where the create content links can be placed. When you want the user to be able to open the "regular" mobile website and already be logged in, use the childbrowser phonegap plugin (https://build.phonegap.com/docs/plugins). Users can close the childbrowser and go back to the main dashboard by clicking the X, or you can create a listener that responds to them vising a specific URL (like the homepage).