Showing a WebView in an iOS App can be frustrating. Well not anymore because if
you want to be doubted this view controller make sure to check out this
video and SUBSCRIBE to the channel. Alex here from rebeloper.com and let's
dive in. So let's start building out the WebViewController, but before we do
that let me just remind you that you have to download the resources for this
tutorial. The link is in the description. Go ahead and take a look at it and you
will see a starter folder and the final folder. Basically I have just created a
WebViewController with all the starter data. So we will take a look at it soon.
So for this tutorial we are going to show one of the pages of my site and
that is rebeloper.com/mentoring. Go ahead and take a look at it
and if you have any issues with your code if you have any questions regarding
Firebase, SwiftUI, UIKit in general go ahead and apply now for a
mentoring session, okay. And one final thought is that we are going to heavily
use SparkUI go ahead and also take a look at that and that is of a
framework that I have built for easy UIKit manipulation. So we can build out iOS
apps lightning-fast, okay. So let's just take a look at our starter
project because I already created a starter project. Now this is agnostic you
could do the same for your own project. Make sure that we you are in a
navigation stack. So the navigation controller is actually available and
basically that is it. Just simply drag and drop the starter WebViewController
onto your project. Now let's just do that right over here
and by the way SparkUI already has this available for free and you could
just use it right off the bat and let me just show you what it does. So on this
open URL button we are just going to simply call our SWebViewController
with a URL that we have set up here. So yap this dot
this is all coming with SparkyUI. Go ahead and take a look at it and yeah
this this stacking is the layout, yeah it's pretty straightforward. So let's
build this out and see how it looks, okay. Let's just open this up.
Tapping on go to mentoring and he's loading and as you can see, there we go.
We could just refresh the page or we could just cancel out. So this is what we
are going to build out today and yeah it's already in a SparkUI. So if you
take a look at the WebViewController, let me just pause this, like stop this
and have a little bit more space here. So you will see that we need to do some
extra stuff here. Nothing too fancy but we already have some things laid out.
So let me just go through real quick through them. So here we have our view,
our view controller. Superclass, we have an initializer which we will set up in
just a moment, required initializer of course. We have a WebView that is a
WKWebView and we are going to work also here. We have a cancel bar bottom item
and the selector for it which is of course just popping the view controller.
The refresh bar bottom item which we will implement the reloading of progress
view and we are just setting up the navigation as usual and laying out the
views with the help of LayoutLess in a simple stack. Now you can see it is
really, really awesome. Go ahead and take a look at LayoutLess and SparkUI.
And finally we have a navigation delegates. Basically we are checking if
the WebView has a title and we are just going to update the title of our
navigation controller and we are going to also update and progress view
according to the progress of loading the WebView. So that is the starter
WebViewController. What I would like to also show you before we dive
into it is how what I did basically in this project because yeah we do need a
navigation stack. So for that I just removed the main dot storyboard, go ahead
and take a look at my other videos on how I do that it's pretty
straightforward. I almost do this on every other video on my channel. So after
removing the storyboard and removing the reference in the info.plist file and on
general I just go into the scene delegate and create a window scene set
the window to that window scene. Set the root view controller in a UINavigationController.
Now this is important because yeah we do need a navigation for the
WebView to appear and then I just make it key and visible, okay. So basically that's it.
Let's start coding and I will just change this controller to be the
WebViewController it's kind of the same you know because it seems SparkUI
but let's just jump to our WebViewController which is right over here that
we have just dragged and dropped. And first of all we want to initialize with
our URL. So we already have the WebView and that is WKWebView this is the
latest review from Apple and what we are going to do here is add that URL to our
WebView and we are just going to load that and we are just going to set the
title let's say to loading. So let's just delete this and after super init go
ahead and first of all we need to know that the URL it's basically a string
that we provide can actually become a URL that we can call on the WebView.
So we are going to guard unwrap it. So guard let URL equals URL with a string,
there we go and URL. Now let's finish this with an else return so we are not going to do
anything, now again this URL is new URL and this URL is the URL
that we provide in the initialization. Now that we do have a valid URL we are
going to create a URL request. So let URL request equals URL request and
let's use the simple one with a URL, there we go. We have a URL request and
finally we want to load this URL request on the WebView. How simple is that.
So load, oh I need a dot here. So load the request URL request, there we go.
And just a simple nice touch here let's set the navigation controllers title to
loading. There we go. Really, really nice. So let's see how that looks like because I
already have kind of a working WebView and it should be really nice but we will
add some more finishing touches. So let's tap go to mentoring as you can see it's
loading and it's loading but we cannot refresh at the moment but
of course we can cancel out because that is already set up in the navigation stack.
So let's move forward and let's take a look at what we have here.
So let's just take care of the refresh bar button item tapped first. So we are going to
simply just reload the WebView. As you can already tell from the hint there.
So self dot WebView reload and let's just simply
build and run and check out how that looks like it should work right off the
bat, okay. Tapping go to mentoring ,let's tap on
yeah I'm just tapped too early. So let's just tap again, as you can see it's
reloading and the loading title is still there. So we will take care of that in
just a moment. But before we do that let's set up our delegates and let's add some
of our observers. But first of all set our delegate and we want to set the
delegate of the navigation delegate because we want to check out some
navigation delegate protocols and that is setting the title and of course
after that observing. So one step at a time let's set our views and that is
WebView navigation delegate set this to self.
Okay! Let's tap away so we can see that and after that let's update this title.
So the WebView that we are getting back from the did finished navigation does
have a title so we are going to set the navigation title to be the WebViews
title, there we go. It's an optional but yeah as a navigation title is also an
optional. So let's build and run that and see what we got here.
Step on go to mentoring and the title also updated and of course if we just
reload it's it's the same, okay. So let's just cancel out of that and stop this.
Now one final thing I want to add in here is the progress view and how it
will progress up. So for that we need to add some observers. So let's just go up
here and found out WebView and in the WebView let's add some observers.
Now this is kind of typo proof, typo prune so I will just copy out from my
other document here and let me just go through what all of this means. So pasting
in there. So we are going to just add two observers. One is the estimated
project and the other one if the WebView is a new, the web URL is a new one.
Now let's just handle this and you will see how that works in just a moment.
So let me just copy all so that out and just go ahead all the way down there
to the observed value and there we go. We have a key by the way you shouldn't
really don't really need this other observer but if you want to you can do
that it's it's up to you. And I believe I have an extra here so let's see.
Works okay. So let me just indent that. So what we have here is that we are looking
for a certain key path and in the observed value we do have a lot of key
paths and if the path name is estimated progress
then we want to set the progress views progress to the WebViews estimated
progress. Of course the WebView is has I believe it's a CGFloat that
so we need to convert that to a float. This was copy and pasting but you know
how simple it is but it is typo prom, so that's why I just did that. So let's
build and run one final time and see how all over this look. So take a look at the
progress bar at the top of the navigation> See, let me just go to our
quick time player and tap on mentoring.
There we go. It was a black there, you couldn't see, really see it but if you
set our progress view to be little bit bigger height then it will
definitely appear there, okay. And it's loading really, really fast.
Good site, okay. That is it for loading a WebView with a few simple lines of code.
Let me just go back here and show you how easy that was just create a
controller and push it onto the navigation controller. Now I really hope
you enjoyed this video if you did go ahead and give it a thumbs up it really
likes with the YouTube algorithm. Now you know how easy it is to show a WebView
Controller in iOS. Now I want you to hit that navigation bell because in the next
video I will show you how you can easily download images in your iOS app with the
help of Kingfisher. Now while do you wait for that make sure to check out these
videos as well too. I talked a lot about SwiftUI, Swift in general and UIKit
and as usual I will see you in the next one.