If you want to present a WebView inside the SwiftUI app, well if you do want to do it natively, well
you're kind of out of luck, because SwiftUI doesn't support that just yet. We don't have a
kind of view a web view inside SwiftUI 2.0 right now. But we can leverage UIKit and that is where
this tutorial comes in handy. Today I'm going to show you how you can present a web view inside a
SwiftUI app. Alex here from the Rebeloper, open up Xcode, hit that SUBSCRIBE button and let's jump in.
Showing a web view in your iOS app may be critical. You want to show a web page or your site
but you don't really know how to and on top of that you want to do this on a SwiftUI app.
Well today we are going to learn just that. We are going to do that with just simple lines of code.
I have prepared everything for you so go ahead and stay tuned to the end of the tutorial. So yeah in
SwiftUI, how can you add the web view in a SwiftUI. In UIKit we have something called WKWebView
and yeah you just call that and you can have a web view inside your app. So you are not navigating
away into safari or google chrome or whatever other browser you have on your device, but you
are showing the web view inside your app. And that's a good thing because you want to keep your users
inside your app. So today we are going to do that in the SwiftUI app. We are going to use
WKView, but before we jump into that let me just remind you about DEV_FACTORY, my mentoring that
you can use for learning or trying out new stuff or bug fixing. It is a Zoom call, go ahead and
check it out rebeloper.com/mentoring, okay. So let's dive into this. We are going to use WKView GitHub
repository that I have created. You can add it as an SPM, a Swift Package Manager, okay. So down you
will see the links for the resources, basically the default project so the starter project and
I have just created the starter project. It's called the WKViewDemo and yeah it's a SwiftUI app and
all I have changed is the content view and let me just go through it real quick because one thing to
note here with web views. You want to have the navigation bar right on top. So you want to have
this web view inside our navigation view but most probably your app has this navigation view. So all
I have here is a vertical stack with a divider. I will add in here a navigation link and then we
have a button and the spacer that pushes that all of the way up. We have a navigation bar title and
we are setting the navigation bar title display mode to inline. You can leave it as large if you
wanted to but on the web view we have this as in a line, okay. So let's just jump right into it and
what we have to do is just go ahead and check out the GitHub repository, of course you can
take a look at the readme file if you want to but yeah this is video. So it's much more easier.
Go ahead and select HTTPS and copy that out. Let's move back to Xcode and navigate to our
project, Swift Packages and click on the plus sign here. Paste that IRL in there. Let's click on next
there, it's verifying. Current version is 0.0.5 but it might be larger if you are taking a look
at this in the future, which you are probably. So what we are going to do is present this web view
inside the navigation and I'm also going to show you how you can present it inside a sheet
because maybe you want to pop it up as a sheet. So let's click on finish here and let's go back
to our content view and let's have a little bit more space here, okay. So push a web view with a URL.
So the URL will be rebeloper.com. So https://rebeloper.com. So what I'm going to do is just
simply I'm going to add a navigation link here. Now usually you are going to present these views
by clutch above button or something like that so I just figured navigation link will do. So navigation
link, there we go and I'm just going to use the one with the title and the destination, okay. The title.
Push web view and here is the destination. So let me just delete this. Now this will needs to be a view.
Before we can kind of initialize the web view, we want to import WKView. So let's just import
WKView, okay. So now we have access to web view. So web view, there it is and as you can see there are
two types here with the url and the url and a bunch of other stuff. We will get to that soon.
So for now let's just go with the url and let's just type in here https://rebeloper.com.
Okay and basically that's it. Let's just build and run this and see
that, of course we are in the navigation view so we will be able to slide or rather push
this web view in, okay. It's building, really really nice. Now the next part, we will just present this
on a slidesheet, okay. So push web view. There it is. It says loading and we have this nice hud here and
we have the refresh button. We have the back button and here at the toolbar at the bottom toolbar
we have a forward button and a back or yeah it's going back button. So let me just show you
how that works. First of all let's refresh, as you can see it's loading. It's refreshing, yeah by the way
go ahead and check out DEV_FACTORY, rebeloper.com/mentoring, okay. So let's just go and apply now and
we will be taken to rebeloper.com/mentoring and yeah if we wanted to we can just go back
by clicking on the back button here and now that we do have something to go forward to, some new
page to go forward so we can just go forward. If I just tapped on it's next then it will not go back.
Okay, so yeah what about the back button? Well we can just pop this view back to our
like container view, okay. So that's that. If we present the web view, currently it's just
an empty sheet. So let's take care of that next, okay. Let me just copy this out
and just paste it in in there. As you can see I'm having also a navigation view because yeah
the shear is just a simple view but because we do need the title, the navigation bar there
we are presenting the web view inside and navigation view. So let's build and run and
see what's happening here and yeah you could, yeah let me just tap on this.
There we go. It's the same thing, it's just pushing it up and if we wanted to we can just slide down.
Let me just slide down all together, there we go. Let's present the web view again and if we just
tapped on the back we can just dismiss that. But we can also remove the back button if we wanted to.
So in this example, so at this stage I will just use one of those properties and
it is hides back button. I will set this to true. By default it's set to false, so it is
not hiding the back button. So let's just build and run again and now you will not see the back button
basically. Let's present the web view and yeah, there we go. It's not even there. So we can just
slide this down. In some cases you might want to use this one. Of course do not hide the back button
when you are presenting it, when you are pushing it on the navigation stack, okay. So let me just
remove this and finally let's talk about all of those customizable stuff, because it's
looking really great. So I would just start typing in web view and this time around let's use
this this long initializer. So the URL string will be the same. So let me just copy that out.
Now let's talk about the next one. Tint color. The tint color, well basically tint the web view that
means that we are going to tint the back text, the refresh button and also down at the toolbar
the button toolbar, the going back and going forward buttons. So let's have this as red maybe.
Title color. Now the title color is the title color that we are going to use. Let's have here
yellow maybe, of course you could just style this and by the way this is going to change
its background color according to the appearance of the current device, be it light or dark.
So that looks really nice. Most probably I will show you this. So next up we have back text. Now we have
currently on back button it says back. Now let's just call it console or whatever you want it.
It is a text. So let's use text and cancel and let's make it italic, okay. So yeah you can style
this text. Next up we have hides back button. So I don't want to hide the back button for now so
I will just remove it. So, yeah this is how you can just remove any element that you don't really want.
Now we have the reload image. That is the refresh button basically. Go forward image and the go back
image and I will just copy these out. These are images. So image and let's go system image, you
could use your own images if you wanted to, but I will just copy out these from here. I have them
pasted here, so this is a figure with this waving. That is the reload and I'm just going
to change the forward, so again image. Oh I'm typing in the wrong place. So let's select this
image, there we go. System and paste that in there. So it's forward frame fill. Yeah you
could just do whatever image you'd like here and finally let's just go with backward frame fill.
There we go and those are the customizations. So let's just build and run and see this in light mode.
Now after that I will change to dark mode and see how that looks. So present web view, really nice .
As you can see this is the italics back button which says cancel now. Rebeloper, it's yellow.
We have this waving character and going forward and going back, okay. Let's just stop this and let
me just go ahead and go into developer and dark appearance and let's build and run again and now
we will see the dark mode presentation. So push web view. Really nice. This is the default value
as you can see Rebeloper has changed from black tint color to light, like white. Let's go
back now. Present the web view and really, really nice. As you can see this is kind of a darkish
navigation bar background and toolbar background. Now that simple is to just add a web view on
your SwiftUI apps. Go ahead and check out the GitHub repository. Let me just go there, it is
github.com/rebeloper/WKView go ahead and give it a star if you did like it or maybe
watch it also when I do some changes and while you are there go ahead and check out DEV_FACTORY,
I mentor you on a Zoom call. So that is it for today. So now you have a clean and easy way to
add web views into your SwiftUI apps. Now I am curious, what would you like to see next?
What tutorial should I make next? Go ahead and leave your ideas down in the comments section and while
you do that make sure to smash that notification bell to get notified of those new videos as they
come out. Now while you are waiting for those new videos make sure to check out these videos as well too.
I talk a lot about Swift, SwiftUI in general and as usual I will see you in the next one.