Tutorial: Building a Web Browser with UIWebView Revisited (Part 1)

By far the most popular tutorial series on this site has been the “Building a Web Browser with UIWebView” series. Over time, however, the tools and code presented have become outdated. Manual memory management has been replaced with Automatic Reference Counting (ARC), which greatly simplifies code. In Interface Builder, storyboards are now the preferred way of creating user interfaces (UIs). So it seemed high time that I revisited the series and updated the tutorials for Xcode 5 and iOS 7.

To get started create a single view project and name it IDZWebBrowser. The main view controller will be called IDZViewController; rename this to IDZWebBrowserViewController using refactoring (see How to Rename a Class using Refactor if you are not sure how to do this). I also recommend renaming the storyboard file to IDZWebBrowser.storyboard. These changes are to allow the web browser component to be more easily integrated into other projects. If this all sounds a little tedious you can download the starting code here: GitHub IDZWebBrowser Step0

Creating the User Interface

To create the user interface, click on the IDZWebBrowser.storyboard file. Add a UIWebView to your view controller by dragging a Web View from the Object Library () onto the view controller, then embed the view controller in a navigation controller by clicking Editor > Embed in > Navigation Controller.

Then select the navigation controller and in Attributes Inspector click the Shows Toolbar check box.

Now click on the Web Browser View Controller and drag four bar button items onto the toolbar. In the attributes inspector, working from left to right, set the identifiers of the buttons to Rewind, Stop, Refresh and Fast Forward. The buttons will be bunched on the left hand side of the toolbar. Add Flexible Space Bar Button Items between each pair of buttons. You storyboard should now look like the image below.

Now is a good time to save your work!

If you are having difficulty you can compare your work to this version: GitHub IDZWebBrowser Step1

Connecting the User Interface to Code

In this next section you will use Interface Builder to generate code to interact with the user interface. This can save you a lot of typing.

Creating IBOutlets

To get started, with the storyboard file still selected, click on the Assistant Editor () you should now see the view controller implementation file displayed side-by-side with the storyboard. If your screen is small it may be useful to hide your Navigator using the View > Navigators > Hide Navigator menu item, the Toolbar icon or the ⌘0 keyboard shortcut and/or your Utilities using the View > Utilities > Hide Utilities menu item, the toolbar item or the ⌥⌘0 keyboard shortcut.

To create a property in your view controller to access your web view, click drag from the UIWebView on the storyboard to the class extension portion of the IDZWebBrowserViewController.m file as shown below.

In the callout that appears when you release the drag enter webView into the name field.

Repeat this process for the four toolbar buttons, naming them back, stop, refresh and forward respectively.

Your code should now look something like this.

Connecting Buttons to Actions

In addition to creating outlets that allow your code to access elements of your UI, it also possible to connect buttons to actions in Interface Builder. You can do this to connect you back, stop, refresh and forward buttons to your UIWebView.

In your storyboard control-drap from the back button on the toolbar to the UIWebView as shown below.

When you release, choose goBack from the popup that appears.

Repeat this process to connect the stop button to the stopLoading action, the refresh button to the reload action and the forward button to the goForward action.

At this point, you are almost ready to leave Interface Builder and write some code, but before doing so click on the UIWebView and in the Attributes Inspector click the Scales Page to Fit checkbox.

Loading a Web Page

A little bit of code is needed to load a web page into your web browser. Add the highlighted code to the end of IDZWebBrowserViewController class extension.

And near the end of the implementation section add:

Finally, for testing purposes, add the highlighted line to your viewDidLoad method.

You should now be able to compile and run your project. If all goes well you should see the homepage of this site displayed. You should also be able to follow links and the back, forward, stop and reload buttons should all work.

If something does not seem to work, update your viewDidLoad method as follows. This code will detect which connections are not correct.

You can also compare your work to this version: GitHub IDZWebBrowser Step2

Monitoring the UIWebView’s state: Implementing UIWebViewDelegate

The current UI has some problems that can easily be solved with a little more code: all the buttons on the toolbar are enabled all the time and there is no indication to the user that network activity is taking place.

To add a method to update the state of the toolbar buttons, add the following declaration to your class extension at the top of the implementation file.

Then add the following code to the implementation section.

This code uses the UIWebView’s properties to determine which buttons should be enabled. This code needs to be called any time the state of the UIWebView changes. The UIWebViewDelegate protocol allows your view controller to be informed when the web view changes state.

To declare that you view controller implements the protocol, modify the class extension line.

Next in the implementation section add the delegate methods.

These routines ensure that the updateButtons is called at the right times and also they display a network activity indicator in the status bar when the web view is loading.

All the remains is to connect the UIWebView delegate to your view controller. This can be done in Interface Builder, but it is also easily done by adding the highlighted line before the call to loadRequestFromString: in viewDidLoad.

If you compile and run the project now you should see that the toolbar buttons will enable and disable appropriately.

Clearly a web browser that can only visit a single site is of limited use, in part two of the tutorial you will customize the navigation bar to add an address bar and a title label to allow users to enter a URL and to display the title of the web page.

Source Code Download

The complete source code for this tutorial can be downloaded here:
You can also compare your work to this version: GitHub IDZWebBrowser Step3