I have developed an application using Angular 7 with Responsive Web Design(RWD). I have converted this application into an Android APK that runs the app inside a webview. However, I have found Some of features of Native app ( like Opening Camera,Open file browser) in android App not working.
What extra effort would be needed to convert an RWD to webview Android App?
Javascript nor code running inside a webview by their nature, do not have access to a device's hardware. You will need to access the OS's native code to be able to use them.
The easiest approach I would recommend is using a hybrid app platform such as cordova.
Related
I would like to compare native with cross-platform technology.
I am writing Kotlin Android Native application and is it possible to easily open it in browser like Chrome and it will work similarly like web application in Flutter?
My goal is to write native application with possibility to launch it on 'normal' browser on computer.
Let's start with concepts
PWA
Progressive Web Application, as a summary is just a web with special javascript that make it possible the use of device(desktop/mobile) hardware features and/or css files with effects that make the web look like a native application. At the end is just a web application running a on remote server usually with a domain like www.acme.com and accessed through a web browser.
UI Form elements are just html
Native mobile application
It is an application, developed with java or kotlin for android and Objective-C or Swift for ios. Result is an .apk or .ipa containing usually non readable files. This kind of application cannot be opened using a web browser.
UI Form elements are native components, not html
Mobile web browser
In a mobile device we have web browsers like opera, chrome, firefox, safari, etc. As we can notice, this are native applications capable of open any web page through its url. This is the feature provided by mobile devices used in the hybrid applications.
Hybrid Applications
A hybrid app is a software application that combines elements of both native apps and web applications where the core of the application is written using web technologies.
As a extremely summary, this apps are a kind of web browsers opening just one url, without the address bar, which uses new device features to trick the user by displaying a website as if it were a native application
Usually the web application which is loaded in the hybrid applications are pwas or similar.
UI Form elements are just html.
Sources:
https://ionic.io/resources/articles/what-is-hybrid-app-development
https://www2.stardust-testing.com/en/blog-en/hybrid-apps
https://easternpeak.com/definition/hybrid-apps/
Your question
How to run Android Apps in a computer browser like PWA App?
No, you can't. If you app is developed on a native language (android sample)
Button btnTag = new Button(this);
btnTag.setLayoutParams(new Layout...));
btnTag.setText("Button");
btnTag.setId(some_random_id);
There is no way to open it in a web browser of the same device and much less on another desktop browser.
Workaround
If you application is a web with a valid url and you achieve to develop a kind of native app with features of browser (like WebViews for android and wkWebView for ios), but hardcoding the url and hiding the address bar , you will have:
a web able to opened directly any desktop browser
a native app able to be opened on any mobile phone.
Keep in mind that the look & feel of your web should be similar to a native application like Material Design for Angular or React. Also should have advanced features like service worker in pwa. Without them, your user will notice that is a web and not a mobile app.
Don't reinvent the wheel
The previous explained workaround is exactly what the following frameworks do but with steroids. The result app is called sometimes "hybrid applications". Basically you just develop html + javascript and the framework will package your code as a standard web, native .apk for android and native .ipa for ios. Here some frameworks:
Apache Cordova
React Native
Flutter
Ionic
Phone Gap
Unity (games)
Apache Flex
image source: https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/
3 mobile app categories exist in my understanding
Native app - built using java for android and objective-c/swift for ios
Hybrid app - built using HTML, CSS, Javascript but wrapped for each platform using Cordova (Phonegap), Iconic, etc...
HTML5 app - built entirely using HTML, CSS, Javascript and can be opened in mobile web browsers
I have the following questions:
Is a web application converted into an android app using a Webview placed in the category of a native app? Please clarify.
When you build an HTML5 app (category 3 above), you write code in HTML, CSS and Javascript but do you use a Webview or do you just access the HTML pages using a mobile browser?
Can a hybrid app be opened in a web browser in addition to accessing it as a native app?
Can one upload an HTML5 app to the app store? I understand it needs no approval. Can it even be priced?
What kind of apps are predominantly developed in companies?
Should the HTML, CSS code be made responsive before it can be used in Cordova? If no, can Bootstrap be used before using it in Cordova?
Thank you for your help in advance!
Is a web application converted into an android app using a Webview placed in the category of a native app? Please clarify.
This is probably more in the second category - you download the app from the app store and it exists as a real app on your phone, but it just displays a webpage. It's similar to Phonegap or Cordova, but less evolved.
When you build an HTML5 app (category 3 above), you write code in HTML, CSS and Javascript but do you use a Webview or do you just access the HTML pages using a mobile browser?
You just access it normally in a web browser, and it's coded exactly like you would code your desktop website.
Can a hybrid app be opened in a web browser in addition to accessing it as a native app?
No, a hybrid app is really an app - you must launch it on your phone like you would launch any other app.
Can one upload an HTML5 app to the app store? I understand it needs no approval. Can it even be priced?
If by HTML5 app you mean something not made with Cordova or contained in a Webview, then no, it can't be submitted to the app store, since it's only a website. If it is wrapped in Cordova or even in a simple Webview, it can be uploaded normally to the app store and even be priced, as it's an app like any other one.
What kind of apps are predominantly developed in companies?
Most companies want to build native apps since the look and feel is much better. Some companies will settle for the second category because it's cheaper, and some other, like a local business, will just make sure their website looks good on mobile (third category) since an app would be overkill.
Should the HTML, CSS code be made responsive before it can be used in Cordova? If no, can Bootstrap be used before using it in Cordova?
If you want to use the same code in Cordova, you should design your HTML and CSS to be responsive - making a website responsive later takes longer and is harder than just coding mobile-first from the start. bootstrap, like you mentioned, is a good starting point.
I know that a website can be displayed on an android app using a WebView. I have created an android application and I want to know if there is a way to display an android application as a website. Is this possible?
No.you can't. Native Mobile functionality are totally different from websites. So you can't convert native android app to website type of application. Instead you can use hybrid application like sencha,titanium, jquery which is flexible to support in all mobile platforms and also website.
I am making a Hybrid Application using cordova-cli. My requirement is that the first page in my application must redirect to a website. The entire data required for the application will be loaded into this website from some other data-sources.
The requirement is to access device native features such as camera, accelerometer etc. from pages on this website.
I am using
location.href="http://www.example.com";
to open the pages. I need a unified cordova.js file with all the plugins embedded into it.
Currently I am putting the individual plugins into the lib\android\plugin\android and by using the grunt -f command from grunt-cli, the cordova.js file recieved for android does not seem to produce expected results.
Can't be done I am afraid - because of the way Cordova interacts with the device.
What happens if, using a non-mobile device, you accessed the same website from elsewhere? The website will not know what on earth Cordova is.
Cordova interacts with the native code on the device, so requires this to handle the passing of JS-to-native, and vice-versa.
I am gonna develop a mobile application for multiple devices, say iPhone, iPad and Android Devices like Samsung Galaxy, Samsung Tab and Samsung Galaxy Nexus,
The application is about listing set of information from webservice to list in the application, So I decided to go for Mobile Web app using jquery mobile,
I want to publish the app in Appstore and Android Market, So I want to wrap the Mobile web in to a Native app, I thought an idea of implementing it in a UIWebView in iOS and WebView in Android,
Another option I found out is phoneGap,which provide an SDk to wrap an Web app into a Native iOS or Android App.
Can you people suggest me , Is it better to go with WebView in your native application, or is it really required to use phoneGap, Whether apple will approve my Application if I am using Mobile Web app in a UIWebView, Kindly Suggest.
Note: In my application there is no real need of Using any native functionality of iOS like, Camera, Contacts etc, I just wanna have a list with information fetched from the Webservice.
If you don't need any of the native features phonegap/callback gives you, do not use it. It's a bloated project that will probably add a ton of features you don't need, if you only need a wrapped web application.
Just use a regular webview, enable JS, caching etc and load your HTML into it.
Use phonegap. http://phonegap.com/
If u use it you can use the phonegap build service to generate apps for all platforms via it. you will only have to worry about the js, html part of the app, like you said.
Or if you dont want to use the phonegap build, still creating your own apps with phonegap is way easier as you dont have to write ANY native code.
There were some issues in Phonegap before because of which Apple was rejecting Phonegap apps previously. Thats fixed now, so thats no problem. :)