DEV Community: Quang

Creating Simple Web Browser with WKWebView & UINavigationController

Quang — Sun, 15 Mar 2020 08:46:46 +0000

Table of contents

Setup Previews for your project
Your first WebView
Adding title
- Using JavaScript
- Using Key-Value Observing
Back, forward, reload
- State of the buttons
Progress bar

WKWebView was first introduced on iOS 8. With Apple finally release a deadline for all apps to migrate away from UIWebView, this series and this post is here to help you explore the features of WKWebView. In this blog post you will create a simple web browser with some basic features such as displaying content, back and forward.

Setup Previews for your project

One of the most interesting things coming out with Xcode 11 is SwiftUI's PreviewProvider, which provides a way to preview the UI during development instantly on multiple devices, multiple settings at the same time.

To preview UIViewController and UIView, you need to download previewing code from NSHipster

Since we are making this browser with a navigation bar, our main UIViewController needs to be embedded inside a UINavigationController. Therefore the previewing code would be like this:



func previewWithNavigationController(_ webViewController: UIViewController) -> some View {
    UIViewControllerPreview {
        let n = UINavigationController()
        n.pushViewController(webViewController, animated: true)
        return n
    }
}

Your first WebView

Importing what is needed:



import WebKit

Initializing a WKWebView instance and add it to our main UIViewController



class Browser: UIViewController {
    var webView = WKWebView()
    override func viewDidLoad() {
        self.view.addSubview(webView)
    }
}

Inside viewDidLoad, setup AutoLayout for our web view:



self.webView.translatesAutoresizingMaskIntoConstraints = false
self.webView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
self.webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
self.webView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
self.webView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true

Loading a specific web link at start:



self.webView.load(URLRequest(url: URL(string: "https://www.google.com")!))

Finally, complete our Preview code to get the result in the GIF. (we're using Group to display multiple SwiftUI View)



struct BrowserPreview: PreviewProvider {
    static var previews: some View {
        Group {
            previewWithNavigationController(Browser())
        }
    }
}

(in my example, I set WKWebView background to pink color to clearly display it on preview)

Adding title

Every web page has a title. And there's two ways to find this information and display on our navigation bar:

Using JavaScript

This technique is also a traditional way to get web page title on UIWebView. webView.stringByEvaluatingJavaScript(from: "document.title") is your needed code. However, to get updates on title changes, we need to conform to WKNavigationDelegate:



/// inside `viewDidLoad`
self.webView.navigationDelegate = self



extension Browser: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        self.webView.evaluateJavaScript(
            "document.title"
        ) { (result, error) -> Void in
            self.navigationItem.title = result as? String
        }
    }
}

Using Key-Value Observing

KVO is an Objective-C feature that help you to track changes of any properties of a NSObject. Property title is what we need:

Observe the web view:



self.webView.addObserver(self, forKeyPath: #keyPath(WKWebView.title), options: .new, context: nil)

update the navigation title with the change:



override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == #keyPath(WKWebView.title) {
            self.navigationItem.title = self.webView.title
        }
    }

Back, forward, reload

Instead of using external images for those buttons, I will use SF Symbols, introduced with iOS 13 and Xcode 11, as button icon.

Let's preview one of these first, with tint color



struct BrowserResourcePreview: PreviewProvider {
    static var previews: some View {
        Group{
            UIViewControllerPreview {
                let n = UINavigationController()
                let v = UIViewController()
                let img = UIImage(systemName: "arrow.left")!.withTintColor(.blue, renderingMode: .alwaysTemplate)
                v.navigationItem.setLeftBarButton(UIBarButtonItem(image: img, style: .plain, target: nil, action: nil), animated: true)
                n.pushViewController(v, animated: true)
                return n
            }
        }
    }
}

Similarly, we use arrow.right for the forward button and arrow.counterclockwise for refresh button. After using navigation bar for title, we will use toolbar for those buttons

