Linking to an External Webpage

Topics Covered in This iOS Development Tutorial:

Coding a Link to the Webpage, Adding a Button, Updating NSAppTransportSecurity

Exercise Preview

Exercise Overview

In this exercise, you'll master one of the most essential skills in modern iOS development: integrating external web content into your native applications. By the end of this tutorial, you'll have implemented a seamless WebKit integration that allows your app to display external websites while maintaining the native iOS user experience. This capability is crucial for apps that need to display dynamic web content, user documentation, or integrate with web-based services.

Getting Started

1. Before diving into web integration, ensure your development environment is properly configured. If you completed the previous exercise, you can skip the following sidebar. We strongly recommend completing exercises 1B–2D sequentially, as each builds essential foundational knowledge for iOS development.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open in Xcode. If you closed it, navigate to your project location and re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

   Project Continuity

   This exercise builds on previous work (1B-2D). If you haven't completed those exercises, use the provided Jive Factory Ready folder as your starting point.

Creating the Web View Controller

Modern iOS applications frequently need to display web content without breaking the native user experience. Apple's WebKit framework provides the perfect solution, offering the same rendering engine used by Safari while maintaining full integration with your app's navigation and design patterns.

1. In the Project navigator, click on Main.storyboard.
2. Clear any text in the search bar of the Object library , and scroll to the top to access all available interface elements.
3. Zoom out to 50% to get a better overview of your storyboard layout. Scroll until the Bands Detail View Controller is centered (it's the rightmost view controller in your current layout).
4. From the Object library , drag a View Controller onto the Editor canvas, positioning it below the Bands Detail View Controller.
5. Arrange the new view controller with adequate spacing below the Bands Detail View Controller to maintain a clean storyboard layout—this organization becomes crucial as your app grows in complexity.
6. Before adding the WebKit view, zoom to 100% on the new View Controller. Precise positioning is essential for proper Auto Layout constraint setup.
7. In the Object library search bar , type: web
8. Drag WebKit View onto your empty view controller. WebKit View is Apple's recommended component for displaying web content, offering superior performance and security compared to the deprecated UIWebView.

9. Resize the WebKit View to fill the entire view controller area.

   Professional iOS apps must support multiple device sizes and orientations. Auto Layout constraints ensure your web view displays correctly across all iOS devices, from iPhone SE to iPad Pro.

10. With the Web View selected, click the Add New Constraints button at the bottom right of the Editor.
11. In the constraints popup, uncheck Constrain to margins to ensure the web view extends to the screen edges for a full-screen web experience.
12. In the constraints section, click all four red lines to activate them, ensuring each is set to 0. This creates edge-to-edge constraints.

13. Click Add 4 Constraints to apply the layout rules.

Creating a Custom View Controller Class

Every view controller that handles specific functionality requires its own custom class. This separation of concerns is a fundamental principle of professional iOS development, enabling code reusability, maintainability, and testing.

1. In the Project navigator, select MapViewController.swift. This selection determines where Xcode will position your new file in the project hierarchy—maintaining organized file structure is essential for team development.
2. Press Cmd–N to create a new file.
3. Double–click Cocoa Touch Class to select this template, which provides the standard structure for iOS view controllers.
4. From the Subclass of dropdown menu, choose UIViewController (or begin typing and let Xcode's autocomplete assist you).

5. For the Class name, enter WebViewController. This naming convention clearly identifies the controller's purpose.

   By subclassing UIViewController, your WebViewController inherits all standard view controller functionality while allowing you to add specialized web handling capabilities. This inheritance model is fundamental to iOS development architecture.

6. Click Next.
7. Verify you're in the Jive Factory folder, then click Create.
8. Notice WebViewController.swift now appears in your Project navigator. The next crucial step is connecting this code file to your storyboard view controller.
9. In the Project navigator, click on Main to return to your storyboard.
10. Select the View Controller containing the Web View by clicking its top bar. A blue outline indicates successful selection.
11. In the Utilities panel on the right, click the Identity inspector tab .

12. In the Class field, type W and Xcode should autocomplete to WebViewController. If autocomplete doesn't trigger, type the full name. Press Return to establish the connection between your storyboard scene and your custom class.

Implementing the Web Navigation Logic

Now comes the critical implementation phase where you'll write the code that transforms your interface into a functional web browser. This involves creating outlets, importing frameworks, and implementing the URL loading mechanism.

1. If the Document Outline is open, click Hide Document Outline to maximize your workspace.
2. Click the Adjust Editor Options icon in the top-right corner and select Assistant. This dual-pane view enables drag-to-connect functionality between interface and code.
3. Your screen should now display the storyboard on the left and WebViewController.swift on the right. If the correct file isn't showing on the right, click the filename menu and select WebViewController.swift.

4. Below the import UIKit statement, add the WebKit framework import:

   import UIKit
   import WebKit

   The WebKit import gives you access to WKWebView and related classes, which provide modern web rendering capabilities with enhanced security and performance compared to legacy web components.

5. Create an outlet connection by holding Control and dragging from the WebKit View in the storyboard to your WebViewController.swift file, positioning it below the class declaration line.

6. Configure the outlet with these specifications:

   Connection:	Outlet
   Name:	siteWebView
   Type:	WKWebView
   Storage:	Weak

7. Click Connect to establish the outlet relationship.

8. Add proper spacing to maintain code readability:

   class WebViewController: UIViewController {
   
      @IBOutlet weak var siteWebView: WKWebView!
   
      override func viewDidLoad() {

9. In the Project navigator, select WebViewController.swift to focus on the code implementation.
10. Locate the viewDidLoad method. This method executes when the view controller loads, making it the ideal place to initialize your web content. Understanding the view controller lifecycle is fundamental to creating responsive iOS applications.

11. Inside the viewDidLoad method, add the URL initialization code:

    override func viewDidLoad() {
       super.viewDidLoad()
    
       let jiveURL = URL(string: "http://www.thejivefactory.com")
    
       // Do any additional setup after loading the view.
    }

    This code creates a URL object from a string. Swift's URL class provides robust URL handling with built-in validation and encoding capabilities essential for network operations.

12. Next, create a URLRequest object that encapsulates the web request:

    override func viewDidLoad() {
       super.viewDidLoad()
    
       let jiveURL = URL(string: "http://www.thejivefactory.com")
       let myRequest = URLRequest(url: jiveURL! as URL)
    
       // Do any additional setup after loading the view.
    }

    URLRequest objects contain all the information needed for a web request, including headers, HTTP method, and caching policies. This abstraction allows for sophisticated network request management.

13. Finally, instruct the WebKit view to load the request:

    let myRequest = URLRequest(url: jiveURL! as URL)
    siteWebView.load(myRequest as URLRequest)
    
    // Do any additional setup after loading the view.

    The load method initiates the web request and begins rendering the page content within your app's interface.

14. Save your work with Cmd–S.

Adding User Interface Navigation

Professional mobile applications require intuitive navigation patterns. You'll now create a user interface element that allows users to access the web view from your existing detail view, following iOS Human Interface Guidelines for consistent user experience.

1. In the Project navigator, click on Main to return to your storyboard.
2. Navigate to the Bands Detail View Controller and ensure you're at 100% zoom for precise interface element placement. This view contains the placeholder content including Name of Band and Type of music fields.
3. In the Object library search bar , clear any existing text and type: button
4. Drag a Button from the library and position it below the Description text. We'll refine its positioning shortly.
5. Click the Attributes inspector tab to access visual customization options.
6. Scroll to the View section and set Background to Light Gray Color (click the dropdown arrows to access color options).
7. In the Button section, set Text Color to White Color to ensure proper contrast and accessibility compliance.
8. Click the Size inspector tab to configure button padding.

9. Configure the Content Insets to provide appropriate touch targets and visual spacing:

   Left:	15
   Top:	8
   Bottom:	8
   Right:	15

10. Double–click the Button to edit its text, change it to Jive Factory website, and press Return to apply the change.
11. Position the button below the Description text, using Interface Builder's alignment guides to maintain consistent left-edge alignment with other interface elements.
12. Create the navigation connection by holding Control and dragging from the Jive Factory website button to the Web View Controller below. This establishes a segue relationship between the two view controllers.
13. From the segue options menu, select Push (deprecated). While marked as deprecated, push segues remain functional and appropriate for this navigation pattern.
14. Test your implementation by setting the active scheme to iPhone 13 Pro for simulation.
15. Click the Run button to build and launch your app.
16. When the Simulator loads, select any band listing to navigate to the detail view.

17. Tap the Jive Factory website button to test the web view navigation.

    You'll likely see a blank screen at this point—this is expected due to iOS security restrictions that we'll address in the next section.

Configuring App Transport Security

iOS includes App Transport Security (ATS), a critical security feature introduced in iOS 9 that's become increasingly important in today's security-conscious mobile environment. ATS requires HTTPS connections by default and blocks unencrypted HTTP traffic. Since many websites still use HTTP, you'll need to configure your app's security settings appropriately.

1. Return to Xcode from the Simulator.
2. In the Project navigator, select Info.plist—this file contains crucial app configuration settings that iOS reads during app launch.
3. Locate the last property entry (typically Supported interface orientations).
4. Hover over this property to reveal the plus icon , then click it to add a new configuration property.
5. In the new text field, begin typing App Transport Security Settings. Xcode's autocomplete will suggest the correct property name. Press Return when it appears.
6. Expand the new property by clicking the disclosure triangle next to App Transport Security Settings.
7. Hover over the App Transport Security Settings entry and click the plus icon to add a sub-property.
8. Select Allow Arbitrary Loads from the dropdown options and press Return.

9. For the Allow Arbitrary Loads value, click the double triangles and select the Boolean value YES.

   This configuration allows HTTP connections for development and testing purposes. In production applications, consider implementing more granular security settings that whitelist specific domains while maintaining overall security posture.

10. Save your changes with Cmd–S.
11. Test the security configuration by clicking the Run button to rebuild and launch your app.
12. Navigate through your app: select a band listing to access the detail view.

13. Tap the Jive Factory website button. The website should now load successfully, demonstrating the complete integration of web content within your iOS application.