I'm building a smartphone app with cordova. My goal is to display a remote web page within the app, providing an additional footer that allows the user to switch between the web page and other content (e.g. configuration).
Unfortunately iframes aren't an option because of https and different behavior on the platforms. Using InAppBrowser doesn't let me display the footer (see https://issues.apache.org/jira/browse/CB-3397).
The only possibility I see, is to build a completely native app for each platform and embed the webview by hand. Is there an alternative way using cordova or another cross-platform framework?
ChildBrowser will do the wonder.
https://github.com/alunny/ChildBrowser
Related
Is it possible to create a mobile app for both Andriod and iOS which will display the same data as on a website written in HTML CSS and js?
The site only displays information but this info is used regularly by users. I have been asked if it's possible to create an app that the same info would be available on? Ideally, any changes made to the website would be reflected in the app without having to change the code for the app as well.
edit - The page on the app will still need functionality i.e being able to open modals when a button is clicked.
You could embed your site in a native app using a WebView. Nowadays you have several technologies as React native and Flutter that could help publishing your site as a multiplatform app.
I am looking forward to create an Android app with Kotlin.
But I can not use Android Studio or other IDEs. I am using the Amazon AWS Cloud9 IDE now.
I have found there is WebView and read articles, but I still cannot figure out how it works.
It is possible to emulate the UI on the web or is it only for web application development?
The WebView framework allows you to specify viewport and style properties that make your web pages appear at the proper size and scale on all screen configurations for all major web browsers. You can even define an interface between your Android app and your web pages that allows JavaScript in the web pages to call upon APIs in your app—providing Android APIs to your web-based application.
Consider using these alternatives to WebView if your app falls into the following use cases:
If you want to send users to a mobile site, build a progressive web app (PWA).
If you want to display third-party web content, send an intent to installed web browsers.
If you want to avoid leaving your
app to open the browser, or if you want to customize the browser's
UI, use Chrome Custom Tabs.
More details
I've read a few post saying that the amazon app uses webviews pretty heavily
(sources: - https://www.quora.com/Why-does-the-Amazon-app-use-WebView-in-their-Android-and-iOS-application
and https://www.teamblind.com/post/Amazon-app--webviews-cuT4sN6C)
Now, i've played with webviews a bit in android in the past where i loaded a remote url to the webview and it loaded the exact version of that website onto the mobile app. This to me was expected. So i investigated amazon's ios app and compared it to the desktop website (in mobile view), and indeed they were very similimar. However, there were some elemets that were missing on either or platforms. i'll attach the images below:
(left is the ios app, right is the mobile view of the website on desktop)
Now I have a few questions:
when people mention "webview" for amazon's use-case are they talking about the native webview from android and ios like the Webview and WKWebview? (https://developer.android.com/guide/webapps/webview and https://developer.apple.com/documentation/webkit/wkwebview), or are they talking about hybrid app technology like apache cordova or Ionic?
If it is indeed a native webview container, can you edit the html to remove some elements? like how some stuff were missing from the mobile app that weren't on the desktop website. And also add stuff like now the mobile app has "Buy Now" button, and the "favourite icon"?
How far can i go with Webviews, in terms of having access to native features like camera, gps and all that good stuff?
When people mention "webview" for amazon's use-case are they talking
about the native webview from android and ios like the Webview and
WKWebview?
Yes, they are indeed framework webviews.
But there is a good chance that they use hybrid app tech.
If it is indeed a native webview container, can you edit the html to remove some elements? like how some stuff were missing from the mobile app that weren't on the desktop website. And also add stuff like now the mobile app has "Buy Now" button, and the "favourite icon"?
You can edit html to remove / add elements using javascript in webview BUT this is not the case here.
These sites have a specific different UI for different devices. (Desktop / Mobile)
For example: Flipkart uses a mobile version on apps which is not available on browsers, except Chrome on mobile (I guess). It just redirects the user to the respective app store to download the app.
I assume it is done by checking the User-Agent field.
How far can i go with Webviews, in terms of having access to native features like camera, gps and all that good stuff?
You can use camera and gps via webview.
More info. here and here.
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 gather from this page that it's possible to use the WebView framework build an Android web app that can then be run on the device without using a web browser.
My question is: is the same possible for iOS, possibly through the UIWebView object?
Notice that the link talk about:
You can make your web content available to users in two ways: in a traditional web browser and in an Android application, by including a WebView in the layout.
With this you can implement a javascript bridge and catch javascript event in android java contest.
iOS allow the same. UIWebView can catch javascript event and work with it.
The most cross platform sdk for mobile development use this feauture to realize the application in javascript and work it in a selfcontained webView.
Use this to start