On feature side, WKWebView provides methods: goBack, goForward, reload, which are perfect for what we need



    var backButton: UIBarButtonItem?
    var forwardButton: UIBarButtonItem?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationController?.setToolbarHidden(false, animated: true)
        let backButton = UIBarButtonItem(
            image: UIImage(systemName: "arrow.left")!.withTintColor(.blue, renderingMode: .alwaysTemplate),
            style: .plain,
            target: self.webView,
            action: #selector(WKWebView.goBack))
        let forwardButton = UIBarButtonItem(
            image: UIImage(systemName: "arrow.right")!.withTintColor(.blue, renderingMode: .alwaysTemplate),
            style: .plain,
            target: self.webView,
            action: #selector(WKWebView.goForward))
        let reloadButton = UIBarButtonItem(
                   image: UIImage(systemName: "arrow.counterclockwise")!.withTintColor(.blue, renderingMode: .alwaysTemplate),
                   style: .plain,
                   target: self.webView,
                   action: #selector(WKWebView.reload))

        self.toolbarItems = [backButton, forwardButton,
                             UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
                             reloadButton
        ]
        self.backButton = backButton
        self.forwardButton = forwardButton
    }

State of the buttons

Besides, to make our UI more intuitive, we need to display when the web view can go back or go forward. This time, we use KVO again with 2 properties: canGoBack, canGoForward.



override func viewDidLoad() {
    super.viewDidLoad()
    self.backButton?.isEnabled = self.webView.canGoBack
    self.forwardButton?.isEnabled = self.webView.canGoForward
    self.webView.addObserver(self, forKeyPath: #keyPath(WKWebView.canGoBack), options: .new, context: nil)
    self.webView.addObserver(self, forKeyPath: #keyPath(WKWebView.canGoForward), options: .new, context: nil)
}
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
    if let _ = object as? WKWebView {
        if keyPath == #keyPath(WKWebView.canGoBack) {
            self.backButton?.isEnabled = self.webView.canGoBack
        } else if keyPath == #keyPath(WKWebView.canGoForward) {
            self.forwardButton?.isEnabled = self.webView.canGoForward
        }
    }
}

Progress bar

Adding a progress bar, also with KVO this time. On UI, we also need to add tint color and make a larger easy-to-see progress bar



// adding progress view
let progressView = UIProgressView(progressViewStyle: .default)
self.progressBar = progressView
self.view.addSubview(progressView)
// updating auto layout & UI
progressView.translatesAutoresizingMaskIntoConstraints = false
progressView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 1.0).isActive = true

if #available(iOS 11.0, *) {
    progressView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
}
progressView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0).isActive = true
progressView.setProgress(0.0, animated: true)
progressView.transform = progressView.transform.scaledBy(x: 1, y: 4)
progressView.backgroundColor = .gray
progressView.tintColor = .blue

Observing the estimatedProgress:



self.webView.addObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress), options: .new, context: nil)



override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
        if let o = object as? WKWebView, o == self.webView {
            if keyPath == #keyPath(WKWebView.estimatedProgress) {
                progressBar?.setProgress(Float(self.webView.estimatedProgress), animated: true)
            }
        }
}

Take a look at the GIF above, we can see in some cases, the progress bar is going backwards and it should hide after web view finish the loading. We can update the observing code above:



if keyPath == #keyPath(WKWebView.estimatedProgress), let progressView = self.progressBar {
    let newProgress = self.webView.estimatedProgress
    if Float(newProgress) > progressView.progress {
        progressView.setProgress(Float(newProgress), animated: true)
    } else {
        progressView.setProgress(Float(newProgress), animated: false)
    }
    if newProgress >= 1 { // delaying so that user can see progress view reach 100%
        DispatchQueue.main.asyncAfter(deadline: .now()+0.3, execute: {
            progressView.isHidden = true
        })
    } else {
        progressView.isHidden = false
    }
}

Conclusion

With this tutorial, we explored the basic features of WKWebView, and also combining powerful features from SwiftUI, Objective-C, UIKit to build a simple web browser.

You can find the full source code for this tutorial here on GitHub Gist

Thanks for reading 🙏 and feel free to leave me any comments or questions

Multiple Network environment configuration in iOS: Staging, proxy and localhost

Quang — Wed, 04 Mar 2020 16:11:24 +0000

Making network request is a common task in iOS app development. If your company has its own backend team, it's likely that there's different environments you have to set up for your network code: usually Staging & Production environment. There might be some differences between those:

Staging might use HTTP while Production always use HTTPS
You might need to launch a localhost server
Your staging domain and production domain is different
Your Staging domain needs a special proxy config.

