We have a responsive web application for desktop users and it is working fine. My organization also has native android app. Now, the requirement is to integrate responsive web app with native android app (using webview). Same time, we are looking to access some native features of device like capture photo from web application.
We suggested to use phonegap but don't know how we can integrate phonegap javascript api with existing web application without creating phonegap/corodova application. Idea is that, user just hit the native app button and on listener it will invoke webview with webapp url. By checking user agent we will be able to load phonegap JS api and it will be able to access native features.
Issue is that, Don't know whether it is possible or not, if yes then how we can enable phonegap api in existing web app. Desktop and mobile user will get same experience.
Use WebView component of phonegap in your application, read documentation
http://docs.phonegap.com/en/3.5.0/guide_platforms_android_webview.md.html#Android%20WebViews
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 want to develop a web app that will work in a server. Using apache or gunicorn, or something similar.
Now I need to know if there is any way to make a "native app" that will redirect to the web app.
Basically the native app redirect to the responsive web site that will run inside a webview. The native app only is needed to provide a a shortcut to the web app in the smartphone and also add the option of install in apple/android store.
This is possible? I can develop this "native app" with phonegap, but I need to embed the responsive web app powered by apache/nginx/gunicorn.
Any insights about this?
This is what people doing on my office :
They created a responsive web.
They created a native app (not hybrid), in other word : they use eclipse/xcode
The native app basically is just a full screen WebView
With this, they successfully employ android & iOS native apps only with WebView and upload it to their respective store.
Short version:
Are there any web sites people have developed that harness PhoneGap functionality that are available on the web?
Long version:
PhoneGap allows developers to package a web site inside a native app. It also allows developers to have a PhoneGap webview embedded as part of their application. They can then point this PhoneGap integrated webview at any url, and use it like a browser.
I cannot develop web sites myself so I want to know if there are any web sites on the internet that use PhoneGap features.
Thanks
Not wrong. In order to access the Phonegap API the Phonegap App must be installed on the device. The content inside the App can point to a website, that's correct. But that does not change the fact that you need to download and install the App first.
I have two Phonegap Apps in the Apple App Store so I know what I am speaking of.
PhoneGap has a section on their website dedicated to mobile apps that were built using it:
http://phonegap.com/apps
Can a custom FB web app be used inside the iOS / android FB apps? Docs are not very clear on that. You can create Bookmarks for native apps, but I want to have a bookmark pointing to our custom FB web app canvas. The goal is to develop an app that's usable on all platforms.
I've been making some test and I could'n execute a non native app from facebook app or web page, and it's not easy to load facebook web page in PC mode from a mobile device.
The official Facebook documentation for iOS says:
When a user does a search in the Facebook app your app will be visible if it passes a usage threshold. The search results will display apps that have been configured for SSO support. When the user selects your app from the search results they will be directed to your app. If the user had previously authorized your app they will be authenticated when your app is launched.
I guess that for Android will be pretty like this. So if you develop a native app that only shows a WebView pointint to your web (pretty simple by the way in iOS and android) must work with no problems.
Usually Facebook APPs are on Flash, so I don't think that it will work on iOS (Please correct me if I'm wrong with the Flash issue).
On Android, it would be extremely easy, having in mind it works with Flash with 0 problems. You'd just have to implement a WebView on your layout and point to the url of your facebook app.
In general, you can really create applications that work on both systems, iOS and Android, playing with the webView's. However, you have to know that they will never work as if they were written on native code in terms of performance.
From what I've seen, if a developer already has an existing mobile version of their app which is also on Facebook, they are able to create a tab for it that will appear on Facebook for iOS and Facebook for Android. I don't think you can create a bookmark to the webapp version to be seen on a mobile phone. Users can of course bookmark your webapp on their browsers, though.