I am working with Worklight tutorial - Integrating server-generated pages in hybrid applications and have a few questions would like to ask:
I can use <iframe src="http://m.ibm.com" /> to embed the remote webpage in local HTML. Apart from there are some additional APIs which can control the WebView (e.g. set if JavaScript is enabled, clear history, etc). Is there any other benefit to use the WebViewOverlayPlugin over iframe?
I have tried to add
webViewOverlay.getSettings().setBuiltInZoomControls(true);
in WebViewOverlaySample.java to enable to zoom control in WebView. However, the zoom control is not displayed. When I create a native Android app and add the zoom control to the WebView, it can be displayed successfully.
(Environment details: Android 4.1.1, Samsung Galaxy 3, API 14)
Is it possible to interact with the hybrid app in remote page? (By custom URL scheme?)
iframe doesn't work so well in mobile browsers. There are many reports of unexpected behaviors on both iPhone and Android.
However if you use Worklight 5.0.6 and above, you may be able to use Cordova's InAppBrowser to avoid having to code it in the native view directly.
Related
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.
I have issue: in standard browser on some Android 4.2-4.4 devices my html page in some reasons (which I don't understand yet) looks broken as like as part of css just lost. But in Chrome app they are always looks good. So is there option to use Chrome app as main container for my webview application?
So is there option to use Chrome app as main container for my webview application?
WebView is using Chromium on Android 4.4+.
You cannot embed Chrome in your app, other than to the extent that WebView does.
IIRC, there are third-party libraries for embedding alternative Web rendering engines in an app. I seem to recall there being a standalone Chromium build, and Mozilla was working on allowing Gecko to be used as a library. I have not checked on the status of these in quite some time. You would also then be responsible for security updates for those Web rendering engines, and the libraries may substantially increase the size of your app.
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
I am using Titanium to create a application for Android. The app uses webview to load external HTML5 webpages. The webpage uses a manifest to cache the page and some assets. This works fine on desktop browsers and third party app browsers in Android (Chrome).
When I view the page in a webview in the Titanium build app, it seems that the manifest is not used, the page just loads everything from the server. The same problem occurs when I use the build in browser of my phone (HTC one X).
What I am trying to accomplish is that the pages are offline available, so that internet is not required tot view cached pages. Is there a fix for this problem, or should I go look in another direction to solve my problem?
the manifest file:
CACHE MANIFEST
# version 1
leerlingen.html
jquery.js
style.css
handler.js
NETWORK:
*
First: Titanium provides much more than a WebView. If you planned to display only web pages you maybe should have a look at PhoneGap / Cordova which might fit your needs in a better way.
As you've noticed not all browsers support HTML5 Caching feature as expected. I can't say if it doesn't work for Android in general or only for your specific version because WebKit usually does support it but it depends of the used WebKit version. And this could be different.
EDIT: It seems that (in native android) this feature can be enabled as written here: Application cache in HTML5 doesn't work in Android PhoneGap application. This is currently not possible in Titanium (there might be inofficial tweaks i don't know but from http://docs.appcelerator.com this is not possible).
Personally i'd prefer another solution. Cache data by myself and display it if there is no network connection. But this depends on what you try to achieve. Having few content which doesn't change often this would make sense. Having dynamically changing data (like twitter stream for instance) this would be difficult. Also it depends on your users and where they want to access your app.
And there is an open question: When you want to use all the caching features why do you want to create an app? Creating a simple mobile webpage would do the same job. When creating an app i wouldn't use the Caching Features of HTML 5. You should keep all the static resources in your app and simply load data from the network. This can be achieved by both Titanium and PhoneGap / Cordova. Titanium is more useful for a native UI and some native Features while PhoneGap / Cordova would be more appropriate for HTML5 based layout.
Just in case someone else is running in the same problems that i was facing, here is what i've done. HTML5's application cache does not seem to work in the build-in browser of Android and with that the webviews. In Titanium there seems to be no way to control the webview as to enable the application cache.
The work around for me was to use Titanium and it's httpClient function (Titanium.Network.HTTPClient) to request the files (HTML, CSS, javascript) and store it in the local app filesystem (Titanium.Filesystem).