Here's how to handle those differences using iOS's built-in URLSession:

Understanding URLComponents

URLComponents is a type-safe tool to parse URL information to scheme (HTTPS), host (domain), URL path and query items; and helping you constructing a URL from those elements, with percent encoding included.
Intitialize URLComponents with this convenient extension:

extension URLComponents {
    init(scheme: String, host: String, path: String, queryItems: [URLQueryItem]) {
        self.init()
        self.scheme = scheme
        self.host = host
        self.path = path
        self.queryItems = queryItems
    }
}

Let's create an enum for the scheme we will handle

enum URLScheme : String {
    case HTTPS = "https"
    case HTTP = "http"
}

Configure environments

Staging domain

It's obvious from the URLComponents type that property .scheme will take HTTP or HTTPS and property .host will take your special domain for staging

Local host

For a local host server, you also need to configure the port, where URLComponents.port come in:

self.host = "localhost"
self.scheme = URLScheme.HTTP.rawValue // "HTTP"
self.port = 8080

Special proxy

If your company requires a special proxy in a special Wifi for testing Staging server or internal stuffs, you probably had to deal with iPhone's Wifi settings:

However, this kind of config also make the phone unable to connect to the Internet. Fortunately, you can always add an embedded proxy to any URLSessionConfiguration by taking advantage of property .connectionProxyDictionary.

public func getProxyConfig() -> URLSessionConfiguration {
        let proxyConfiguration = URLSessionConfiguration.default
        proxyConfiguration.requestCachePolicy = URLRequest.CachePolicy.reloadIgnoringLocalCacheData
        proxyConfiguration.connectionProxyDictionary = [AnyHashable: Any]()
        proxyConfiguration.connectionProxyDictionary?[kCFNetworkProxiesHTTPEnable as String] = 1
        proxyConfiguration.connectionProxyDictionary?[kCFNetworkProxiesHTTPProxy as String] = "your.company.internal.domain"
        proxyConfiguration.connectionProxyDictionary?[kCFNetworkProxiesHTTPPort as String] = 9502
        proxyConfiguration.connectionProxyDictionary?[kCFStreamPropertyHTTPSProxyHost as String] = "your.company.internal.domain"
        proxyConfiguration.connectionProxyDictionary?[kCFStreamPropertyHTTPSProxyPort as String] = 9502
        proxyConfiguration.timeoutIntervalForRequest = 30.0
        proxyConfiguration.timeoutIntervalForResource = 60.0
        return proxyConfiguration
    }

kCFStreamPropertyHTTPSProxyHost, kCFNetworkProxiesHTTPProxy is for HTTP Proxy Server. kCFNetworkProxiesHTTPPort and kCFStreamPropertyHTTPSProxyPort is for HTTP Proxy Port.

Finally, with newly created URLSessionConfiguration instance, using +[NSURLSession sessionWithConfiguration:] or URLSession.init(configuration: URLSessionConfiguration) to create your own URLSession. Use this new URLSession for your own network calls, and the rest, including web views, system services stay connecting to the Internet normally.

Enjoy your testable networking code!!!

Building your own XCFramework

Quang — Wed, 08 Jan 2020 15:17:24 +0000

XCFramework is born to replace the traditional universal framework format .framework, which can contain both simulator and physical device architectures code. Besides, XCFramework can also support Catalyst, Mac, watchOS inside a framework

Using Apple provided tool

From Terminal, Using xcodebuild -create-xcframework which takes input -framework (from your previous archives) and -output

For example:

xcodebuild archive -workspace Alamofire.xcworkspace -scheme "Alamofire iOS" -sdk iphoneos13.0 OBJROOT=build/iOS
xcodebuild archive -workspace Alamofire.xcworkspace -scheme "Alamofire iOS" -sdk iphonesimulator13.0 OBJROOT=build/simulator
xcodebuild -create-xcframework -framework build/iOS/UninstalledProducts/iphoneos/Alamofire.framework -framework build/simulator/UninstalledProducts/iphonesimulator/Alamofire.framework -output build/Alamofire.xcframework

Xcode build phase script

create new Aggregate target, add to New Run Script Phase. This new target should be in the same Xcode project with your framework target.

# Release dir path
OUTPUT_DIR_PATH="${PROJECT_DIR}/XCFramework"

