Web View

[00:00:00]
>> So, the last section that we have here is Info. The idea of Info is to put here a Web app, okay? Just to play a little bit with Web apps. In case you have a react application, a bar Vanilla JS application, a website, and you wanna integrate this with your app, you can use a WebView.

[00:00:18]
A WebView is some kind of a browser in this case it's chromium on most of the Android out there. It's a chromium engine that we can embed in our app, okay? What's the problem? Jetpack Compose does not support a WebView. So it's also an opportunity before finishing the worship, to see how we can integrate, Android standard classic views into Jetpack Compose.

[00:00:43]
It's not complicated, okay? So if we go to Info page, right now it's empty remember, this is a composable that we did before. So, it also in the companion website, you have the code. I don't need to like copy the whole section. It says using WebView. But here you have in case you want to play with us really quickly.

[00:01:07]
What we need to create is our own composable, let's create a composer remember you type comp tab then go in WebView, okay? Like so and here we are going to declare the URL that we will load, that I will take it from firtman, let me minimize the emulator for a minute, github.io coffee masters web app, that's the URL that I will load.

[00:01:37]
And here comes the part that creates a bridge between two universes, between not yet the Web app, I'm talking about the Jetpack compose universe with the classic Android view universe. And we're going to say is this, we're going to use a composer well known as Android View. It's a composable that lets you put an Android classic view here.

[00:02:01]
And here there is a factory property with, let's say lambda expression where we are going to render the WebView, okay? So the WebView is actually something that we are going to import, okay? We need to be careful here because this is called WebView and it might be a trick.

[00:02:26]
So we can call this my WebView if you want, so then we can import the WebView from here. The WebView will receive, a context. We know what the context is? But this is something from classic Android development that we receive it as an argument here, okay? We just say we're going to construct the WebView without context.

[00:02:50]
Something that we are going to apply a couple of functions over it. Here I'm going to write a little bit of Android classic UI, okay? So it has nothing to do with Jetpack Compose, we will look a little weird. We're going to define some property known as layout params.

[00:03:08]
That is actually this. I will explain this in a minute and you will understand what's going on. ViewGroup, we're going to take LayoutParams, MATCH_PARENT and MATCH_PARENT twice. So this is actually MATCH_PARENT is a way to define Android classic UI. To say that we want my view, my width, and my height, should match my parents, okay?

[00:03:34]
Makes sense? This is like the fill max width modifier that we have here. And then I'm going to create a new WebView client, like so in case you use these to, we don't actually need to do this. How to customize the WebView. For example, if you want to disable JavaScript for security, you can do that.

[00:03:59]
So in this case, you use the WebView only for static content, HTML, or CSS animation. Maybe you have an animation that you like in CSS, but you don't want JavaScript. So you don't want anyone to inject code. So you disable JavaScript. And then we load the URL. The URL that we have set before, like so, okay?

[00:04:23]
And also typically you also need to define an update lambda expression. If you want to let me see if I have, I need to close another one, like there. So actually this is a factory. So the first time is going to execute this code. But what happens if for some reason Jetpack Compose, it's removing you from the screen and putting you later, it's calling you the update.

[00:04:54]
So typically what you want to do here is the take the WebView that we receive as an argument, it, and we're going to load the URL again. I mean, just in case. So this is my WebView. So now in my info page, we can pull the WebView. So that means that if you have, let's say that you have already an app created with Android standard classic UI toolkit, okay?

[00:05:22]
So, you can integrate everything that has been done there, with Jetpack Compose. Instead of WebView here you're going to create something different, the class that you want. So if I run this, and I go to info, this is loading a web page with JavaScript with everything inside. And you can bridge JavaScript through Kotlin and Kotlin to JavaScript in case you want to, okay?

[00:05:56]
Any question, on the WebView?
>> I mean for enterprise application you're gonna have security on both sides. And so maybe you could do single sign-on with something like this, you pass in some session cookies, you can sign into your app you-
>> So single sign-on, for example using URL 2.0 or something, that is one use case for using a WebView.

[00:06:24]
Yeah sure. Another use case is to for example, as I mentioned before animations are Media, that are more complicated to make directly with Android. And you already have some things done in JavaScript or again, the little game that is already written in JavaScript, and also that part of that little game or banners, it's been used for ads a lot, WebView.

[00:06:49]
You can share the same ad with IOS, with Android because the web pad will work everywhere. And then use a WebView us that in fact, when you see an app that has an ad at the bottom or at the top, typically that ad is a WebView. Because it's simply a more multi platform to create ads in HTML, CSS and JavaScript than making something making a view,

[00:07:12]
>> Okay, for Android or for iOS?
>> The other use case is for making a Hybrid. A Hybrid is an app that is half Native and half Web. So some parts of the app is react based or documentation. There are many apps when you open the help, or the documentation, it's a web app or support a section chat with us, where the chat is a WebView.

[00:07:40]
So it opens a WebView with a web chat application. So there are many use cases, of course when you open a web browser, you have some security concerns, some memory usage concerns so it's using more memory than before because now there is an engine, like a chrome, a full chrome engine running with your app as well, okay?

[00:08:02]
So, you have some challenges, everything is not an advantage, you have some challenges as well.