function archivePathSimulator {
  local DIR=${OUTPUT_DIR_PATH}/archives/"${1}-SIMULATOR"
  echo "${DIR}"
}

function archivePathDevice {
  local DIR=${OUTPUT_DIR_PATH}/archives/"${1}-DEVICE"
  echo "${DIR}"
}

# Archive takes 3 params
#
# 1st == SCHEME
# 2nd == destination
# 3rd == archivePath
function archive {
    echo "▸ Starts archiving the scheme: ${1} for destination: ${2};\n▸ Archive path: ${3}.xcarchive"
    xcodebuild clean archive \
    -project "${PROJECT_NAME}.xcodeproj" \
    -scheme ${1} \
    -configuration ${CONFIGURATION} \
    -destination "${2}" \
    -archivePath "${3}" \
    SKIP_INSTALL=NO \
    OBJROOT="${OBJROOT}/DependentBuilds" \
    BUILD_LIBRARY_FOR_DISTRIBUTION=YES | xcpretty
}

# Builds archive for iOS simulator & device
function buildArchive {
  SCHEME=${1}

  archive $SCHEME "generic/platform=iOS Simulator" $(archivePathSimulator $SCHEME)
  archive $SCHEME "generic/platform=iOS" $(archivePathDevice $SCHEME)
}

# Creates xc framework
function createXCFramework {
  FRAMEWORK_ARCHIVE_PATH_POSTFIX=".xcarchive/Products/Library/Frameworks"
  FRAMEWORK_SIMULATOR_DIR="$(archivePathSimulator $1)${FRAMEWORK_ARCHIVE_PATH_POSTFIX}"
  FRAMEWORK_DEVICE_DIR="$(archivePathDevice $1)${FRAMEWORK_ARCHIVE_PATH_POSTFIX}"

  xcodebuild -create-xcframework \
            -framework ${FRAMEWORK_SIMULATOR_DIR}/${1}.framework \
            -framework ${FRAMEWORK_DEVICE_DIR}/${1}.framework \
            -output ${OUTPUT_DIR_PATH}/xcframeworks/${1}.xcframework
}

### Static Libraries cant be turned into frameworks
function createXCFrameworkForStaticLibrary {

  LIBRARY_ARCHIVE_PATH_POSTFIX=".xcarchive/Products/usr/local/lib"
  LIBRARY_SIMULATOR_DIR="$(archivePathSimulator $1)${LIBRARY_ARCHIVE_PATH_POSTFIX}"
  LIBRARY_DEVICE_DIR="$(archivePathDevice $1)${LIBRARY_ARCHIVE_PATH_POSTFIX}"

  xcodebuild -create-xcframework \
            -library ${LIBRARY_SIMULATOR_DIR}/libStaticLibrary.a \
            -library ${LIBRARY_DEVICE_DIR}/libStaticLibrary.a \
            -output ${OUTPUT_DIR_PATH}/xcframeworks/${1}.xcframework
}

echo "#####################"
echo "▸ Cleaning the dir: ${OUTPUT_DIR_PATH}"
rm -rf $OUTPUT_DIR_PATH

#### Dynamic Framework ####

DYNAMIC_FRAMEWORK="${PROJECT_NAME}"

echo "▸ Archive $DYNAMIC_FRAMEWORK"
buildArchive ${DYNAMIC_FRAMEWORK}

echo "▸ Create $DYNAMIC_FRAMEWORK.xcframework"
createXCFramework ${DYNAMIC_FRAMEWORK}

The above script build XCFramework for two architectures: generic/platform=iOS Simulator and generic/platform=iOS; saving to your project folder while assuming your framework scheme has the same name with project name.

Visit Gist

Using Carthage

While XCFramework is not fully supported, you can currently build XCFramework with this script:

carthage build --platform iOS --no-skip-current --create-xcframework

Follow this issue request on Carthage GitHub for future updates

Mock URLProtocol for local unit testing

Quang — Wed, 27 Nov 2019 06:55:17 +0000

There are many reasons you might want to mock a network response:

You don't want to test with network calls on production server
The backend side of your team might not be ready yet
There might be hard-to-reproduce cases such as token expired, wrong password, ...

Making a fake network call might also be useful for running unit testing, or creating a workable iOS app (which is not possible with localhost)

Mock URLProtocol is a technique where you overrides initialization of URLSession to make it return your own networking calls:

let urlSession = URLSession(configuration: configuration)

Creating a MockURLProtocol class that can be passed to .protocolClasses of URLSessionConfiguration is where we headed

let configuration = URLSessionConfiguration.ephemeral
configuration.protocolClasses = [MockURLProtocol.self]
let urlSession = URLSession(configuration: configuration)
urlSession.dataTask(with: urlRequest) { data, response, error in
   // ... handle your response
}.resume()

Implementing MockURLProtocol as suggested by Apple in WWDC 2018:

class MockURLProtocol: URLProtocol {
    static var requestHandler: ((URLRequest) throws -> (HTTPURLResponse, Data) )?
    override class func canInit(with request: URLRequest) -> Bool {
        return true
    }
    override class func canonicalRequest(for request: URLRequest) -> URLRequest {
        return request
    }
    override func stopLoading() {

    }
    override func startLoading() {
         guard let handler = MockURLProtocol.requestHandler else {
            return
        }
        do {
            let (response, data)  = try handler(request)
            client?.urlProtocol(self, didReceive: response, cacheStoragePolicy: .notAllowed)
            client?.urlProtocol(self, didLoad: data)
            client?.urlProtocolDidFinishLoading(self)
        } catch  {
            client?.urlProtocol(self, didFailWithError: error)
        }
    }
}

Passing your response inside .requestHandler:

MockURLProtocol.requestHandler = {request in 
    let exampleData = """
{
  "base": "EUR",
  "date": "2018-04-08",
  "rates": {
    "CAD": 1.565,
    "CHF": 1.1798,
    "GBP": 0.87295,
    "SEK": 10.2983,
    "EUR": 1.092,
    "USD": 1.2234
  }
}
""".data(using: .utf8)!
    let response = HTTPURLResponse.init(url: request.url!, statusCode: 200, httpVersion: "2.0", headerFields: nil)!
    return (response, exampleData)
}

(an example response from exchangeratesapi)

You can custom MockUrlProtocol above by

subclasing MockURLProcotol for each type of request, just overriding startLoading and adding your own .requestHandler:

class MockUnclaimedTokenExpire: MockURLProtocol {
    override func startLoading() {
        MockUnclaimedTokenExpire.requestHandler = { request in
        // new custom response
        }
        super.startLoading()
    }
}

Different return result based on handling request

With the builtin tools above, you can complete a workable app despite backend is ready or not. Just remember to switch back to URLSession.shared when you're ready to deploy in production.

Compiler flags for SwiftUI codes

Quang — Fri, 15 Nov 2019 20:28:04 +0000

SwiftUI is a very interesting library introduced at WWDC 2019. It brings iOS developer community a novel way to develop UIs for iOS and MacOS apps.

SwiftUI is also the first Swift binary framework that Apple introduced despite Swift was born in 2014 and been very popular.

To integrate SwiftUI, simply importing it, right?

import SwiftUI

First of all, SwiftUI is only available on iOS 13 and later. It's likely that your app or team's app has to support iOS 12, 11. So adding @available is needed.

@available(iOS 13, *)
struct ContentView: View {
  var body: some View {
    Text("Hello World")
  }
}

Next, to make sure your app doesn't crash at launch on iOS less than 13, you need to add SwiftUI as -weak-framework, the same for Combine, which was also introduced last WWDC.

But then lowering your deployment target to iOS 10 or lower and compiling to Generic iOS Device or archiving, this happens:

the reason for this is because SwiftUI wasn't compiled for 32 bit architectures. So adding 64-bit compiler flag to every SwiftUI code is required.

#if (arch(x86_64) || arch(arm64))
@available(iOS 13.0, *)
struct HelloWorld : View {
    var body: some  View {
        //...
    }
}
#endif

canImport(SwiftUI) won't help you solve the problem above.

Finally, SwiftUI uses many new Swift 5.1 features, like some keyword of opaque return types and property wrappers. So if you, at some point, wants your code to compiles to Xcode before 11, you needs to add:

#if compiler(>=5.1)
//...
#endif

compiler flag actually represents Xcode 11, because changing SWIFT_VERSION in Xcode project still can get SwiftUI fully functional. So adding #if swift(>=5.1) is not the correct way.